• 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Ajax(3) - Ajax学習中(2)

 Ajaxに対する学習報告。

 Ajaxを勉強しよう
  http://www.openspc2.org/JavaScript/Ajax/Ajax_study/index.html

を引き続き読み進めて、第三章の「3. ゲームのマップを表示する」まで進む。
 その中でCSSが出てきて、またしてもちょいストップ。
 このスタイルシートのおかげで、半透明gifファイルを重ねて表示できるようになっており、斜めから見下ろしたようなマップの表示を実現している。

for(var i=0; i<MapHeight; i++)
{
 for(var j=0; j<MapWidth; j++)
 {
  mapNumber = lineData[i].charAt(j);

  // スタイルシート用計算
  mx = MapWidth * blockSize + j*blockSize - i*blockSize;
  my = i*blockSize + screenOffset;

  resultImage += '<img src="images/'+mapNumber+'.gif" class="mapBlock" style="top:'+my+'px;left:'+mx+'px">';
 }
 resultImage += "<br>";
}

<!-- スタイルシート -->
<style type="text/css"><!--
.mapBlock{
width:64px;
height:32px;
position:absolute;
}
--></style>
スポンサーサイト

コメント

 スタイルシートについてチョロっと勉強。

eWeb スタイルシート
 http://css.eweb-design.com/index.html
・基本的な書き方・単位について(class style)
  http://css.eweb-design.com/0106_bsc.html
・配置方法(position)
  http://css.eweb-design.com/0804_ps.html

「position:absolute;」の部分がちょっと怪しいが基本的には理解。

mx = MapWidth * blockSize + j*blockSize - i*blockSize;

この式から、
・下へ行くほど左側に表示される。
・一段ごとに左に32pxずれて表示される
・始まる位置は32*8=256px

○○○○○○○○■■■■■■■■
○○○○○○○■■■■■■■■
○○○○○○■■■■■■■■
○○○○○■■■■■■■■
○○○○■■■■■■■■
○○○■■■■■■■■
○○■■■■■■■■
○■■■■■■■■
■■■■■■■■

コメントを投稿する

管理者にだけ表示を許可する

トラックバック

カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ブログ内検索
プロフィール
2007年4月からゲーム業界の大手某社で働き始めた管理人 ねこきき が日々思うことの記録。業界に対する話や最先端技術的の話、プログラム話などをダラダラと書いています。

管理人のWebページ(就活の記録など)
足跡歓迎!ココをクリック!

ねこきき

最近の記事
月別アーカイブ
カテゴリー
最近のコメント
最近のトラックバック
Counter
ブロとも申請フォーム

この人とブロともになる

FC2ブログランキング

FC2Blog Ranking

ブログ内検索
RSSフィード
リンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。