JavaScriptゲーム作成の初心者入門｜動くサンプルコードで作る手順

こんにちは、Kredo Blog編集部です！JavaScriptのゲーム作成は、初心者でもブラウザとテキストエディタだけで始められ、80行ほどのコードで動くゲームが作れます。この記事では、実際に動くサンプルコードを使って、最初の1本を作る手順を順番に説明します。

この記事でわかること

JavaScriptのゲーム作成は初心者でもできる？

できます。JavaScriptはブラウザの中で動く言語なので、特別なソフトを買ったりインストールしたりしなくても、パソコンに入っているブラウザだけでゲームを動かせます。

ゲームの画面を描くときに使うのが、HTMLの canvas（キャンバス）という要素です。MDN Web Docs（Mozillaが運営する、Web技術の解説ドキュメント）では、Canvas APIは「JavaScriptとHTMLの canvas 要素でグラフィックを描画する手段」と説明され、用途としてアニメーションやゲームのグラフィックが挙げられています（2026年10月時点）。

初心者にJavaScriptのゲームが向いている理由

一方で、最初から大きなゲーム（RPGやオンライン対戦など）を目指すと、完成する前に手が止まりやすくなります。最初の1本は「1画面・ルール1つ・100行以内」に絞るのが、続けるコツです。

JavaScriptで作れるゲームの種類と難易度

JavaScriptで作れるゲームを、初心者が取り組みやすい順に並べました。難易度は「どれだけ多くの仕組みを組み合わせるか」で分けた目安です。

ボタンを押すだけのゲームは、HTMLとJavaScriptの基本だけで作れます。動きのあるゲームになると、canvas と「ゲームループ」という考え方が必要になります。この記事では、動きのあるゲームの中で仕組みが少ないキャッチゲームを作ります。

ゲーム作成の前に準備するもの

準備するものは3つで、どれも無料でそろいます。

HTMLにまだ触れたことがない方は、先にタグの書き方だけ確認しておくと、このあとの手順が楽になります。無料で学べるサイトは HTML勉強サイト8選 にまとめています。

【手順】初心者が最初に作るキャッチゲーム

作るのは、上から落ちてくるボールを、左右キーで動かす受け皿でキャッチするゲームです。ルールは次のとおりです。

ファイルは index.html と game.js の2つだけです。この記事のコードは、Node.jsでの構文チェックと、Chromiumでの動作確認をしています（2026年10月）。

ステップ1：HTMLファイルを作る

作業用フォルダに index.html という名前でファイルを作り、次のコードを貼り付けて保存します。canvas がゲームの画面になります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>キャッチゲーム</title>
</head>
<body>
  <canvas id="game" width="320" height="400" style="border:1px solid #333"></canvas>
  <p>← → キーで移動。ゲームオーバーになったらスペースキーでもう一度。</p>
  <script src="game.js"></script>
</body>
</html>

script タグを body の最後に書いているのは、canvas が読み込まれたあとに JavaScript を動かすためです。

ステップ2：canvasに図形を描く

同じフォルダに game.js を作り、まずは受け皿とボールを描くだけのコードを書きます。保存して index.html をブラウザで開く（ファイルをダブルクリックする）と、青い四角とオレンジ色の丸が表示されます。

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

// 受け皿（プレイヤー）を描く
ctx.fillStyle = "#2a6fdb";
ctx.fillRect(130, 370, 60, 12);

// ボールを描く
ctx.fillStyle = "#e8552d";
ctx.beginPath();
ctx.arc(160, 100, 10, 0, Math.PI * 2);
ctx.fill();

canvas の座標は、左上が (0, 0) で、右に行くほど x が、下に行くほど y が大きくなります。fillRect(130, 370, 60, 12) は「左から130、上から370の位置に、幅60・高さ12の四角を描く」という意味です。

ステップ3：キーボードで受け皿を動かす

次に、game.js の中身をすべて消して、次のコードに置き換えます。← → キーで青い受け皿が左右に動くようになります。

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

const player = { x: 130, y: 370, w: 60, h: 12, speed: 5 };
const keys = {};

// 押されているキーを記録する
document.addEventListener("keydown", function (e) {
  keys[e.key] = true;
});
document.addEventListener("keyup", function (e) {
  keys[e.key] = false;
});

function loop() {
  // 1. 位置を更新する
  if (keys["ArrowLeft"]) { player.x -= player.speed; }
  if (keys["ArrowRight"]) { player.x += player.speed; }
  // 画面の外に出ないようにする
  player.x = Math.max(0, Math.min(canvas.width - player.w, player.x));

  // 2. 画面を消して描き直す
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#2a6fdb";
  ctx.fillRect(player.x, player.y, player.w, player.h);

  // 3. 次のコマを予約する
  requestAnimationFrame(loop);
}
loop();

ここで初めて「位置を更新する → 画面を消して描き直す → 次のコマを予約する」という流れが出てきました。これがゲームループです。

ステップ4：ボール・当たり判定・スコアを足して完成

最後に、game.js を次の完成版に置き換えます。約80行です。保存してブラウザを再読み込みすると、ゲームが始まります。

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

const player = { x: 130, y: 370, w: 60, h: 12, speed: 5 };
const ball = { x: 160, y: 0, r: 10, speed: 2 };
const keys = {};
let score = 0;
let miss = 0;
let gameOver = false;

document.addEventListener("keydown", function (e) {
  keys[e.key] = true;
  // ゲームオーバー中にスペースキーで最初から
  if (e.key === " " && gameOver) {
    score = 0;
    miss = 0;
    ball.speed = 2;
    gameOver = false;
    resetBall();
  }
});
document.addEventListener("keyup", function (e) {
  keys[e.key] = false;
});

// ボールを上に戻し、横の位置をランダムに決める
function resetBall() {
  ball.x = 20 + Math.random() * (canvas.width - 40);
  ball.y = 0;
}

function update() {
  if (keys["ArrowLeft"]) { player.x -= player.speed; }
  if (keys["ArrowRight"]) { player.x += player.speed; }
  player.x = Math.max(0, Math.min(canvas.width - player.w, player.x));

  ball.y += ball.speed;

  // 当たり判定：ボールが受け皿の高さまで来て、横の位置が重なっているか
  const hitY = ball.y + ball.r >= player.y && ball.y - ball.r <= player.y + player.h;
  const hitX = ball.x >= player.x && ball.x <= player.x + player.w;
  if (hitY && hitX) {
    score += 1;
    ball.speed += 0.2; // 取るたびに少し速くする
    resetBall();
  } else if (ball.y - ball.r > canvas.height) {
    miss += 1;
    if (miss >= 3) { gameOver = true; }
    resetBall();
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = "#2a6fdb";
  ctx.fillRect(player.x, player.y, player.w, player.h);

  ctx.fillStyle = "#e8552d";
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = "#333";
  ctx.font = "16px sans-serif";
  ctx.fillText("スコア: " + score + "　ミス: " + miss + " / 3", 10, 24);

  if (gameOver) {
    ctx.font = "24px sans-serif";
    ctx.fillText("ゲームオーバー", 76, 200);
  }
}

function loop() {
  if (!gameOver) { update(); }
  draw();
  requestAnimationFrame(loop);
}

resetBall();
loop();

うまく動いたら、数字を1つだけ変えて遊んでみてください。たとえば player の speed を 5 から 8 にすると受け皿が速くなり、ball の r を 10 から 20 にするとボールが大きくなります。数字を変えて、結果を見て、理由を考えるのが上達の近道です。

ゲームを動かす3つの仕組み

完成したコードは、次の3つの仕組みでできています。ほかの2Dゲームも、基本はこの組み合わせです。

ゲームループ：更新して、描き直す

ゲームの動きは、パラパラ漫画と同じ考え方です。少しずつ位置を変えた絵を、すばやく描き直し続けます。requestAnimationFrame は、ブラウザが次に画面を描き直す前に、指定した関数を呼び出す命令です。MDN Web Docsによると、呼び出される回数はふつうディスプレイのリフレッシュレートに合わせられ、60Hz（1秒に60回）が一般的とされています（2026年10月時点）。

1回だけ呼び出される命令なので、loop 関数の最後でもう一度 requestAnimationFrame(loop) を呼び、くり返しを続けています。

キー入力：押している間だけ動かす

keydown（キーを押した）で keys に true を、keyup（キーを離した）で false を入れています。こうしておくと、「押している間ずっと動く」というなめらかな操作になります。

当たり判定：数字の比較で「重なり」を調べる

当たり判定は、むずかしい計算ではありません。「ボールの下の端が、受け皿の高さまで来ているか（hitY）」と「ボールの横の位置が、受け皿の左端と右端の間にあるか（hitX）」の2つを比べ、両方が成り立てばキャッチです。

つまずきやすいポイントと直し方

動かないときは、ブラウザの開発者ツールにある「コンソール」を開きます。Chromeの公式ドキュメントとMDN Web Docsによると、Windowsは F12 キー（または Ctrl＋Shift＋I）、Macは Command＋Option＋I で開発者ツールが開きます（2026年10月時点）。Safariは、先に設定で「開発」メニューを表示しておく必要があります。開いたら「Console（コンソール）」タブを選ぶと、赤い文字でエラーの内容と行番号が表示されます。

エラーが出たら、エラーメッセージをそのままコピーして検索すると、同じ内容でつまずいた人の解決例が見つかりやすくなります。

ゲームを改造して、次の1本に進む

完成したゲームは、少しずつ改造していくと練習になります。やさしい順に並べました。

次に作るならブロック崩し

2本目には、ブロック崩しが向いています。MDN Web Docsには「純粋な JavaScript を使った二次元ブロック崩しゲーム」という無料のチュートリアルがあり、キャンバスへの描画から、ボールの反射、パドルの操作、衝突検出、スコアまでを10のステップで学べます（2026年10月時点）。この記事のキャッチゲームと同じ canvas を使うので、続けて取り組みやすい内容です。

ライブラリを使うのは、基本がわかってから

画像のキャラクターをたくさん動かしたり、音を鳴らしたりするようになったら、ゲーム用のライブラリを使う方法もあります。たとえば Phaser は、公式の説明で「無料・オープンソースのHTML5ゲームフレームワーク」とされ、パソコンとスマホのブラウザ向けの2Dゲームを作れます（2026年10月時点）。ただし、ライブラリの説明は canvas やゲームループを知っている前提で書かれていることが多いので、先に素のJavaScriptで1〜2本作っておくと理解しやすくなります。

ゲーム以外の動きも試したい方は JavaScriptサンプルコード集24選 を、基礎を順番に学び直したい方は JavaScript学習サイトおすすめ15選 を参考にしてください。

コードに出てくる英語を知っておくと楽になる

JavaScriptの命令は英単語でできています。意味がわかると、コードが「記号の並び」ではなく「文章」として読めるようになり、覚える負担が減ります。今回のコードに出てきた単語を表にしました。

エラーメッセージも英語です。「is not defined（定義されていません）」「Unexpected token（予期しない記号）」のように、短い英文が読めるだけで原因に早くたどり着けます。プログラミングと英語の関係は プログラミングは英語ができないと無理？必要な英語力と勉強法 で整理しています。

なお、Kredoはフィリピン・セブ島（ITパーク）で、英語マンツーマン4時間とITグループ4時間の1日8時間、ITレッスンをすべて英語で学ぶ留学を2016年から開講しています。受講生の92%は英語もITも未経験です。英語とITを同時に学ぶ方法に関心がある方は、IT留学とは？費用・国別比較・1日の流れと選び方【2026年】 も読んでみてください。

よくある質問

Q. プログラミングがまったく初めてでも作れますか？

A. この記事のコードを写して動かすところまでは、初めての方でも進められます。ただ、自分で改造するには変数・条件分岐（if）・関数の基本が必要です。動かしたあとに、学習サイトで基礎を一通り学ぶと、コードの意味がつながります。

Q. JavaScriptのゲームはスマホでも遊べますか？

A. ブラウザで動くので、Web上に公開すればスマホのブラウザでも開けます。ただし、この記事のサンプルはキーボードで操作する作りなので、スマホで遊ぶにはタッチ操作（touchstart や pointermove などのイベント）を足す必要があります。

Q. ゲームエンジンやライブラリは最初から使ったほうがいいですか？

A. 最初の1〜2本は、ライブラリなしで作るのがおすすめです。ゲームループや当たり判定を自分で書いた経験があると、あとでライブラリを使うときに「何を代わりにやってくれているのか」がわかります。

Q. 完成までどれくらい時間がかかりますか？

A. この記事のキャッチゲームは、コードを写すだけなら1時間前後で動かせる分量です。1行ずつ意味を調べながら進める場合は、数日に分けて取り組むと無理がありません。かかる時間は、これまでの学習経験によって変わります。

Q. 作ったゲームを人に見せるにはどうすればいいですか？

A. HTMLとJavaScriptのファイルをWeb上に置くと、URLを伝えるだけで遊んでもらえます。静的なファイルを公開できるサービス（GitHub Pages など）を使う方法が一般的です。利用条件は、各サービスの公式ページで確認してください。

まとめ

JavaScriptのゲーム作成は、ブラウザとテキストエディタがあれば初心者でも始められます。最後に要点を整理します。

まずはこの記事のサンプルを動かして、数字を1つ変えるところから試してみてください。自分の書いたコードで画面が動く体験が、次の学習の原動力になります。

英語でIT・AIを学べるKredo

英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？

当メディアを運営しているKredoは、英語×ITをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で英語とIT・AIを学ぶ「KredoIT留学」「KredoAI留学」を提供しています。これまでの卒業生は3,000名以上。卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×IT・AIのスキルを身につけてグローバルに活躍しませんか？

＼ セブ島でIT×英語を学ぶ ／IT留学の無料カウンセリングを予約する