FC2ブログ

スポンサーサイト

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

背景をdiv要素に描画して、HTML5 Canvasタグに重ねる

去年作った戦車が撃ちあうゲームをGAEのページへ移行した。
Canvas Tank Battle | 無職のHTML5 Canvas

移行のついでに、地形マップをCanvasタグではなく背景のdiv要素に描画するようにした。
ステージ開始時にだけ地形の描画が行われるようになるので、負荷がちょっと減る。
背景に画像などを使用する場合は、負荷の減少が大きくなるだろう。

やったことをまとめようと思ったが、CSSで要素を重ねただけなので書くことが無い。
HTMLはこんな感じ。
<div class="divcv">
  <div class="backdiv"></div>
  <div id="mcvback" class="landdiv"></div>
  <div class="wrapcv"><canvas id="mcv" class="cv" width="400" height="400"></canvas></div>
</div>
これを、親要素を position: relative 、背景要素を position: absolute にして、z-indexを指定して重ねるだけ。
CSSは以下のとおり。
<style TYPE="text/css">
/* 親要素div */
.divcv {
  position: relative;
  margin: 10px 35px 0px 20px;
  width: 400px;
}
/* Canvas */
.cv {
  border-style: solid;
  border-width: 1px;
  border-color: #808080;
}
/* Canvasを囲うdiv */
.wrapcv {
  position: relative;
  z-index: 5;
}
/* 地形マップを描画する背景div
 * マップのサイズはステージごとに変わるため、top/leftはJavaScriptで設定
 */
.landdiv {
  position: absolute;
  z-index: 1;
}
/* Canvas領域に色をつけるためだけのdiv */
.backdiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  z-index: 0;
  background-color: #F8F8FF;
}
</style>

JavaScriptで背景を描画したが、地形1マスごとにdiv要素を作ってひたすらappendしただけ。
Canvasのborder-widthの分だけ座標をズラす必要がある。
ソースは以下のとおり。jQueryはver1.4.4を使用。
/* 背景描画
 * return なし
 */
tkgame.drawland = function() {
  var grSep = tkgame.canv.grSep; // マスのサイズ(px)
  // 背景div設定
  var $mcvback = $('#' + tkgame.con.id.mcvback); // 地形マップを描画する背景div
  var bwdth = 1; // Canvasのborder-width
  $mcvback.empty(); // 全ての子要素を削除
  /* tkgame.canv.stgx, tkgame.canv.stgy は、ステージ左上の座標
   * tkgame.canv.axlen, tkgame.canv.aylen は、ステージの横幅何マスか、縦幅何マスか
   */
  $mcvback.css('top', (tkgame.canv.stgy + bwdth) + 'px');
  $mcvback.css('left', (tkgame.canv.stgx + bwdth) + 'px');
  $mcvback.css('width', (tkgame.canv.axlen * grSep) + 'px');
  $mcvback.css('height', (tkgame.canv.aylen * grSep) + 'px');
  // 地形要素設定
  var $landdiv; // 背景の地形要素
  var landname;
  /* tkgame.canv.landAr は、地形情報を格納した二次元配列
   * 詳細は tkland.js を参照
   */
  for (var ix = 0; ix < tkgame.canv.landAr.length; ix++) {
    for (var iy = 0; iy < tkgame.canv.landAr[ix].length; iy++) {
      landname = tkgame.canv.landAr[ix][iy];
      $landdiv = $('<div/>').addClass(tkgame.con.classn.landdiv);
      $landdiv.css('top', (grSep * iy) + 'px');
      $landdiv.css('left', (grSep * ix) + 'px');
      $landdiv.css('width', grSep + 'px');
      $landdiv.css('height', grSep + 'px');
      $landdiv.css('backgroundColor', tkland.type[landname].col);
      $mcvback.append($landdiv);
    }
  }
};
IE + FlashCanvas でもちゃんと表示できることを確認した。

これでひと通りの移行作業が終わった。
さて次は何を作ろうかな。
スポンサーサイト

コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。