メモ帳でゲームを作ってみよう！『シューティング』

メモ帳から始めるプログラミング

プログラムのハードルをぐっと下げたプログラミング講座です。このページには、実際に使えるゲームと、そのコードをダウンロードできます。下記に改造のための簡単なコードの説明がありますので、自分の好みに改造してみてください。自分で作ったゲームはシンプルでも楽しいですよ。

▼シューティングゲームの遊び方

　▲画像をクリックするとゲームを開始します。

パソコンで遊ぶときは
●撃つ（スペースキー）
●移動（← →）
●一時停止「P」
スマホでは付属のボタンを使ってください。

▼コードのダウンロード

▲画像をクリック

圧縮ファイルを解凍
「game_shooting.zip」が保存されますので、ファイルを解凍（展開）し、「shooting.html」をダブルクリックするとゲームが開始されます。終了する場合はブラウザを閉じてください。
改造する場合は
右クリックで「プログラムで開く」を選択し、メモ帳を探して選択してください。コードについては下記の解説をご参照ください。

🎮 メモ帳で作れるシューティングゲーム 解説

このゲームは「メモ帳」と「インターネットのブラウザ」だけで遊べます。
下記解説を理解し改造すれば、オリジナルのゲームが作れます。

① 基本の形（HTML）

<!DOCTYPE html>
<html lang="ja">
<head> … </head>
<body> … </body>
</html>

これはゲームの「箱」。
<head> の中は「準備」や「デザイン」、
<body> の中に「ゲーム画面」や「ボタン」が置かれます。

② ゲーム画面（キャンバス）

<canvas id="gameCanvas"></canvas>

キャンバスは「絵を描く場所」。
ここに 自分（プレイヤー）・敵・弾・スコア が描かれます。

③ スマホ用ボタン

<div id="controls">
  <button id="left">←</button>
  <button id="shoot">⚡</button>
  <button id="right">→</button>
  <button id="pause">||</button>
</div>

スマホでも遊べるように 左・右・攻撃・一時停止 のボタンをつけています。
パソコンの場合は キーボード操作でもOK。

④ プレイヤー（自分のキャラ）

let player = { 
  x: canvas.width/2 - 20, 
  y: canvas.height - 60, 
  width: 40, height: 40, 
  speed: 10 
};

画面の下にいる 緑の四角 がプレイヤーです。

  • x, y は位置
  • width, height は大きさ
  • speed は動く速さ

⑤ 弾と敵

let bullets = []; // 弾の入れ物
let enemies = []; // 敵の入れ物

弾や敵はたくさん出てくるので「配列」という入れ物に入れて管理します。

⑥ 敵を出す

function spawnEnemy() {
  const x = Math.random() * (canvas.width - 40);
  enemies.push({ x: x, y: 0, width: 40, height: 40, speed: 1 });
}

敵は ランダムな場所 に出現します。
setInterval(..., 2000) で 2秒ごと に出ます。

⑦ 操作方法

  • パソコン
    • ← → キーで移動
    • スペースキーで弾を撃つ
    • Pキーでポーズ
  • スマホ
    • 画面下のボタンで操作

⑧ ゲームの流れ

ゲームは「ループ」で動きます。

function loop() {
  update(); // 位置を変える
  draw();   // 画面に描く
  requestAnimationFrame(loop); // 繰り返す
}
  • update() → キャラや弾や敵の位置を動かす
  • draw() → 画面に描き直す
  • loop() → ずっと繰り返す（アニメーション！）

⑨ 当たり判定（ぶつかったら消える）

if(b.x < e.x+e.width && b.x+b.width > e.x && 
   b.y < e.y+e.height && b.y+b.height > e.y){
  enemies.splice(i,1);
  bullets.splice(j,1);
  score += 10;
}

弾と敵がぶつかったら、両方消えて スコアが+10 されます。

⑩ クリアとポーズ

  • スコアが 100点 で「クリア！」
  • 「Pキー」や「||ボタン」で 一時停止

🌟 まとめ

このプログラムは、

  1. プレイヤーを描く
  2. 弾を出す
  3. 敵を出す
  4. 当たり判定する
  5. 繰り返して動かす
    という流れでできています。

とてもシンプルですが、これをベースに 敵を増やす・背景をつける・音を鳴らす など、自由に改造できます。

👉 コード全部を覚えるよりも、
「どこを変えたら自分好みのゲームになるか」を体験できると夢中になりますよ！
例：

  • player.speed = 10; → 速さを変える
  • score >= 100 → クリア条件を変える
  • ctx.fillStyle = 'red'; → 色を変える

面白いゲームにしてくださいね！