【非エンジニア必見！！】ブラウザ上で動くマリオゲームをAIで簡単に作る方法(コピペでOK)※解説あり 2024/7月時点

初めまして！
愛知でITエンジニアをしているKyonaです。

現在大流行中のAIですが、凄まじい発展を遂げています。
なんとプロンプトを書くだけで簡単なゲームを作れてしまうのです！
それも非エンジニアの方であっても簡単に作成することができるというのです。
もちろん大前提HTMLをブラウザ上でどう動かすかなどの知識は必要になりますが、ネットで調べると簡単に誰でも実装できますのでまずはこの面白さを実感していただきたいです。
ちなみに、「HTML Chrome 表示」等で調べるといくらでも出てきます。

さて本題ですが今回はとあるAIを利用して「マリオ」を作成してみました。
下が作成したマリオになります。

ブラウザ上の画面

どうでしょうか。素晴らしいクオリティですよね。
こちらもちろん矢印キーでマリオが動きクリボーを踏むと倒せますし、コインも取れますし、二段回ジャンプ等もできます。
そしてこれが何とたった5分ほどで作れるというのです笑

ちなみにChatGPT4-oで試しましたが、うまく作れませんでした。
プロンプトはほぼ同じものを使用ししています。

GPT4-oに作成させたマリオ

1mmもマリオだと分かりませんね。。

今回の記事では一つ目の画像のマリオのソースコードをお配りします。
また私は初学者用に記事を書いていますので、解説もびっしりと入れていこうと思いますので、そもそもHTMLって何？やJavascriptって何？という方もサクッとコピペしてブラウザ上で動かすまではできるような内容にしております。
こちらを学習用に使うもよし！自分なりにアレンジしてポートフォリオにするもよし！！いずれにせよ初学者にとって非常にいい教育材料となると考えております。

ちなみに今パズドラも作成中なので、出来上がり次第また共有しようと思います。

さてここからは有料になりますが、
今後更に加速するであろうAI時代に何をどのように有効活用すればいいのか理解を深めるいいキッカケになればと思います。