こんにちは！
今回は、レトロゲームの王道である「ブロック崩し」を、現代的な マテリアルデザイン のエッセンスを取り入れてオシャレに実装した過程を解説します。
1. コンセプト：レトロゲーム × モダンUI
ブロック崩しは非常にシンプルなゲームですが、そのまま作ると少し「古臭い」印象になりがちです。そこで今回は、Googleが提唱する マテリアルデザイン のルールを適用し、以下のようなコンセプトで開発しました。
- 配色: 鮮やかなパープル（Primary）とティール（Secondary）のコントラスト。
- 奥行き: 適切なシャドウ（影）を使い、カードが浮き上がっているような階層構造。
- 触感: 角丸（16px）を多用し、親しみやすくクリーンな印象に。
2. 技術スタック
- HTML5 Canvas API: ゲームの描画エンジン。
- CSS Variable: マテリアルデザインのカラーパレット管理。
- Google Fonts (Roboto): マテリアルデザイン標準のタイポグラフィ。
- Vanilla JavaScript: 外部ライブラリを使わず、ピュアなロジックで実装。
3. 実装のポイント
① 物理挙動の工夫：パドルの反射角
通常の反射では「入反射角が等しい」だけですが、これだと単調になります。今回は 「パドルのどこにボールが当たったか」 で反射後の速度ベクトルを変えるロジックを導入しました。
// パドルの中心からの距離に応じて反射角（dx）を計算
let collidePoint = x - (paddleX + paddleWidth / 2);
collidePoint = collidePoint / (paddleWidth / 2);
let angle = collidePoint * (Math.PI / 3); // 最大60度の角度をつける
dx = 5 * Math.sin(angle);
dy = -5 * Math.cos(angle);
これにより、プレイヤーは狙った方向にボールを飛ばす「操作感」を味わえるようになります。
② マテリアルな視覚効果
Canvas内の描画でも、マテリアルデザインの質感を損なわないよう ctx.roundRect() を使用して、パドルやブロックに角丸を適用しました。また、ブロックの行（Row）ごとに色を変えることで、視覚的なリズムを作っています。
③ レスポンシブと操作性
PCでのキーボード操作（Arrowキー）に加え、マウス移動によるパドル操作も実装しました。Canvasの getBoundingClientRect() を利用して、マウス位置とパドルの座標を正確に同期させています。
4. 完成したものがこちら
完成したコードは、HTML1ファイルで完結するように設計しました。CSSで cursor: none; を設定し、プレイ中にマウスカーソルが邪魔にならないようにするなどの細かい UX 向上も図っています。
5. まとめと今後の課題
シンプルなゲームでも、UIにこだわるだけで一気に「プロダクト」としての完成度が上がります。今後は以下の機能を追加して、さらにブラッシュアップしていきたいと考えています。
- パーティクル演出: ブロックが壊れたときのエフェクト。
- パワーアップアイテム: パドルが伸びたり、ボールが分裂する機能。
- Firestore連携: 世界中のプレイヤーと競えるハイスコアランキング。
皆さんもぜひ、自分好みのデザインで「自分だけのブロック崩し」を作ってみてください！
制作時間: 約30分
使用技術: HTML, CSS, JavaScript
