![見出し画像](https://assets.st-note.com/production/uploads/images/142220768/rectangle_large_type_2_50eceffafae510260b2f1d226b1cc08c.png?width=1200)
お昼休みにブラウザゲームを作成してみた。
ChatGPT 4oが無料で利用できるようになったようですね。
私は有償版の契約をしており、前から便利だなと思っていました。どんなことができるのか。仲間を増やすためにも書いてみました。
★とある日、12時15分現在。
私:「ブラウザで動くゲームとかって、プログラムできるの? インベーダーゲームのような・・。」
GPTくん:「もちろん、ブラウザで動くゲームはプログラムできますよ!特にインベーダーゲームのようなシンプルなゲームは、HTML、CSS、JavaScriptを使って作成することができます。基本的なステップを紹介しますね。」
(何回かのやり取り後……)
こんなのできました!
![](https://assets.st-note.com/img/1716953567527-yjFSK1JVSq.png?width=1200)
★作り方(今回のケース)
①GPTくんに相談し、つくり方とコードを書いてもらう。
②新規フォルダをつくり、Textエディタを3つ用意する。
・index.txt
・style.txt
・game.txt
③それぞれに、GPTが用意したコードを貼り付けて、拡張子をText→それぞれに変える。
・index.html
・style.css
・game.js
(拡張子が表示されない場合は、フォルダーを開くと上に表示される「ファイル名拡張子」にレ点を入れる。 ↓
![](https://assets.st-note.com/img/1716955143999-6uL9HbyQuE.png)
④ツリーで書くとこんな感じになる。
フォルダを開いて、Index.htmlをダブルクリック。
![](https://assets.st-note.com/img/1716954054740-8N8HlDvaUM.png)
⑤するとブラウザ画面で、ゲーム画面が立ち上がる。
※ブラウザが開くけど、Textで書いたコードが出る場合は、"Index.html.txt"になっているかも。③を参照。
![](https://assets.st-note.com/img/1716954105849-O3pt2pr43v.png?width=1200)
⑤再びGPTくんに相談し、機能をたしていく(……は、またの機会に)。
さて、現在時刻は12時45分です。
思い立ってGPTくんに相談し、曲がりなりにもブラウザで動く何かをつくって、このNOTEを書き終えるまで約30分。
生成AIは、目の前のあなたと全力で、円滑なコミニュケーションを取ろうとしてくれる製品です。喜んでもらう事が優先され、時に回答が間違っているけど、そういう仕様の製品だと思います。
私たち人間が、使い道を間違えずに使ってあげれば、良いフレンドになれると思います。
あとがき含めて、今現在13時00分。仕事に戻るぞ!
おしまい
この記事が気に入ったらサポートをしてみませんか?