JavaScriptで作る2Dアクションゲーム入門｜ジャンプ・移動・当たり判定の基本

「ゲームを自分で動かしてみたい。けれど、開発環境の準備から難しそう…」と感じる人は多いです。

そこでこの記事では、特別なゲームエンジンを使わず、HTML・CSS・JavaScriptの3ファイルだけで作れるシンプルな2Dアクションゲームを題材に、基本の流れを整理していきます。

ブラウザさえあれば試せる内容なので、プログラミングの練習用としてもおすすめです。

✨ この記事でわかること

HTML5キャンバスとJavaScriptでゲームを動かす基本構造
プレイヤーの移動・ジャンプ・重力・地面との当たり判定の考え方
requestAnimationFrame を使ったゲームループの組み立て方
サンプルコードをベースに機能を拡張するためのヒント

ゲーム開発講師

今回は「走ってジャンプするだけ」のミニゲームを題材に、2Dアクションの土台になる考え方を一通り確認していきましょう。

＼あなたにピッタリのアクションゲーム制作講座を見つけよう！／

おすすめ第1位

Unity 2Dアクションゲーム
の作り方講座（ロックマン風）

★★★★★ (スマホ化・広告実装)

ロックマン風の横スクロールACTをスマホ化・広告実装まで対応。ゲームのリリースまでを見据えた実践的なカリキュラムで、作って終わりにならない一本です。

講座を購読する＼リリースまで一気に学ぼう／

3D入門に最適

ゼルダ風3Dアクションゲーム
の作り方講座

★★★★★ (スマホ化対応)

ゼルダ風の3Dアクションをスマホ対応で作れる入門講座。全16回で初心者でも3Dゲーム開発の基礎からしっかり習得できます。

講座を購読する＼初心者でも3Dアクションが作れる！／

3プラットフォーム対応

Unity FPSゲームの
作り方講座

★★★★★ (スマホ・VR対応)

FPS・VR・スマホの3プラットフォームに同時対応。1本作るだけで3つのゲームが完成する圧倒的なコスパが魅力の講座です。

講座を購読する＼FPS・VR・スマホを同時に制覇！／

ゲームを「遊ぶ側」から「作る側」へ

あなたのオリジナルゲーム、今年こそ完成させませんか？

RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。

Unity入門の森｜永久会員チケット

全講座ラインナップを見てみる

実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。

準備するものは3ファイルだけ｜最小構成を確認しよう
index.htmlを作る｜キャンバスとスクリプトの入り口
1. サンプル：index.html
style.cssを整える｜キャンバスを画面中央に表示する
1. サンプル：style.css
game.jsの全体像を作る｜ループとプレイヤー制御
1. サンプル：game.js 全体コード
各パートの役割を分解して理解する
ここまでの動作チェックリスト
機能を広げるための発展アイデア
アクションゲームを作りたいなら！Unity入門の森のアクション制作講座で本格ゲーム開発に挑戦しよう
まとめ

準備するものは3ファイルだけ｜最小構成を確認しよう

まずは、どんなファイル構成でゲームを動かすのか整理しておきます。

今回のサンプルでは、次の3ファイルだけを同じフォルダに配置すればOKです。

ファイル名	役割	内容のイメージ
index.html	画面の土台	キャンバス要素を用意し、あとで書く JavaScript を読み込みます。
style.css	見た目・レイアウト	キャンバスを中央に配置し、背景色や枠線などを整えます。
game.js	ゲームの本体	プレイヤーの位置、重力、ジャンプ、キー入力、ゲームループなどを記述します。

フォルダ構成は次のようなイメージです。


project-folder/
├─ index.html
├─ style.css
└─ game.js

project-folder/

├─ index.html

├─ style.css

└─ game.js

すべて同じ階層に置くこと
ファイル名の綴りミスがあると読み込めないので要チェック
最初はこの構成のまま触り、慣れてきたらサブフォルダで整理してもOK

index.htmlを作る｜キャンバスとスクリプトの入り口

続いて、ゲーム画面となるキャンバスと JavaScript ファイルの読み込み部分を用意します。

ここでは 800×600 ピクセルのキャンバスを1つだけ配置したシンプルなHTMLを使います。

サンプル：index.html

<pre><code class="language-html">
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Jump & Run Demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="game.js"></script>
</body>
</html>
</code></pre>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

</code></pre>

<canvas id="gameCanvas"> … ゲームを描くための領域
width・height … キャンバスの解像度（今回は 800×600）
<script src="game.js"> … ゲームの処理を書いた JavaScript を読み込む

この段階ではまだ真っ白なキャンバスしか表示されませんが、ゲームの「入り口」は整いました。

【ゲームの作り方講座プレゼント中！】

style.cssを整える｜キャンバスを画面中央に表示する

次に、キャンバスを画面中央に配置し、ゲーム画面らしい見た目に整えていきます。

最低限のレイアウトだけでも、デバッグ時の見やすさがだいぶ違ってきます。

サンプル：style.css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#gameCanvas {
    border: 2px solid #333;
    background-color: #aaddff; /* 空っぽのステージをイメージした背景色 */
}

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f0f0f0;

}

#gameCanvas {

border: 2px solid #333;

background-color: #aaddff; /* 空っぽのステージをイメージした背景色 */

}

display: flex; と justify-content / align-items でキャンバスを中央寄せ
height: 100vh; により、ブラウザの高さ全体をレイアウト対象にしている
#gameCanvas で枠線と背景色を指定し、ゲーム画面らしさを出している

ここまで設定すれば、ブラウザで index.html を開いたときに、水色のキャンバスが中央に表示されるはずです。

game.jsの全体像を作る｜ループとプレイヤー制御

最後に、ゲーム本体となる game.js を書いていきます。

ここでは、次の要素を1つのファイルにまとめます。

キャンバスと描画コンテキストの初期化
プレイヤーと地面のデータ
キー入力の管理
描画処理（draw）
更新処理（update）
ゲームループ（loop）

まずは全体のコードを通して眺め、そのあとで各パートを分解して見ていきましょう。

サンプル：game.js 全体コード

// キャンバスの準備
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// ゲーム用の定数
const GRAVITY = 0.5;
const JUMP_POWER = -12;
const SPEED = 5;

// プレイヤーの状態
let player = {
    x: 50,
    y: canvas.height - 50 - 50,
    width: 30,
    height: 50,
    color: 'red',
    velY: 0,
    isJumping: false
};

// 地面の情報
const ground = {
    y: canvas.height - 50,
    height: 50,
    color: 'green'
};

// キー入力管理用
const keys = {};

document.addEventListener('keydown', (e) => {
    keys[e.code] = true;
});

document.addEventListener('keyup', (e) => {
    keys[e.code] = false;
});

// 描画処理
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 地面
    ctx.fillStyle = ground.color;
    ctx.fillRect(0, ground.y, canvas.width, ground.height);

    // プレイヤー
    ctx.fillStyle = player.color;
    ctx.fillRect(player.x, player.y, player.width, player.height);
}

// 状態更新処理
function update() {
    // 重力
    player.velY += GRAVITY;
    player.y += player.velY;

    // 地面との衝突判定
    if (player.y + player.height > ground.y) {
        player.y = ground.y - player.height;
        player.velY = 0;
        player.isJumping = false;
    }

    // 左右移動
    if (keys['ArrowRight'] || keys['KeyD']) {
        player.x += SPEED;
    }
    if (keys['ArrowLeft'] || keys['KeyA']) {
        player.x -= SPEED;
    }

    // ジャンプ（空中での連続ジャンプ不可）
    if ((keys['Space'] || keys['ArrowUp'] || keys['KeyW']) && !player.isJumping) {
        player.velY = JUMP_POWER;
        player.isJumping = true;
    }

    // 画面外に出ないよう制限
    if (player.x < 0) {
        player.x = 0;
    }
    if (player.x + player.width > canvas.width) {
        player.x = canvas.width - player.width;
    }
}

// メインループ
function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}

// ゲーム開始
loop();

// キャンバスの準備

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// ゲーム用の定数

const GRAVITY = 0.5;

const JUMP_POWER = -12;

const SPEED = 5;

// プレイヤーの状態

let player = {

x: 50,

y: canvas.height - 50 - 50,

width: 30,

height: 50,

color: 'red',

velY: 0,

isJumping: false

};

// 地面の情報

const ground = {

y: canvas.height - 50,

height: 50,

color: 'green'

};

// キー入力管理用

const keys = {};

document.addEventListener('keydown', (e) => {

keys[e.code] = true;

});

document.addEventListener('keyup', (e) => {

keys[e.code] = false;

});

// 描画処理

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

// 地面

ctx.fillStyle = ground.color;

ctx.fillRect(0, ground.y, canvas.width, ground.height);

// プレイヤー

ctx.fillStyle = player.color;

ctx.fillRect(player.x, player.y, player.width, player.height);

}

// 状態更新処理

function update() {

// 重力

player.velY += GRAVITY;

player.y += player.velY;

// 地面との衝突判定

if (player.y + player.height > ground.y) {

player.y = ground.y - player.height;

player.velY = 0;

player.isJumping = false;

}

// 左右移動

if (keys['ArrowRight'] || keys['KeyD']) {

player.x += SPEED;

}

if (keys['ArrowLeft'] || keys['KeyA']) {

player.x -= SPEED;

}

// ジャンプ（空中での連続ジャンプ不可）

if ((keys['Space'] || keys['ArrowUp'] || keys['KeyW']) && !player.isJumping) {

player.velY = JUMP_POWER;

player.isJumping = true;

}

// 画面外に出ないよう制限

if (player.x < 0) {

player.x = 0;

}

if (player.x + player.width > canvas.width) {

player.x = canvas.width - player.width;

}

// メインループ

function loop() {

update();

draw();

requestAnimationFrame(loop);

}

// ゲーム開始

loop();

コード自体はそこまで長くありませんが、「状態を更新して描画する」ループになっている点が重要です。

各パートの役割を分解して理解する

ここからは、先ほどの game.js を部分ごとに確認していきます。

キャンバスとコンテキストの取得

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

1 2	const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d');

canvas は HTML 側のキャンバス要素そのもの、ctx は「絵を描くためのペン」のようなイメージです。

この ctx を通して、四角形や画像、テキストなどを描画していきます。

プレイヤー・地面・物理パラメータ

const GRAVITY = 0.5;
const JUMP_POWER = -12;
const SPEED = 5;

let player = {
    x: 50,
    y: canvas.height - 50 - 50,
    width: 30,
    height: 50,
    color: 'red',
    velY: 0,
    isJumping: false
};

const ground = {
    y: canvas.height - 50,
    height: 50,
    color: 'green'
};

const GRAVITY = 0.5;

const JUMP_POWER = -12;

const SPEED = 5;

let player = {

x: 50,

y: canvas.height - 50 - 50,

width: 30,

height: 50,

color: 'red',

velY: 0,

isJumping: false

};

const ground = {

y: canvas.height - 50,

height: 50,

color: 'green'

};

重力・ジャンプ力・移動速度は「後から調整しやすいように」定数として定義
プレイヤーは位置・大きさ・縦方向の速度・ジャンプ中かどうかを1つのオブジェクトで管理
地面は「高さだけを持つシンプルな長方形」として扱っている

ゲームでは、このような「数字の集まり」が毎フレーム少しずつ変化していきます。

キー入力を押しっぱなしで判定する仕組み

<pre><code class="language-javascript">
const keys = {};

document.addEventListener('keydown', (e) => {
    keys[e.code] = true;
});

document.addEventListener('keyup', (e) => {
    keys[e.code] = false;
});
</code></pre>

const keys = {};

document.addEventListener('keydown', (e) => {

keys[e.code] = true;

});

document.addEventListener('keyup', (e) => {

keys[e.code] = false;

});

</code></pre>

キーが押された瞬間だけを見るのではなく、keys オブジェクトに「今押されているかどうか」を保存しておくスタイルです。

こうしておくと、更新処理の中で

<pre><code class="language-javascript">
if (keys['ArrowRight']) {
    // 右に移動
}
</code></pre>

if (keys['ArrowRight']) {

// 右に移動

}

</code></pre>

という書き方で、現在の入力状態を毎フレーム参照できるようになります。

描画処理（draw）の役割

<pre><code class="language-javascript">
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 地面
    ctx.fillStyle = ground.color;
    ctx.fillRect(0, ground.y, canvas.width, ground.height);

    // プレイヤー
    ctx.fillStyle = player.color;
    ctx.fillRect(player.x, player.y, player.width, player.height);
}
</code></pre>

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

// 地面

ctx.fillStyle = ground.color;

ctx.fillRect(0, ground.y, canvas.width, ground.height);

// プレイヤー

ctx.fillStyle = player.color;

ctx.fillRect(player.x, player.y, player.width, player.height);

}

</code></pre>

後から背景画像や敵キャラクターを追加する場合も、この中に『描く順番』を追記していくイメージです。

更新処理（update）で重力と当たり判定を実装する

function update() {
    // 縦方向の速度に重力を加算
    player.velY += GRAVITY;
    player.y += player.velY;

    // 地面との衝突
    if (player.y + player.height > ground.y) {
        player.y = ground.y - player.height;
        player.velY = 0;
        player.isJumping = false;
    }

    // 左右移動
    if (keys['ArrowRight'] || keys['KeyD']) {
        player.x += SPEED;
    }
    if (keys['ArrowLeft'] || keys['KeyA']) {
        player.x -= SPEED;
    }

    // ジャンプ（空中での連続ジャンプ不可）
    if ((keys['Space'] || keys['ArrowUp'] || keys['KeyW']) && !player.isJumping) {
        player.velY = JUMP_POWER;
        player.isJumping = true;
    }

    // 画面端の制限
    if (player.x < 0) {
        player.x = 0;
    }
    if (player.x + player.width > canvas.width) {
        player.x = canvas.width - player.width;
    }
}

function update() {

// 縦方向の速度に重力を加算

player.velY += GRAVITY;

player.y += player.velY;

// 地面との衝突

if (player.y + player.height > ground.y) {

player.y = ground.y - player.height;

player.velY = 0;

player.isJumping = false;

}

// 左右移動

if (keys['ArrowRight'] || keys['KeyD']) {

player.x += SPEED;

}

if (keys['ArrowLeft'] || keys['KeyA']) {

player.x -= SPEED;

}

// ジャンプ（空中での連続ジャンプ不可）

if ((keys['Space'] || keys['ArrowUp'] || keys['KeyW']) && !player.isJumping) {

player.velY = JUMP_POWER;

player.isJumping = true;

}

// 画面端の制限

if (player.x < 0) {

player.x = 0;

}

if (player.x + player.width > canvas.width) {

player.x = canvas.width - player.width;

}

✅ 重要ポイント

位置そのものではなく「速度」を通してキャラクターを動かす
地面にめり込んだら「位置を戻して速度を0」にするのがシンプル
ジャンプ中かどうかをフラグで管理して、空中連打による多段ジャンプを防ぐ

ゲームループ（loop）と requestAnimationFrame

<pre><code class="language-javascript">
function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}

// ゲーム開始
loop();
</code></pre>

function loop() {

update();

draw();

requestAnimationFrame(loop);

}

// ゲーム開始

loop();

</code></pre>

requestAnimationFrame は「次の描画タイミングでこの関数を呼んでください」という指示です。

ブラウザ側がよきタイミングで loop を繰り返し実行してくれるため、おおよそ 60FPS 程度で

update … 数字（位置・速度・入力状態）を更新
draw … 更新された状態を画面に描き直す

というサイクルが続いていきます。

ここまでの動作チェックリスト

コードを書き終えたら、ブラウザで index.html を開き、次のポイントを確認してみましょう。

項目	チェック内容
左右移動	左右キー or A / Dでプレイヤーがスムーズに左右へ動くか
ジャンプ	スペース or W / ↑キーでジャンプし、空中連打で無限に飛べないか
重力	ジャンプ後に自然に落下しているか、ふわふわしすぎていないか
地面との接触	地面にしっかり乗り、めり込まずに止まるか
画面端	左右の端から外に出てしまわないか