ChatGPTと共に簡単ゲーム開発！ステップバイステップで学ぶJavaScriptゲーム作成

私たちが今日取り組むプロジェクトでは、ChatGPTの力を借りてゲーム開発を行います。でも、一体ChatGPTでプログラミングすると、どれほど作業が楽になるのでしょうか？ここで、そのメリットをいくつか挙げてみましょう。

Contents

ChatGPTでプログラミングがどれだけ楽になるか

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円で受講できるチャンスです。エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

ChatGPTでプログラミングがどれだけ楽になるか

1. コードの自動生成

時間節約: ChatGPTは、基本的なプログラム構造を瞬時に生成します。これにより、時間をかけて自分でコードを書く必要がなくなります。
エラーの減少: ChatGPTが生成するコードは、一般的なプログラミング規則に沿っているため、初心者が自分でコードを書く際に起こりがちなエラーが減少します。

2. カスタマイズの容易さ

柔軟な調整: ChatGPTは指示に応じてコードを変更できるため、個々のプロジェクトに合わせてカスタマイズするのが容易です。
学習と実践の両立: コードを自分で書きながら、ChatGPTの提案を参考にすることで、プログラミングスキルを実践的に学ぶことができます。

3. プログラミングの理解を深める

コードの解説: ChatGPTはコードの生成だけでなく、その動作や構造についても説明できます。これにより、プログラミングの理解が深まります。
トラブルシューティング: 遭遇する問題やバグに対して、ChatGPTは解決策やデバッグのヒントを提供できます。

Chat GPTに指示をするだけで、プログラムを書いてくれるため非常に有用です。

はじめに

こんにちは。ブロガーのよすけです。今日は、ChatGPTと共にたった数ステップで完結するJavaScriptゲームの作成方法をご紹介します。特別なスキルは不要！指示を出し、コードを貼り付け、テストして、修正するだけです。

アイコン名を入力

プログラム知識ないけど大丈夫？

記事の対象者

プログラミング初心者: 基本的なコーディングスキルを身に付けたい方。
ゲーム開発に興味がある人: 自分でゲームを作ってみたいと思っているが、どこから始めていいか分からない方。
教育関係者: プログラミング教育の教材として、楽しく実践的なコンテンツを探している先生や指導者。
趣味のプログラマー: 新しいツールや言語を試してみたいと考えている趣味でプログラミングを楽しんでいる人。
子供たち: 親や教師の助けを借りて、プログラミングの基礎を学びたい子供たち。
テクノロジー愛好家: 新しいテクノロジーに興味があり、ChatGPTのようなAIツールを使ってみたい方。
DIYプロジェクトに興味がある人: 自分で何かを作ることに興味があり、新しいプロジェクトのアイデアを探している方。

ゲームのコンセプト

私たちが今回作るのは、マリオ風のシンプルなゲーム。
キャラクターを操作して右に進み、出現する敵をジャンプで倒します。敵が倒れるアニメーションなどもChatGPTに指示することで、簡単に追加できるのでお勧めです。
実際の様子は一番下のYou Tubeの動画をご覧ください。

ゲーム作成の流れ

実際の流れは一番下のYouTubeの動画で紹介していますので、ぜひ見てください。

ChatGPTに指示を出す: 最初のステップは、ChatGPTにゲームの基本的な機能をプログラムするように指示を出すことです。例えば、「キャラクターが右に進む機能」や「敵をジャンプで倒す機能」などを依頼します。
プログラムの貼り付け: ChatGPTが生成したコードを、HTMLやCSSと一緒にウェブページに貼り付けます。これでゲームの基本的な骨組みが完成します。
動作確認と修正: 貼り付けたプログラムを実行して、ゲームが期待通りに動くかテストします。問題があれば、ChatGPTにフィードバックを与えて、修正されたコードを再度取得します。
繰り返しの最適化: このプロセスを繰り返しながら、ゲームの操作感や見た目を徐々に改善していきます。

キャラクターと背景の作成

ゲームをより魅力的にするためには、個性的なキャラクターや美しい背景が欠かせません。ここでは、Dall-EというAIアートジェネレーターを使って、これらの要素を簡単かつ迅速に作成する方法をご紹介します。

Dall-Eとは？

Dall-Eは、テキストの指示に基づいて画像を生成するAIツールです。複雑なデザイン作業を必要とせず、数分でオリジナルのキャラクターや背景を作り出すことができます。

キャラクターの作成

キャラクターのコンセプトを考える: ゲームの主人公や敵キャラクターの基本的な特徴を考えます。例えば、「勇敢な宇宙飛行士」や「不気味な宇宙エイリアン」など。
Dall-Eに指示を出す: 決めたコンセプトに基づいて、Dall-Eにキャラクターの画像を生成するよう指示します。
カスタマイズと選択: 生成された画像の中から、ゲームに最も適したものを選び、必要に応じて細部を調整します。

背景の作成

背景を作成すると、ゲームの世界観の印象がだいぶ変わります。こちらもDall-Eでぜひ作ってみてください。

背景のテーマを決める: ゲームの世界観に合った背景を考えます。例えば、「星々が輝く宇宙空間」や「神秘的なエイリアンの惑星」など。
Dall-Eに制作を依頼: 選んだテーマに基づいて、Dall-Eに背景画像を生成してもらいます。
最適な背景を選択: 生成された背景の中から、ゲームの雰囲気に最も合うものを選びます。

なぜDall-Eを推奨するのか？

時間の節約: 手動でデザインする場合と比べて、大幅に時間を節約できます。
独創性: AIが生成する画像はユニークで、オリジナルのゲーム世界を作り出すのに役立ちます。
使いやすさ: プロのデザインスキルがなくても、誰でも簡単に高品質な画像を作成できます。

操作のシンプルさ: キャラクターの動きや敵の反応は直感的です。
カスタマイズの容易さ: ChatGPTによる柔軟なコード生成で、機能の追加や変更が簡単に行えます。
即時のフィードバック: すぐにゲームをテストし、必要に応じて調整できるので、効率的な開発が可能です。

完成したゲームの紹介

こちらが完成したゲームです。

繰り返しChatGPTに修正を指示することで、よりよいコンセプトのゲームが作れるようになります。

プログラム内容

作成してできたプログラムを貼り付けておきます。
こんなプログラムが即座にChatGPTで作ることができるので、感動ものです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>シンプルなマリオ風ゲーム</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>
    <img id="playerImage" src="Main.png" style="display: none;">
    <script src="script.js"></script>
</body>
</html>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-image: url('background.jpg'); /* 背景画像を設定 */
    background-size: cover; /* 背景画像を画面に合わせて表示 */
}

canvas {
    border: 1px solid black;
}

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

const playerImage = document.getElementById('playerImage');
const enemyImage = new Image();
enemyImage.src = 'enemy.png';

let player = {
    x: 50,
    y: 350,
    width: 50,
    height: 50,
    velocityX: 0,
    velocityY: 0,
    speed: 5,
    jumpForce: -15,
    onGround: false
};

let enemies = [];
let stairs = [];

const keys = {
    right: false,
    left: false,
    space: false
};

let currentStage = 1;

function checkCollision(player, enemy) {
    if (
        player.x < enemy.x + enemy.width &&
        player.x + player.width > enemy.x &&
        player.y < enemy.y + enemy.height &&
        player.y + player.height > enemy.y
    ) {
        if (player.velocityY > 0 && player.y < enemy.y) {
            enemy.active = false;
            player.velocityY = player.jumpForce;
        } else {
            player.x = 50;
            player.y = canvas.height - player.height;
            player.velocityY = 0;
        }
    }
}

function createRandomEnemy() {
    if (enemies.length < 4) {
        const enemy = {
            x: canvas.width,
            y: canvas.height - player.height,
            width: 40,
            height: 40,
            speed: Math.random() * 4 + 2,
            active: true,
            deathAnimation: 0
        };
        enemies.push(enemy);
    }
}

function createStairs() {
    stairs = [];
    const stairCount = 5;
    const stairWidth = 60;
    const stairHeight = 20;

    for (let i = 0; i < stairCount; i++) {
        stairs.push({
            x: i * stairWidth * 1.5 + canvas.width,
            y: canvas.height - player.height - (i + 1) * stairHeight,
            width: stairWidth,
            height: stairHeight
        });
    }
}

function switchStage() {
    if (player.x + player.width >= canvas.width) {
        currentStage++;
        player.x = 50;
        player.y = canvas.height - player.height;

        if (currentStage === 2) {
            createStairs();
        }
    }
}

function checkStairsCollision(player, stairs) {
    for (let i = 0; i < stairs.length; i++) {
        if (
            player.x < stairs[i].x + stairs[i].width &&
            player.x + player.width > stairs[i].x &&
            player.y + player.height >= stairs[i].y &&
            player.y < stairs[i].y + stairs[i].height
        ) {
            player.y = stairs[i].y - player.height;
            player.velocityY = 0;
            player.onGround = true;
        }
    }
}

function drawStairs() {
    ctx.fillStyle = 'brown';
    for (let i = 0; i < stairs.length; i++) {
        ctx.fillRect(stairs[i].x, stairs[i].y, stairs[i].width, stairs[i].height);
    }
}

function updatePlayer() {
    if (keys.right) {
        player.velocityX = player.speed;
    } else if (keys.left) {
        player.velocityX = -player.speed;
    } else {
        player.velocityX = 0;
    }

    if (keys.space && player.onGround) {
        player.velocityY = player.jumpForce;
        player.onGround = false;
    }

    player.velocityY += 0.8;
    player.y += player.velocityY;
    player.x += player.velocityX;

    if (player.y + player.height > canvas.height) {
        player.y = canvas.height - player.height;
        player.velocityY = 0;
        player.onGround = true;
    }

    if (player.x < 0) {
        player.x = 0;
    } else if (player.x + player.width > canvas.width) {
        switchStage();
    }

    for (let i = 0; i < enemies.length; i++) {
        if (enemies[i].active) {
            checkCollision(player, enemies[i]);
        }
    }

    if (currentStage === 2) {
        checkStairsCollision(player, stairs);
    }
}

function updateEnemies() {
    for (let i = 0; i < enemies.length; i++) {
        if (enemies[i].active) {
            enemies[i].x -= enemies[i].speed;

            if (enemies[i].x + enemies[i].width < 0) {
                enemies[i].x = canvas.width;
                enemies[i].active = true;
            }
        } else {
            enemies[i].deathAnimation++;
            if (enemies[i].deathAnimation > 20) {
                enemies.splice(i, 1);
                i--;
            }
        }
    }
}

function gameLoop() {
    requestAnimationFrame(gameLoop);

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

    updatePlayer();
    updateEnemies();

    ctx.drawImage(playerImage, player.x, player.y, player.width, player.height);

    for (let i = 0; i < enemies.length; i++) {
        if (enemies[i].active) {
            ctx.drawImage(enemyImage, enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
        } else {
            ctx.fillStyle = 'gray';
            const deathY = enemies[i].y - enemies[i].deathAnimation;
            ctx.fillRect(enemies[i].x, deathY, enemies[i].width, enemies[i].height);
        }
    }

    if (currentStage === 2) {
        drawStairs();
    }
}

function keyDownHandler(e) {
    if (e.code === 'ArrowRight') {
        keys.right = true;
    } else if (e.code === 'ArrowLeft') {
        keys.left = true;
    } else if (e.code === 'Space') {
        keys.space = true;
    }
}

function keyUpHandler(e) {
    if (e.code === 'ArrowRight') {
        keys.right = false;
    } else if (e.code === 'ArrowLeft') {
        keys.left = false;
    } else if (e.code === 'Space') {
        keys.space = false;
    }
}

document.addEventListener('keydown', keyDownHandler);
document.addEventListener('keyup', keyUpHandler);

setInterval(createRandomEnemy, 2000);

const backgroundImage = new Image();
backgroundImage.src = 'background.jpg';

backgroundImage.onload = function () {
    gameLoop();
};