MDNのチュートリアルで「ブロックくずし」を作ってみた。part2(万物創造編)

MDNのチュートリアルで「ブロックくずし」を作ってみた。part2(万物創造編)

<前回までのあらすじ>MDNからの恩恵にあずかって、ブロックくずしを作ることにした

part1はこちら▼

MDNのチュートリアルはこちら▼

https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript

(そのままのJavaScriptを使ったブロックくずしゲーム | MDN web docs)

step1〜3に取り組んで「創造主」の気分を味わう!

今回の記事は、チュートリアルの1〜3について振り返ります。

画面上に丸や四角を描画して、動かす作業です。

<step1>Canvasを作ってその上に描画する

完成したもの▼

学んだこと▼
Canvasの「rectメソッド」で四角形を描画
 
・第1,2引数で、四角形の始点(左上)の座標を指定
・第3,4引数で、幅と高さを指定
// 四角形を描画
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#58daae";
ctx.fill();
ctx.closePath();
◆ Canvasの「arcメソッド」で円を描画
・第1,2引数で、円の中心の座標を指定
・第3引数で、半径を指定
// 円を描画
ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI * 2, false);
ctx.fillStyle = "#58daae";
ctx.fill();
ctx.closePath();
・第4,5,6引数は……

・開始角度と終了角度 (円を描く始める時点の角度と描き終えたあとの角度をラジアンで)
・描く方向 (時計回りはfalseで、デフォルト。半時計回りはtrue。) この最後のパラメーターは省略可能です。

……ふーん(?)なるほど

…こういうわかんないことに出会ったとき、「完璧に理解しよう」って調べ始めると、先に進めなくなりますよね。。

なので実際に作業するときは「はいはい角度ね(?)」とコピペするくらいで良いかと。ひとまず完成まで体験すること重視で。

といいつつ、いまは振り返りの時間なので、ざっくり調べます。

・第4引数(開始角度)の「0」は、時計でいう「3時」
・第5引数(終了角度)の「Math.PI」は、「円周率」

MDNの「Math.PI」解説ページ▼
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/PI

<step2>ボールを動かす

完成したもの▼

学んだこと▼
ボールの動かし方
パラパラ漫画と同じ!!

ボールを描画

ボールを消す

ほんの少し違う位置に描画し直す

…という処理(drawメソッド)を何度も繰り返す。

// 描画処理
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // ボール
  drawBall();
  // 毎フレーム描画後に値を加え、円の中心をずらしていく
  x += dx;
  y += dy;
}

// 描画処理をループ(10ミリ秒ごとに実行される)
setInterval(draw, 10);
◆ 「clearRectメソッド」でCanvasの内容を消去する
・第1,2引数で、始点の座標を指定
・第3,4引数で、キャンバスサイズを指定(=終点が定まる)
→四角形の領域内にある内容が消去される

 

◆ 「setIntervalメソッド」で描画処理をなんども繰り返す
・10ミリ秒=0.01秒

動いた途端にワクワクしませんか?
生命誕生っぽくて

ちなみにこのボール、一度旅に出ると戻ってきません…
キャンバスを飛び出して、無限の彼方へ……
(※ブラウザでページを再読み込みで動き出します)

<step3>ボールを壁で弾ませる

完成したもの▼

※ボールのサイズ変えてます

学んだこと▼
◆ シンプルな衝突判定
・キャンバスを「上端/下端」と「左端/右端」の壁と考える
・ボールが壁に触っている(衝突している) か、座標から確かめる
・触っている場合、動く方向を変更(反転)する

衝突判定 とは?
→ ある物体が 他の物体に当たったかどうか判定をすること

step2で世界の「無限」を感じていたところ、step3では急に「有限」になりました。
これはこれでずっと見てられるやつですね。

「壁にめり込む覚悟」のない方は
ボールの半径を考慮しましょう

ちなみに、このコーディングをしているときに気づいたのですが
プロフィールページになんとなく書いた
(そのうちアヒルとか飼いたい)
という願望。…この技術でもしや実現できちゃうのでは…?

というわけで今回の記事はここまで。
次回は「勝敗デザイン編」です。

[Eye catch image] Photo by Sarah Pflug from Burst

IT / プログラミングカテゴリの最新記事