知識が無くてもChatGPTでテトリスが作れる！？

## ChatGPTとは
近年、よく耳にするであろうChatGPTについて軽く触れておきます。
ChatGPTとは「米OpenAIが開発した文章生成AI」であり、対話方式で回答を得ることができます。
無料版であれば誰でも利用でき、更なる正確な回答や性能を求める場合は有料版を利用することになりますが、テトリス程度であれば無料版でも作成可能です。

## さっそく作ってみよう
ということで、画面ショットを貼りながら早速作っていきます。
誰でも作成できるように、HTMLとJavaScriptで作成していきたいと思います。
特にコードの中身は全く気にせずChatGPTオンリーでの作成としていきます。

まず、
**「HTMLとJSでテトリスが作成したいです」**
と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/29cb2bb1-a73e-62c7-4dc3-9da284ceb7cf.png)

すると以下のようにHTMLとJSを作成してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/d651b2dc-c278-2448-ef59-5e1f484c38d3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/f23feba9-5a83-9bdc-54ae-8803e0b3e064.png)

出来上がったコードは確認せず、それぞれのコードをテキストファイルへコピペし、ファイル名を「tetris.html」と「tetris.js」としデスクトップへ新しいフォルダーを作成しファイルを置きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/d223d15c-e76b-d2ea-0a2d-4a08350cdf40.png)

そしてhtmlファイルを開いてみると、**それっぽいやつ** ができています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/7f4b5b15-4a30-3e85-ba26-c13500e20286.png)

操作していると、どうやら以下の矢印キー操作で作成されているようです。
<font color="FF0000">**上キー：左回転** 
**下キー：加速** 
**左キー：左移動** 
**右キー：右移動** </font>

また、テトリスの機能として横一行が揃った場合、行を削除しなければいけませんが実装されているようです。
テトリスの概念をChatGPTは理解しているようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/35e0ac61-2eda-ff5d-bfed-dfb42f337f10.png)
<font color="FF0000">※スクショが遅くなってしまってLブロックが落ちちゃってますが、ちゃんと一番下の行は消えています。</font>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/f9315f6f-f4ce-c6bc-4910-5acf2afd0a99.png)

## 改善を加える
今の状態でも遊べるは遊べるのですが、動作がカクカクだったりスコアボードがなかったりするため、もう少しChatGPTへ依頼してみます。

**「動作がカクカクしています。修正してください。また、スコアボードが欲しいです。1行削除するごとに1000ポイント加点してください。」** 
と入力してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/86196c43-ae2a-211d-0b29-d5e6590aa514.png)

すると、修正されたHTMLファイルが渡されました。（JSは特に記載なかったため修正不要な感じ？）
特にコードを読むことはせず、HTMLファイルに上書きします。

<font color="FF0000">**落下速度が異常なくらい上がりました。**</font>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/47520530-4edc-d3f8-0961-e078f5794e32.png)

<font color="FF0000">これではプレイできません。</font>
速度を下げるように依頼します。

また、画面左上にはスコアボードの表示がされてました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/c3182026-8b74-6fd5-86af-d65c5b26b3e7.png)
ここは適用されてそうですね。

**「落下速度が速すぎてプレイできません。修正してください。」**
と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/cd57525c-a612-da72-3eac-2b2df51b077f.png)

HTMLファイルが修正されましたので、こちらで上書きします。

かなりプレイしやすくなりました。とても良いですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/7600cb7a-fdf1-965c-1c36-3b1f71860681.png)

先ほど見ていなかった（正しくはプレイできなかったので見られなかったのですが）スコアが1行削除して1000ポイント入る要求が反映されているか確認してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/d3bb1c2b-05ca-a553-63a4-c16dabc05b2e.png)

一番下が消えた時にスコアが1000と増えていますね。素晴らしいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950003/b39d8132-fa62-650d-428a-ca3231986fc1.png)

これで一通りテトリスは完成し、少し遊ぶくらいには出来上がったと思います。

あと、思いつく改善点としてはテトリミノごとに色を区別することや、行を消すたびにレベルを上げて落下速度を速めて難しくする等がありそうです。
無料で上記のことができますので、是非試してみてください。

## まとめ
以上、ChatGPTを使用してテトリスを作成してみるという内容でした。
今回、全くコードは読んでおらず、ChatGPTから返されたコードをファイルへそのままコピペするだけでしたが、見事完成することができました。
現在も学習を続けているChatGPT、いつかプログラムは全てChatGPTへ任せて作成する未来が来るかもしれませんね。
その場合、人がすべきこととしてモノをカタチへするために要望や仕様をまとめてChatGPTへ依頼するスキルが重要になってくるのかもしれませんね。

また、余談として再度同じメッセージをChatGPTに依頼しても同じコードでテトリスが完成できるとは限りません。
2回目だと別コードでHTMLとJSが作成されます。
面白いですね。