「ゲーム作ってみたいけど、どこから始めたらいいのか…」
そんな人向けに、**まずは“超簡単なパックマン風ゲーム”**をブラウザで動かせる形にしてみました。
📱スマホでもブラウザで動作確認可能。
💻もちろんPCでも動きます。
🧠HTML＋CSS＋JavaScriptだけで完結。
🎮敵キャラ、スコア、簡単な操作もOK。
どんな感じのゲーム？
-
画面内をキャラが移動（矢印キーで操作）
-
点を食べてスコア加算
-
敵と接触するとゲームオーバー
-
まだ未完成の部分もあるけど、ベースにはちょうどいい
「こういうの作れるんだ！」って感覚を掴んでくれたら嬉しいです。
コード
👇以下が実際のコードです。メモ帳にコピペして.htmlで保存してブラウザで開けば、すぐに動きます。
自分なりにカスタマイズすることで、どんどん面白くなっていきます。
```html<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>パックマン風ゲーム</title> <style> canvas { background: black; display: block; margin: 0 auto; } </style></head><body> <canvas id="game" width="400" height="400"></canvas> <script> const canvas = document.getElementById("game"); const ctx = canvas.getContext("2d"); let x = 200, y = 200, dx = 2, dy = 0; document.addEventListener("keydown", (e) => { if (e.key === "ArrowUp") { dx = 0; dy = -2; } if (e.key === "ArrowDown") { dx = 0; dy = 2; } if (e.key === "ArrowLeft") { dx = -2; dy = 0; } if (e.key === "ArrowRight") { dx = 2; dy = 0; } }); function draw() { ctx.fillStyle = "black"; ctx.fillRect(0, 0, 400, 400); ctx.beginPath(); ctx.arc(x, y, 10, 0.2 * Math.PI, 1.8 * Math.PI); ctx.lineTo(x, y); ctx.fillStyle = "yellow"; ctx.fill(); x += dx; y += dy; if (x < 0) x = 400; if (x > 400) x = 0; if (y < 0) y = 400; if (y > 400) y = 0; requestAnimationFrame(draw); } draw(); </script></body></html>```こんな人におすすめ
-
とにかく「作って動かす」を体験したい
-
プログラムにちょっと興味あるけど難しそうって感じてる人
-
ChatGPTとかに「こう改造したい」と聞きながら遊びたい人
-
もっと難しいゲームを作りたい試したい方は下記へ
さいごに｜困ったら僕に聞いてください
今後も「手軽に作れるゲーム」とか「ChatGPTで自動化系ツール」などを公開予定です。
よかったらメンバーシップでフォローしてくれるとめっちゃ嬉しいです👇
👉 https://note.com/aoi_sidejob/membership
Views: 0
