プログラミング

JavaScriptで作るプラットフォームゲーム

最終更新： 16/03/2025
2 分の読み

ゲーム開発の世界は、プログラミングのスキルや創造性を活かす素晴らしい場所です。特に、JavaScriptを使って作成する「プラットフォームゲーム」のようなプロジェクトは、プログラミングの基礎を学びながら楽しめるものです。この完全なガイドでは、JavaScriptを使ってプラットフォームゲームを作成する方法を、ステップバイステップで解説します。

1. プロジェクトの準備

必要なツール

  • テキストエディタ：Visual Studio CodeやSublime Textなど、JavaScriptコードを書くためのエディタをインストールします。
  • ブラウザ：ゲームはブラウザで動作するので、Google ChromeやFirefoxなどの最新のブラウザを使用します。

プロジェクトの構成

  • HTML：ゲーム画面を表示するための基本的な構造を作成します。
  • CSS：ゲームの見た目やデザインをスタイリングします。
  • JavaScript：ゲームのロジックや動作を実装します。

2. ゲームの基本的な構造を作成する

まずは、HTMLファイルを作成し、ゲーム画面を表示するためのキャンバスを配置します。キャンバスは、JavaScriptで描画を行うための領域です。

関連記事
html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>プラットフォームゲームtitle>
    <link rel="stylesheet" href="style.css">
head>
<body>
    <canvas id="gameCanvas" width="800" height="600">canvas>
    <script src="game.js">script>
body>
html>

ここでは、タグを使ってゲーム画面を描画するためのキャンバスを作成しました。widthとheightでキャンバスのサイズを指定します。

3. ゲームのスタイリング

次に、CSSでゲーム画面のスタイリングを行います。ゲームの背景色やその他のデザイン要素を設定します。

css
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #87CEEB; /* 空の色 */
}

canvas {
    border: 2px solid black;
}

ここでは、画面全体をセンターに配置し、背景を空のような色に設定しています。

4. JavaScriptでゲームのロジックを実装

ゲームのロジックはJavaScriptで実装します。まずは、基本的なゲームループを作成し、その中でキャラクターの動きやコリジョン処理を行います。

javascript
// ゲームキャンバスの設定
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// ゲームオブジェクト
let player = {
    x: 50,
    y: 550,
    width: 50,
    height: 50,
    speed: 5,
    dx: 0,
    dy: 0
};

// キー操作
const keys = {
    right: false,
    left: false,
    up: false
};

// プレイヤーの動き
function movePlayer() {
    if (keys.right) player.dx = player.speed;
    else if (keys.left) player.dx = -player.speed;
    else player.dx = 0;

    if (keys.up && player.dy === 0) player.dy = -10; // ジャンプ処理

    player.x += player.dx;
    player.y += player.dy;

    // 重力の影響を受ける
    if (player.y < 550) player.dy += 1;  // プレイヤーが空中にいる場合は重力を適用
    else player.dy = 0;  // 地面に着いたらジャンプしないようにする

    if (player.y > 550) player.y = 550; // 地面との衝突処理
}

// キーイベントのリスナー
document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') keys.right = true;
    if (e.key === 'ArrowLeft') keys.left = true;
    if (e.key === 'ArrowUp') keys.up = true;
});

document.addEventListener('keyup', (e) => {
    if (e.key === 'ArrowRight') keys.right = false;
    if (e.key === 'ArrowLeft') keys.left = false;
    if (e.key === 'ArrowUp') keys.up = false;
});

// ゲームの描画
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // 前のフレームを消す
    ctx.fillStyle = 'red';  // プレイヤーの色
    ctx.fillRect(player.x, player.y, player.width, player.height);  // プレイヤーを描画
}

// ゲームループ
function gameLoop() {
    movePlayer();
    draw();
    requestAnimationFrame(gameLoop);
}

gameLoop();  // ゲームループを開始

このコードでは、ゲーム内のキャラクター（プレイヤー）の動きを実装しています。プレイヤーは矢印キーで移動し、上キーでジャンプできます。重力を適用し、地面に戻るようにしています。

5. プラットフォームの追加

プラットフォームを追加することで、キャラクターがジャンプしたり、プラットフォームに乗ったりできるようにします。以下のようにプラットフォームを描画し、衝突判定を追加します。

javascript
let platforms = [
    { x: 0, y: 550, width: canvas.width, height: 10 },  // 地面
    { x: 200, y: 400, width: 200, height: 10 },  // 中央のプラットフォーム
    { x: 500, y: 300, width: 200, height: 10 }   // 上部のプラットフォーム
];

// プラットフォームの描画
function drawPlatforms() {
    ctx.fillStyle = 'green';
    platforms.forEach(platform => {
        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
    });
}

// プレイヤーとプラットフォームの衝突判定
function checkPlatformCollisions() {
    platforms.forEach(platform => {
        if (player.x + player.width > platform.x && player.x < platform.x + platform.width &&
            player.y + player.height > platform.y && player.y + player.height < platform.y + 10 && player.dy >= 0) {
            player.dy = 0;  // ジャンプのリセット
            player.y = platform.y - player.height;  // プレイヤーをプラットフォームの上に配置
        }
    });
}

function gameLoop() {
    movePlayer();
    checkPlatformCollisions();
    draw();
    drawPlatforms();
    requestAnimationFrame(gameLoop);
}

gameLoop();

このコードでは、プラットフォームを画面に描画し、プレイヤーがプラットフォームに触れた際にジャンプがリセットされるようにしています。

6. ゲームの進化

ゲームにいくつかの新しい要素を追加することで、より楽しさや挑戦が増します。例えば：

  • 敵キャラクターの追加：プレイヤーが避けるべき敵キャラクターを追加します。
  • 得点システム：プレイヤーが敵を倒したり、アイテムを取得したりすることで得点を獲得できるようにします。
  • ゲームオーバーシステム：プレイヤーが敵に触れた際や、画面外に落ちた際にゲームオーバーになるようにします。

まとめ

このように、JavaScriptを使ってプラットフォームゲームを作成するための基本的なステップを紹介しました。HTML、CSS、そしてJavaScriptを組み合わせて、シンプルながらも魅力的なゲームを作ることができます。ゲームのロジックやデザインを少しずつ拡張することで、さらに複雑で面白いゲームに進化させることができます。

最終更新： 16/03/2025
2 分の読み
Back to top button