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

ボールを動かす

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;
}

このコードをもう少しわかりやすくします。この関数でボウルの描画部分を分離します。

drawBallという関数を作ります。

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

function draw(){}を修正していきます。

function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);

   drawBall();

   x += dx;
   y += dy;
}

ポイントはdrawBall();にボールの構造をまとめているところです。ボールに関してはdrawBall()を変更することでボールの形状など変えることができます。

次ですが、

ボールを壁で弾ませる

"壁にぶつかる"とボールが跳ね返る。

というのを考えます。壁にぶつかって跳ね返るということは、

壁までの距離が"0"になったら方向転換する

ということで表現します。そこで壁までの距離を正確に計算させるために、ボールの半径も変数にしてコードにしていきます。

var ballRadius = 10;

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

上端と下端で弾ませたいので、まず端っこの座標がどうなっているかですが、上下については"y"座標を変化させれば良いので、canvasの上端は"0"
下端は、高さをcanvas.heightとして取得できます。

ボールの挙動はy軸に関しては、変化量はdyとしているので、座標の変化は

y + dy　

となり、上方向に行ってぶつかるのはy座標が"0"になるとこなので、跳ね返しをコードにすると、

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

y座標が"0"よりも小さくなったら変化量の"dy"の符号を反転させます。これで進む方向が逆転します。

下端についても同じで

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

上方向はy座標が"0"でしたが下端は座標が

canvas.height

で取得できますので変えています。これを合わせて、

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

となります。

2つの文のどちらかがtrueだったら、ボールの動きを反転させます。

上下ができたので次は左右です。上下では"0"と"canvas.height"でボールが跳ね返る境目だったんですが、次は"0"と"canvas.width"で左右の境目を取得して符号を逆転させます。これで壁に当たって跳ね返ったように見えるようになります。

再度確認ですがここでは座標がx,y座標が"0"となるのは左上です。なので高さが底辺に、幅が右端の座標となります。

最後にボールにも幅があるのでその分を引いてやればボールの端が壁、端っこになった時に跳ね返っていくようになります。

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

ここまでのスクリプト全コードです。

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var ballRadius = 10;
var dx = 2;
var dy = -2;
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;
}

setInterval(draw, 10);
   
</script>