私たちは、お客様のプライバシーを大切にします

私たちは、お客様のブラウジング体験を向上させ、パーソナライズされた広告やコンテンツを提供し、当社のトラフィックを分析するためにクッキーを使用しています。「すべてのクッキーを受け入れる」をクリックすると、当社のクッキーの使用に同意したことになります。

同意に関する設定をカスタマイズ

当社は、お客様を効率的にナビゲートし、特定の機能を実行できることを目的としてクッキーを使用しています。以下の各同意項目の下に、すべてのクッキーの詳細情報が記載されています。

「必須」に分類されるクッキーは、サイトの基本的な機能を有効にするために不可欠であるため、お客様のブラウザに保存されます。

また、当社は、お客様による本サイトの利用状況を分析し、お客様の好みを保存し、お客様に関連するコンテンツや広告を提供するために、サードパーティーのクッキーを使用しています。これらのクッキーは、お客様の事前の同意がある場合にのみ、お客様のブラウザに保存されます。

お客様は、これらのクッキーの一部、または全部を有効または無効にすることができますが、一部のクッキーを無効にすると、お客様のブラウジング体験に影響を与える場合があります。

常に効にする

必須クッキーとは、安全なログインの提供や同意設定の調整など、このサイトの基本機能を有効にするために必要なクッキーです。これらのクッキーは、個人を特定できるようなデータを保存することはありません。

表示するクッキーがありません。

機能クッキーは、ソーシャルメディアプラットフォームでのウェブサイトのコンテンツの共有、フィードバックの収集、その他のサードパーティの機能など、特定の機能の実行をサポートします。

表示するクッキーがありません。

分析用クッキーは、訪問者がウェブサイトとどのように関わっているかを理解するために使用されます。これらのクッキーは、訪問者数、直帰率、トラフィックソースなどの指標に関する情報を提供することをサポートします。

表示するクッキーがありません。

パフォーマンスクッキーは、ウェブサイトの主要なパフォーマンス指標を理解し、分析するために使用され、訪問者に優れたユーザー体験を提供することをサポートします。

表示するクッキーがありません。

広告クッキーは、訪問者が以前に訪れたページに基づいてカスタマイズされた広告を提供し、広告キャンペーンの有効性を分析するために使用されます。

表示するクッキーがありません。

プログラミング

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