html5 ゲームプログラミングの本体部分

カテゴリ:programming

最低限必要なのは初期化,メインループ,描画関数だ.

初期化

body タグや canvas タグの onload で初期化に使う関数を呼び出す. フラグを使ってメインから呼び出してもいい.html のコードは以下のようになる. script.js にソースを記述する.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>title</title>
    <script type="text/javascript" src="script.js" charset="utf-8"></script>
  </head>
  <body onload="init('canvas')">
    <canvas id="canvas" width="640" height="480" ></canvas>
  </body>
</html>

メインループ

setInterval をつかう. javascript でメインループをつくる を参照.ここまでで javascript のコードは以下のようになる.

var g_Interval;

function init(){
  clearInterval(g_Interval);
  g_Interval = setInterval(tick, 1000/30 /*30fps*/);
}

function tick(){
  // メインループ
}

描画

カンバスを使って矩形を描画する方法は Canvasにスクリプトで図形を描く を参照.

ここまでで javascript のコードは以下のようになる.

var g_Interval;
var g_Canvas;

function init(id){
  clearInterval(g_Interval);
  g_Interval = setInterval(tick, 1000/30 /*30fps*/);

  g_Canvas = document.getElementById(id);
}

function tick(){
  // ゲームのロジックを書く
  draw();
}

function draw(){
  if (g_Canvas === null) {
    return false;
  }

  // canvas をクリア
  g_Canvas.width = g_Canvas.width;
  var context = g_Canvas.getContext("2d");
  context.fillStyle = "red";
  context.strokeStyle = "blue";
  context.fillRect(t_x, t_y, 100, 100);
  context.strokeRect(t_x, t_y, 100, 100);
}

fillRect を使って canvas をクリアする方法もある.

  context.fillStyle = "#FFFFFF";
  context.fillRect(0, 0, 640, 480);