GPT-4とPongゲームを作ってプログラミングを学ぶ。

2023年5月11日 22:41

多くの方々が、ChatGPTでテトリスをはじめとした色々なゲームを作ってもらう記事を見ていたのですが、やっぱり、実際に自分も体験してみることにしました。

私自身はゲームを作った経験は全くありません。
また、プログラム言語は、少しPythonをかじってる程度です。今回は自分の勉強も兼ねて、全く触ったことのないJavaScriptでブラウザ上で動くゲームをGPT-4に教えてもらいながら作ってみました。というか、ほとんど作ってもらったんですけどね。

ひと段落、作成を終えてみて、ChatGPTとゲームを実装することを通じて、かなり学びがありました。ChatGPTに、こちらの希望を伝えて一緒に考えたり、エラーが出たときに対処方法を色々ためしてみたり、試行錯誤の中で学ぶことが多く、それを粘り強くにフォローしてくれる、ChatGPTはプログラミング初学者の教育のパートナーに最適だと感じました。

ChatGPTと会話しながら、実際に動くものが少しづつ出来上がっていく過程が、なによりとても楽しかったです。

ChatGPTとのやりとりはこんな感じ

ユーザー入力：
こんにちは。JavaScriptの勉強のためにwebブラウザーで動く、テーブルテニスのゲームを作ってみたいです。フィールドにプレイヤーおよびAIのパドルを配置してボールを互いに打ち返すゲームです。
プレイヤーはマウスでパドルを動かして、ボールトパドルの衝突場所およびボールの入射角度で反射角度が変わることでゲーム性を与えたいです。ひとまず簡単なサンプルコードをつくってもらえませんか。

ChatGPT出力：

もちろんです。ここではHTMLとJavaScriptを使用して、基本的なテーブルテニスのゲームを作成します。このゲームではプレイヤーがマウスでパドルを制御し、AIがボールを打ち返します。

まず、ゲームに必要な要素のHTMLを書きましょう。

<!DOCTYPE html>
<html>
    <head>
        <title>Table Tennis Game</title>
        <style>
            #gameCanvas {
                background: #000;
            }
        </style>
    </head>
    <body>
        <canvas id="gameCanvas" width="800" height="600"></canvas>
        <script src="game.js"></script>
    </body>
</html>

次に、JavaScriptでゲームロジックを書きます。このコードではパドルの移動、ボールの移動、ボールとパドルの衝突、そしてAIのパドルの動きを制御します。

// ゲーム要素の設定
const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');

const ball = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: 10,
    dx: 2,
    dy: 2
};

以下略

（中略）

ユーザー入力：
少しづつボールの速度が上がるようにしたいです。

ChatGPT出力：

それは素晴らしいアイデアですね！ボールの速度が徐々に上がると、ゲームはより難しく、そしてよりエキサイティングになります。

ボールの速度を徐々に上げるには、ボールがパドルに当たるたびに速度を少し上げると良いでしょう。以下にそのためのコードを示します。

// プレイヤーのパドルとボールの衝突
if (ball.y + ball.radius > player.y && ball.y - ball.radius < player.y + player.height && ball.dx < 0) {
    if (ball.x - ball.radius < player.x + player.width) {
        ball.dx *= -1.05; // 5%の速度増加
        ball.dy *= 1.05; // 5%の速度増加
    }
}

// AIのパドルとボールの衝突
if (ball.y + ball.radius > ai.y && ball.y - ball.radius < ai.y + ai.height && ball.dx > 0) {
    if (ball.x + ball.radius > ai.x) {
        ball.dx *= -1.05; // 5%の速度増加
        ball.dy *= 1.05; // 5%の速度増加
    }
}

上記のコードでは、ボールがパドルに当たるたびにボールの速度を5%ずつ上げています。これは、ボールのdx（x方向の速度）とdy（y方向の速度）の値を1.05倍することで実現しています。

この値は適宜調整して、ゲームの難易度を自分の好みに合わせて変更することができます。例えば、値を1.01にすると速度の上昇はよりゆっくりとなりますが、1.1にすると速度の上昇はより速くなります。

こんなかんじのやり取りを、都合２時間くらい続けました。

老練の先生のような指導

途中、ゲームの終了判定が上手く動かず、それを報告してもChatGPT先生ははぐらかすばかりで、的外れなことを言って膠着状態になりかけました。
こちらが解決の糸口を発言したら、秒で解決したコードを提示してくれました。

ユーザー入力：
あのぉ終了判定は、y軸ではなく、ｘ軸で判定すべきだと思うのですが…。

ChatGPT出力：

すみません、ご指摘の通りです。テーブルテニスのゲームのように縦長のフィールドで行う場合、ボールがプレイヤーの背後の壁に触れるとゲームオーバーになるため、x軸の値をチェックするべきでした。以下に修正したコードを示します：

function loop() {
    // ... (他のコード)

    // ボールがプレイヤーの背後の壁に達した場合
    if(ball.x - ball.radius < 0) {
        // ゲーム終了
        gameOver();
        return; // ループを終了
    }

    // ... (他のコード)
}

function gameOver() {
    // ゲーム終了時の処理をここに書く
    // 例えば、ゲーム終了のメッセージを表示するなど
    alert("Game Over");
}

絶対知ってて、おちょくりやがったな、こいつ…。という感じです。本当のところは分かりませんが、当初の目的がプログラミング学習と伝えていたので、気を利かせてくれたのだと思っています。ありがたいものです。

ひとまず完成しました

スコア表示もありませんし、試合というよりも千本ノックのシゴキをAIからうける感じになりましたが、とにかく人生初のゲームを完成させることができました。

もし、もしよかったら、添付ファイルを解凍のうえ pong.htmlを開いてちょとだけ遊んでもらえると報われます。

おしまい。ここまでお読みいただき、ありがとうございました。

この記事が参加している募集

#AIとやってみた

34,547件

この記事が気に入ったらサポートをしてみませんか？