9
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

PERSOL CROSS TECHNOLOGYAdvent Calendar 2024

Day 17

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

Last updated at Posted at 2024-12-16

ChatGPTとは

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

さっそく作ってみよう

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

まず、
「HTMLとJSでテトリスが作成したいです」
と入力します。
image.png

すると以下のようにHTMLとJSを作成してくれます。
image.png
image.png

出来上がったコードは確認せず、それぞれのコードをテキストファイルへコピペし、ファイル名を「tetris.html」と「tetris.js」としデスクトップへ新しいフォルダーを作成しファイルを置きます。
image.png

そしてhtmlファイルを開いてみると、それっぽいやつ ができています。
image.png

操作していると、どうやら以下の矢印キー操作で作成されているようです。
上キー:左回転
下キー:加速
左キー:左移動
右キー:右移動

また、テトリスの機能として横一行が揃った場合、行を削除しなければいけませんが実装されているようです。
テトリスの概念をChatGPTは理解しているようです。
image.png
※スクショが遅くなってしまってLブロックが落ちちゃってますが、ちゃんと一番下の行は消えています。
image.png

改善を加える

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

「動作がカクカクしています。修正してください。また、スコアボードが欲しいです。1行削除するごとに1000ポイント加点してください。」
と入力してみます。
image.png

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

落下速度が異常なくらい上がりました。
image.png

これではプレイできません。
速度を下げるように依頼します。

また、画面左上にはスコアボードの表示がされてました。
image.png
ここは適用されてそうですね。

「落下速度が速すぎてプレイできません。修正してください。」
と入力します。
image.png

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

かなりプレイしやすくなりました。とても良いですね。
image.png

先ほど見ていなかった(正しくはプレイできなかったので見られなかったのですが)スコアが1行削除して1000ポイント入る要求が反映されているか確認してみます。
image.png

一番下が消えた時にスコアが1000と増えていますね。素晴らしいです。
image.png

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

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

まとめ

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

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

9
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?