Canvasでパックマン風ゲームを作りました

昔懐かしのパックマンを、JavaScriptのCanvasで再現してみました。

方向キーでパックマンを操作し、ドットを食べながらゴーストを避ける----あのシンプルだけど奥深いゲーム性を、フルスクラッチで実装しています。

ゲームの特徴

項目	内容
マップ	21×15グリッド、壁・通路・ゴーストの巣を配置
パックマン	口の開閉アニメーション、滑らかな移動
ゴースト	赤・ピンク・水色・オレンジの4体がランダム移動
操作	キーボードの矢印キー + スマホ用の方向ボタン
スコア	ドットを食べると加算、全ドット食べたらクリア
物理判定	壁衝突判定、ドット取得判定、ゴースト接触判定

実装のポイント

1. Canvas描画

すべての描画は Canvas API で行っています。パックマンの口の開閉は arc() の角度をアニメーションで変化させて表現。

2. マップ構造

マップは2次元配列で定義。0＝通路、1＝壁、2＝ドット。初期位置もマップデータに含めています。

const map = [
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,1],
    [1,2,1,1,2,1,1,1,1,2,1,2,1,1,1,1,2,1,1,2,1],
    // ...
];

3. 当たり判定

壁との衝突はグリッド座標ベースで判定。パックマンとゴーストの接触は距離計算でチェック。

4. モバイル対応

画面上の方向ボタン（↑↓←→）でスマホやタブレットでも操作可能です。

5. リスタート機能

ゲームオーバーまたはクリア後、「リスタート」ボタンで最初からやり直せます。

技術スタック

HTML / JavaScript (Canvas) -- フルスクラッチ、ライブラリ不使用
Tailwind CSS -- ボタンのスタイリングのみ
ファイル構成 -- index.html + main.css + main.js（約520行）

外部ライブラリに依存していないので、ブラウザさえあればすぐに遊べます。

さいごに

Canvasゲーム制作の練習として作りました。シンプルですが、パックマンならではの「追いかける／逃げる」駆け引きがちゃんと再現できています。

ぜひプレイしてみてください。タイムアタックで全ドット回収に挑戦するのも楽しいですよ。