純粋なJavascriptでのブロック崩しの作り方①
やりたいこと
フレームワークやライブラリを使わず、純粋な javascript のみでブロック崩しを作る。
今回は初期設定から、実際に図形を描画するまでやってみたいと思います。
HTML5 の canvas タグと使った画面の描画、移動、衝突検出、制御機構、勝敗状態など、
Web ゲームに必要な機能がどのように出来てるのかが、分かるかと思います。
また、今回作るブロック崩しの内容はMDN(Mozilla Developer Network)を参考に、自分なりに解釈したものです。
環境
- Google Chrome : Version: 130.0.6723.92
- VSCode : Version : 1.90.2 (Universal)
初期設定
まず、お好きな名前のファィルを作成します。私の場合、ブロック崩しゲームとしました。
それをVSCodeで開き、index.html、style.css、script.jsファィルをそれぞれ同じ階層に作成します。
以下のようになったと思います。
簡単な HTML を作成
ゲームの内容は全て HTML の canvas 要素の中に表示される為、HTML の中身はとても簡潔です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ブロック崩しゲーム</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script src="./script.js"></script>
</body>
</html>
html の雛形を作成し、link タグと script タグで同じ階層の css と js を読み込みます。
body の中は id を canvas として、長さと高さは 300px にしています。
img タグと違い、canvas タグには閉じタグが必要なので注意が必要です！
canvas タグの中に書いたテキストは、なんらかの原因で canvas が表示できない場合の代替テキストの役割をします。
今回は必要ないので、省いてます。
CSS でレイアウトを整える
canvas の背景は初期設定では透明なので、色をつけてあげる必要があります。
- {
padding: 0;
margin: 0;
}
body,
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(65, 172, 104);
}
#canvas {
background: #eee;
display: block;
margin: 0 auto;
border: 5px solid #333;
}
Flex コンテナで canvas を上下中央寄せにして、見やすくします。
デザインは自分好みにお好きに変更ください。
下記のように表示されたと思います。
少しゲームぽくなってきましたね！
次に、いよいよ Javascript を書いていきます。
Javascript で図形を表示する
canvas 要素の取得
最初にcanvas 要素の取得と2d 描画を可能にするように記述します。
// canvas を要素取得
const canvas = document.getElementById("canvas");
// 2D で描画できるようにする
const ctx = canvas.getContext("2d");
document.getElementById で canvas を取得、canvas.getContext(“2d”);で 2d での描画を可能にします。
getContext()メソッドは元々、canvas タグが持っているメソッドで、javascript で呼び出してあげると使えるようになります。
なので、javascript と一緒に使うのが前提としたタグというわけですね。
ctx はコンテキスト(環境)の略です。
図形を描画してみる(四角形)
先程記述したコードの下にこのように書いてください。
ctx.beginPath(); // パスの開始
ctx.rect(50, 40, 50, 50); // 四角形のパスを定義
ctx.fillStyle = "#FF0000"; // 塗りつぶす色を指定
ctx.fill(); // 現在のパスを塗りつぶす
ctx.closePath(); // パスの終了
下記のような四角形が表示されたかと思います。
コメントで書いてる通り、ctx.beginPath()と ctx.closePath()メソッドで、パスの開始と終了を定義できます。
四角形の定義は rect()メソッドで左から順に X 座標、Y 座標、横幅、高さを指定できます。
なので、rect( X 座標 , Y 座標 , 横幅 , 高さ );という風に記述します。
canvas の左上が原点なので、下記のようになってます。
次に fillStyle で塗りつぶす色を定義してあげます。
fillStyle の時点ではまだ四角形を定義しただけなので、fill();を使って塗りつぶしてあげる必要があります。
ここで一つ注意点があります。
一般的な数学の座標では X 軸は右にいくほどプラスになり、Y 軸は上にいくほど同じくプラスになると思います。
しかし、この canvas 内の座標では X 軸は変わらずですが、Y 軸は上にいくほどマイナスになります。
この座標の理解は Canvas での描画やアニメーションを行う際に、重要になってくると思いますので、押さえておきましょう！
図形を描画してみる(円形)
次に円を描画してみます。下記のようにコードを加えてください！
ctx.beginPath(); // パスの開始
ctx.arc(240, 160, 20, 0, Math.PI \* 2, false); // 円形のパスを定義
ctx.fillStyle = "green"; // 塗りつぶす色を指定
ctx.fill(); // 現在のパスを塗りつぶす
ctx.closePath(); // パスの狩猟
下記のような円形が表示されたかと思います。
先程と大きく変わったのは ctx.arc(240, 160, 20, 0, Math.PI * 2, false)メソッドの部分でしょう。
円形は見ての通り、arc()メソッドで描くことが可能です。
arc()メソッドは次の6 つの引数を取ることができます。
- 円の中心の X 座標
- 円の中心の Y 座標
- 円の半径
- 開始角度(ラジアン)
- 終了角度(ラジアン)
- 描く方向 ( 時計回りは false。反時計回りは true。 ) この最後の引数は省略可能で、省略すればデフォルトで時計回りになる。
それぞれ解説していきます。
四角形の時は四角形の左上の点を基準に X 座標、Y 座標を指定してあげてましたが、
円の場合は円の中心を基準に X 座標、Y 座標を指定してあげる必要があります。
そこから指定した半径分、幅を取ります。
試しに円の X 座標、Y 座標を 0 にするとどういうことか分かるかと思います。
上記の画像のように、円の中心がちょうど原点に来ていることが分かります。
このことにより、円は中心からの座標を取ってることが分かりますね！
次に円の形を決めます。
開始角度と終了角度はラジアンで記述してあげる必要があります。
あまり聞き馴染みのない単語かもしれませんが、角度の単位の一つです。
普段私たちがよく使う度数法(例：90 度)とは違い、弧度法での角度をラジアンと言います。
- 0 ラジアンは 3 時の方向
- 360 度 = 2π ラジアン
上記を踏まえて、先程のコードを見返してみましょう。
arc(240, 160, 20, 0, Math.PI * 2, false)
0, Math.PI * 2
Math.PI = π のことです。
よって開始地点 0 ラジアン（3 時の方向）から終了地点 2π ラジアン(360 度)に図形を描くと、綺麗な円ができるというわけですね！
最後に false で時計回りを指定してあげます。
これは省略してもらって大丈夫です。
今回は以上です。お疲れ様でした！
次回は実際にボールの動かす処理を書いていきます。
参考
出典: Mozilla Contributors. “純粋な JavaScript を使ったブロック崩しゲーム”. MDN Web Docs.
この内容は、Creative Commons Attribution-ShareAlike (CC-BY-SA) 2.5（またはそれ以上）のライセンスのもとで公開されています。