ブロック崩し
課題を通じてブロック崩しゲーム(完成例)を作成します。
- スタートボタンをクリックするとゲーム開始
- キーボードの左右キーでパドル(バー)を左右に動かしてボールを受ける
- ボールをブロックに当たるとブロックが消える
- ボールが画面下に落ちると負け
- 全てのブロックを崩すと勝ち
本課題はCanvasAPIを使用します。
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial
課題01
ステージを描く
課題01
ボールが動ける長方形の範囲(ステージと呼ぶことにします)を決めます。ボールはこのステージの中を動きます。ステージの左右と上の辺に当たると反射しますが、下の辺に当たるとゲームオーバーとなります。
まずはCanvasAPIを使って画面に以下の条件の長方形と描いてみましょう。
| 項目 | 値 |
|---|---|
| x座標 | 10px |
| y座標 | 10px |
| 幅 | 画面の幅 - 20px |
| 高さ | 画面の高さ - 20px |
| 塗りつぶす色 | 黒 |
課題02
ボールを描く
課題02
ステージに中にボールを描きましょう。といってもただの円です。CanvasAPIを使って以下の条件の円を描いてください。
| 項目 | 値 |
|---|---|
| 中心のx座標 | 画面の幅 / 2 px |
| 中心のy座標 | 画面の高さ - 35 px |
| 半径 | 10px |
| 塗りつぶす色 | #88CCFF |
課題03
ボールを動かす
課題03
秒速434pxのボールを画面右方向に動かしてください。フレームレートは秒間62です。
setIntervalを使います。- フレームレートとは１秒間に画面を描画する回数です。
- 一回描画する度にボールは何px進むでしょうか？
課題04
衝突判定
課題04
このままだとボールは画面の右に消えていきます。ステージの右辺に着いたら跳ね返るように修正してください。
- １フレーム毎にボールと右辺の位置を確認します。
- 入射角と反射角は同じです。
課題05
４つの辺で跳ね返す
課題05
ステージの４つの全ての辺でボールが跳ね返るように修正しましょう。
下の辺は後ほど跳ね返らずにゲームオーバーに変更します。
課題06
ランダムのボールを射出
課題06
ゲーム開始時のボールの速さは変えずに射出方向を以下で定義する方向にランダムに射出するように変更してください。
x軸の正の方向を0度、y軸の正の方向を90度、x軸の負の方向を180度のように方向を定義します。ボールの射出方向は、30度から60度または120度から150度の方向にランダムに射出します。
三角関数を使います。
課題07
パドルを描く
課題07
長方形のパドルを描いてください。
| 項目 | 値 |
|---|---|
| 幅 | ステージ幅 / 8 |
| 高さ | 10px |
| x座標 | (画面の幅 - パドルの幅) / 2 px |
| y座標 | 画面の高さ - パドルの高さ px |
| 塗りつぶす色 | #88EE88 |
課題08
パドルを動かす
課題08
キーボードの左右のキーでパドルを動かしてください。秒速930pxで動きます。パドルは左右にしか動きません。
keydownとkeyupイベントを使用します。
課題09
パドルの範囲
課題09
パドルがステージの外に出ないようにしてください。パドルはステージの端に着くと、キーを押してもそれ以上動かなくなります。
課題10
パドルで跳ね返す
課題10
ボールがパドルに当たると跳ね返るようにしてください。
課題11
ブロックを描く
課題11
ステージ上方に複数のブロックを描いてください。
１行に８個、それを10行、計8 x 10 = 80個のブロックを並べます。
１つのブロック大きさや色は以下の定義に従ってください。
| 項目 | 値 |
|---|---|
| 幅 | ステージの幅 / 8 px |
| 高さ | ステージの高さ / 20 px |
| 塗りつぶす色 | tomato |
課題12
ブロックで跳ね返る
課題12
ボールがブロックに衝突すると跳ね返るようにしてください。
課題13
ブロックを崩す
課題13
ボールがブロックに衝突したら、そのブロックを消してください。
課題14
ゲームオーバー
課題14
ステージの下辺にボールが衝突するとゲームオーバーに変更してください。ゲームオーバー時の処理は以下です。
- アニメーションを止める
- ステージをオーバーレイで覆う(
rgba(150, 0, 0, 0.5)) - 画面中央に
You Looseと表示する - 文字の色は
white - 文字の大きさは
48px - 書体は
Helvetica
中央に表示するためにtextAlignとtextBaselineを使います。
課題15
もう一度
課題15
ゲームオーバー時にもう一度最初からゲームを開始するボタンを追加してください。ボタンの詳細は以下です。
- 画面の中央から下
100pxの位置にTry Againと書かれたボタンを表示する - 文字の色は
white - 背景色は
royalblue - ボタンの縁と文字の間を
12pxあける - 文字の大きさは
64px - 書体は
Helvetica - クリック時にゲームを最初から開始する
ボタンの大きさはmeasureTextを使って決めることで出来ます。
課題16
スタートボタン
課題16
現状では自動的にゲームが開始してしまいます。Startと書かれたボタンを画面中央に表示し、それをクリックするとゲームが開始するように変更してください。ボタンの詳細は以下です。
- 画面の中央に
Startと書かれたボタンを表示する - 文字の色は
white - 背景色は
royalblue - ボタンの縁と文字の間を
12pxあける - 文字の大きさは
64px - 書体は
Helvetica - クリックするとゲームを開始する