ChatGPTでテトリスを作るまで

今回はChatGPTで簡単なプログラムを作るまでの指示の出し方について記載していきます。GPT-4を利用しました。

ちまたでは、命令する側の知識がないと難しいといわれていたりしますが、少し試してみたところテトリス程度であれば知識がほとんどなくても作成が可能ということがわかりました。もちろん知識がない分GPTに全部任せることになるため、プログラムが動かない場合は対応することはできませんが、テトリスであれば問題なく作成ができそうです。

手順としては以下のような流れになります。

初め

何も作り方がわからないためとりあえずどの環境で動作するのかを指定してコードを作成してもらいます。今後赤枠で示したものが実際にGPTに対して伝えたメッセージになります。

ブラウザ上で動くテトリスを作成してください。

以下が作成されたコードの一部です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テトリス</title>
    <style>
        /* CSSコードをここに追加 */
    </style>
</head>
<body>
    <canvas id="game" width="320" height="640"></canvas>
    <script>
        // JavaScriptコードをここに追加
    </script>
</body>
</html>
テトリスゲームの基本的な構造を提供しますが、完全なゲームロジックは長すぎてここに記載できません。テトリスゲームを完全に実装するには、ブロックの回転、衝突検出、ラインの消去、スコアの追跡、ゲームオーバー条件など、さまざまな機能を追加する必要があります。

全然コードを書いてくれない

最初の書き方ではプログラムを記載してもらえませんでした。そのため、GPTから教えられたテトリスの実装に必要なものを記載して依頼します。

ブロックの回転、衝突検出、ラインの消去、スコアの追跡、ゲームオーバー条件のJavaScriptを提供してください。

以下のプログラムが詳細を伝えて記載してもらったものです。左側のtest.htmlをクリックすれば動いているものが確認できます。

test.html ダウンロード

うまく動いていない部分について考える

現在のテトリスではどのような問題があるか動かして試してみます。上記のファイルをダウンロードしてブラウザで実行するかページに表示されているテトリスを確認すると明らかに出来が悪い部分があります。この内容を修正してもらうように依頼します。

おそらくこの部分が難しいとされていますが、テトリスの動きとおかしいところを伝えているだけなので、そこまで難易度は高くないと思います。

今のテトリスでは以下の問題点があります。この問題点を解決してください。
・ブロックの形が正しく表示されない
・画面の枠とブロックの移動できる範囲がおかしい

依頼内容はざっくりと見てわかる通りブロックの形が正しく表示されていない点と、画面の枠とブロックが移動している範囲がおかしい点を指摘しています。できたコードが以下のようになります。

index.html ダウンロード

以下はGPTからの返答です。修正した場所を回答しています。今回は1回でいい感じのところまでできているので終わりとしていますが、これでもダメな場合は何回か指摘することで解決すると思われます。

また、スコアやタイムの実装、横幅の調整やブロックの落ちてくる速度、ブロックの色変更などは実装されていないのでそのあたりも依頼することで実装が可能になりそうです。

スコアについては途中まで記載している雰囲気がありますが…

上記のコードでは、以下の修正を行いました。

drawMatrix関数内でブロックを描画する際、xおよびyの座標にscaleを掛けています。これにより、ブロックの形が正しく表示されるようになります。

resetTetromino関数内でテトロミノを初期化する際、positionプロパティのx座標に対して、-1を減算しています。これにより、画面の枠とブロックの移動できる範囲が正しくなります。

これらの修正により、問題点が解決されます。このコードを使ってテトリスをプレイすることができます。

まとめ

これらを作成するまでに30分程度で作ることができました。正直応答速度がかなり遅い点と、私の質問内容が良くなかったため、何度も質問をして時間がかかりました。そのため、慣れてくれば1度の質問で動くレベルのプログラムを教えてくれるのではないかと思います。