ゲームを作ろ！-MDN web docs(ブロック崩し)-2

作ったボールを動かします。その仕組みとは！基本は以下です。

function draw() {
   // 描画コード
}
setInterval(draw, 10);

関数を作っておいて、setInterval(関数draw,10ミリ秒)という設定で10ミリ秒ごとに関数draw()を実行するということです。動かす仕組みです。1回実行するたびにx,y座標を変化させることでボウルが動いたように見せます。

前回　

var x = canvas.width/2;
var y = canvas.height-30;

として定義しています。このx,y座標を変えていきます。変える割合を決めておきます。

var dx = 2;
var dy = -2;

xは2ずつ移動させます。画面では右にずれていきます。yについては-2ずつ動かしますので上方向に動きます。

※canvasの座標については

となっています。

canvas に図形を描く

さて、動かす命令を関数draw()に入れ込んでみましょう。

function draw() {
   ctx.beginPath();
   ctx.arc(x, y, 10, 0, Math.PI*2);
   ctx.fillStyle = "#0095DD";
   ctx.fill();
   ctx.closePath();

   x += dx;
   y += dy;
}

x += dx;
y += dy;

として関数の実行で前に定義した

var dx = 2;
var dy = -2;

だけ動きます。実行すると

となってしまします。更新のたびに描画しているのでつながってしまっています。これを更新のたびに前の描画したものも消していくとうまくボールが動いているように見えるはずです。

ctx.clearRect(0, 0, canvas.width, canvas.height);

を使えば、

Canvasの内容を消去するメソッド、clearRect()があります。このメソッドは4つのパラメータをとります。四角形の左上端のx、y座標と四角形の右下端のx、y座標です。この四角形で囲われた領域にある内容全てが消去されます。

ということです。入れ込んだコードです。

function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.beginPath();
   ctx.arc(x, y, 10, 0, Math.PI*2);
   ctx.fillStyle = "#0095DD";
   ctx.fill();
   ctx.closePath();
   x += dx;
   y += dy;
}

実行します。

setInterval(draw, 10);

となります。とりあえず動くようになりました。