やっぱりJavaScript! - やっぱりゲーム！3

ボールが動くようになりましたがボールが一方向に動いて表示画面を越えると消えてしまいます。これを表示画面の中で動かすように表示画面の端まで行ったら跳ね返るようにします。

必要なものはボールを規定し値えるコード。drawBall()

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

ボールの位置をチェックし、表示部分の端まできたらボールの移動方向を変更したいので、ボールの半径を変数にして扱いやすいようにします。

const ballRadius = 10;

変更後が

ctx.arc(x, y, ballRadius, 0, Math.PI * 2);

この設定は壁に当たった時の判定に使います。

端にボールが到達した時にボールの方向を変化させます。

更新するデータを規定しているコード。draw()

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  x += dx;
  y += dy;

"ctx.clearRect"で先に描画していたものを消して新しく描画します。これで連続で繋がことはなく移動しているように見るようになります。座標xとyはdxづつdyづつ移動します。

そして端まできたら方向転換させるのですが

dy = -dy;

でOK。

上端の場合は一番上が"0"なので"0"より小さくなれば方向転換。

if (y + dy < 0) {
  dy = -dy;
}

下端は端が"canvas.height"

if (y + dy > canvas.height) {
  dy = -dy;
}

これを合わせたものが

if (y + dy > canvas.height || y + dy < 0) {
  dy = -dy;
}

となります。

これを参考に左右も

if (x + dx > canvas.width || x + dx < 0) {
  dx = -dx;
}

検知する座標がボールの中心なのでこのままではボールが半分隠れてしまいます。なのでボールの半径を引きます。ここで最初に変数宣言したものを使います。

if (x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
  dx = -dx;
}
if (y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
  dy = -dy;
}

全コードは以下となります。

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

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
    
    x += dx;
    y += dy;
}