Chromeの恐竜が走るやつを作ってみたかった話

【🎄Merry Christmas🎄 WWWAVE アドベントカレンダー　12/7の記事です】

前置き

通信ができないときにChromeで遊べる恐竜のゲーム面白いですよね。
シンプルながらついついやりたくなるタイプのやつです。

先日ふと恐竜以外のものを走らせてみたいなーと思ったので、作ってみることにしました。

完成物

こんな感じになりました。キャスター付き椅子に乗ったまま滑走してもらってます。

gifにしたらもっさりしちゃいました。本来はもう少し速いです。

利用したもの

Google Gemini

おおまかなコードを全部作ってもらいました。

Google Apps Script

簡単にhtmlのページを表示できる方法があったので使いました。

以下のような関数を用意
→ index.html ファイルをプロジェクト内に作る
→ 実行する関数に指定してデプロイする

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

という感じです。

いらすとや

いつもお世話になってます。

気にした部分

Geminiさんはコードをさくっと作ってくれたりして大変便利なのですが、機能を追加しようとすると急に強めの思想が出てきて関係ないところまで変えようとしてくることがあります。

下の画像は「開始処理を調整したいんですよ」と相談したにも関わらず自信満々に別の箇所の修正を勧めてきたときの図です。keydown だとジャンプの挙動が変なので、あえて keypress にしたんですけどね。

そこで、修正前と後の差分も一緒に出すようにしてもらって、必要な変更なのかをこちらで判断するようにしました。

だいぶ優秀な予測変換みたいな使い方です。「うまいこと指示して全部作ってもらうぜ」的な使い方もいいですが、部分部分を手伝ってもらうのもなかなか便利だと思います。

改善点

突発的に作ったのでまだまだ改善できそうな感じです。例えば以下のような感じです。

• 障害物にも画像を用意する
  • 飛び越えたら面白いものを用意したい
• 障害物の種類を増やす
  • 本家だとサボテン以外にも鳥とかいる
• 最高記録を保存できるようにする
  • gasを使ってるのでスプレッドシートとかと連携すると良さそう

まとめ

作業工程全部ブラウザで簡単なゲームが作れました。すごい。
GeminiさんなどのAIアシスタントとは、今後もうまく付き合っていきたいです。