html

canvasで少しずつ作るブロック崩し(5/5)

前回でひとまずブロック崩しと呼べるレベルになりました(たぶん)。今回はバーを台形の形にして角に当たると横方向に跳ね返る機能を追加します。また、ソースコードの整理、当たり判定の改善などを加えてまとめます。

canvasで作るブロック崩し

左クリック: バーを下げる
右クリック: ボール出現

当たり判定の見直し

ボールとブロックの当たり判定を整理します。

実装イメージは下記のようになります。

f:id:segmentation-fault:20170918182928p:plain

これをソースコードで下記のように表現しました。

バーを台形に変更

普通の長方形だと面白みがないので台形に変えていきます。一度長方形を描いてその上から背景と同じ色の直角二等辺三角系を両端に上塗りすることで描きます。

合わせてボールとバーの当たり判定に左右の両端とぶつかった場合の条件を加えます。

また、バーの両端に当たった場合はボールをななめ45°上方に跳ね返すようにします。

ソースコード

まとめ

この程度の機能ですが、スキル不足もあり実装にだいぶ時間がかかってしまい…(^-^;)
けれど実際に作ってみることで得る物はたくさんありました。

また、いずれJavascript/HTML/CSSの理解が深まった時に見返してみて改善を加えたいと思います。
今度作るときは残機やスコア表示、複数ステージ、ランキング機能、サウンドエフェクトなんかをつけてみたいですね。

関連ページ

canvasで少しずつ作るブロック崩し(1/5) - Segmentation Fault
canvasで少しずつ作るブロック崩し(2/5) - Segmentation Fault
canvasで少しずつ作るブロック崩し(3/5) - Segmentation Fault
canvasで少しずつ作るブロック崩し(その4) - Segmentation Fault