ChatGPT Plus で画像をようやく本日から扱えるようになりました。
前回、2023年4月の時点では下記のようにかなりいろいろと指示しなければなりませんでした。またこの記事以後に試したもののリンクも追加しておきます。
あれから、ChatGPTも進化しているはずです。どうでしょうか。
STEP 1. ウェブでうごくテトリスを作ってください
この時点では形は１つだけで、下に落ちる、↓キーで落ちる速度が早くなる。さらに１度おちたら消えて終わり。までしか実装されませんでした。
また上記のように注意事項がでてきたので、次の命令を与えます。
STEP 2. 完全なゲームを作成するために、回転、様々なテトリミノの形、行のクリア、得点システムなどの機能を追加してください。
ここで指示されるのは、JavaScriptに対してコードを追加せよとなります。
もしかしたら、今時点で何をしたら良いかわからないかもしれません。
今回は script.js というファイルにコードをいれているので、そちらに追加するということになります。
ただし追加しても動きませんでした。
そこで次の命令を与えます。
STEP 3. 動かないので、検証おねがいします
今度は全く動かなくなりました。困りますよね。
STEP 4. 動かないので、検証おねがいします。また完全なコードを示してください。
ここでも動きません。
Chromeの開発者モードでチェックしてみると、script.js の末尾あたりにある playerReset(); について、その関数が実装されていませんね。
そこで次の命令を与えてみます。
STEP 5. 動きません。playerReset関数もないので、正しい完全な script.js を実装してください
おお、少しまともなものが出てきました。しかし。画面途中から積み上がりますね。また回転などはできません。
以前の質問４でした操作マニュアルを聞いてみます。
STEP 6. このテトリスの操作マニュアルを作成してください
ふむ。回転機能は実装されていないのですね。では実装してもらいましょう。
STEP 7. 回転機能を実装してください
ここでは完全なコードではなく、一部修正が必要です。このあたりは少しプログラミングのことを知っていないと難しいかもしれません。
script.js に対して操作をします。
function playerRotate(dir) と function rotate(matrix, dir) は update関数より上に追加。
document.addEventListener に if文を追加（提示されているものを少し修正して else if として追加する。
うまく実装できたら、上矢印キーで回転させることができました。
まぁこのように、テトリスを実装させるためには、全くコードを知らないとまだ難しい感じはしますね。可能なら JavaScript のプログラミングについて知っていること。そうでなくても Chromeなどで JavaScriptの実行状況をチェックできることぐらいはできないといけなさそうです。
参考：ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
2023年10月13日 @kimipooh
