🎮 No Code でゲームを試作！ChatGPT 活用術

10 秒で、できるだけ西へ！

[西] のボタンを制限時間内にどれだけ押せるかを競うゲーム。頭の中で方角を回転させるのがコツ。↓で実際に遊べるよ。

このゲームはすべて ChatGPT に作ってもらった。「こういうゲームが欲しいからコード書いて」って指示したら、かなり思い通りのゲームを作ってくれた。この記事では、その指示の履歴を辿りながら、AI を思い通りに使いこなすコツみたいなものを探ってみる。

こんな風に ChatGPT に指示した

盤面づくり

💡 4 つのボタンを東西南北に配置させる指示は難しい (配置が思い通りにならない)。少し回り道でも 3×3 で 9 個のボタンを作り、不要分を非表示にする指示で上手く行った。

画面上に 3×3 のグリッドを生成し、各グリッドにボタンがある HTML を作ってください。
もっとボタンを大きくしてください。縦横の長さを2倍にしてください
良いですね。このコードを編集して、Button 1、Button 3、Button 5、Button 7、Button 9 を非表示にしてください

3×3 から始めたのが効いた。じゃないと正しい配置の HTML を出してくれない

ボタンに東西南北を設定

💡 ボタンテキストに東西南北をランダムに割り当てると、東西南北の位置関係が壊れる (南の隣に北が来たりする)。正しい方角の配置を規定の 4 通りに埋め込んで、そこから選んで表示させた。

Button 2 = 北、Button 4 = 西、Button 6 = 東、Button 8=南

ボタンをクリックすると、次の 2 パターンから交互にボタンテキストを更新してください。
- パターン A:
  - Button 2 のテキスト: Button 2
  - Button 4 のテキスト: Button 4
  - Button 6 のテキスト: Button 6
  - Button 8 のテキスト: Button 8
- パターン B:
  - Button 2 のテキスト: Button 6
  - Button 4 のテキスト: Button 2
  - Button 6 のテキスト: Button 8
  - Button 8 のテキスト: Button 4
いいですね、次にパターン C を追加して、パターン A B C が順に選ばれるようにしてみましょう。
- パターン C:
  - Button 2 のテキスト: Button 8
  - Button 4 のテキスト: Button 6
  - Button 6 のテキスト: Button 4
  - Button 8 のテキスト: Button 2
とてもいいですね！最後にパターンD を追加してみましょう。
- パターン D:
  - Button 2 のテキスト: Button 4
  - Button 4 のテキスト: Button 8
  - Button 6 のテキスト: Button 2
  - Button 8 のテキスト: Button 6
いいですね。パターンの選択を順番ではなく、ランダムにできますか？
ボタンテキストを新しいものに差し替えましょう。
- Button 2 → 北
- Button 4 → 西
- Button 6 → 東
- Button 8 → 南
もしランダムに選ばれたパターンが前回と同じなら、異なるパターンが選ばれるまで再抽選するように修正してください
ボタンテキストが “北” または “東” または “南” のボタンをクリックしたら「残念！」とアラートをだしてください

スコア表示

Button 1、Button3、Button 5 の非表示を解除してください。また、この 3 つをボタンではなくテキスト要素に変更してください。Button 7 と Button 9 は非表示にしてください
ボタンテキストが「西」のボタンが押された回数を数えて、それを Button 1 のテキストで表示してください
Button 1 のテキストは、「西」がクリックされた回数の数字だけにしてください。最初は「0」です

ゲーム制御

💡 [2] で「それ以外の処理は変えないでください」と書いた。このへんで出力 HTML は 125 行と大きくなってくるので、余計なことをして壊さないよう指示には注意が要る。

Button 5 の場所にボタンを置いてください。
ゲーム開始中かどうかを判定するフラグを作り、次のような動作を実装してください。フラグの初期状態は False です。Button 5 を押すとフラグが反転します。それ以外の処理は変えないでください
- フラグが False:
  - Button 5 のボタンのみが押せる
  - Button 2, 4, 6, 8 は押せない
- フラグが True
  - Button 5 は押せない
  - Button 2, 4, 6, 8 は押せる
Button 5 を押して gameInProgress が True になったら、10 秒のカウントダウンを開始してください。残り時間を小数点 2 桁目までの精度で Button 3 のテキストに表示してください
Button 5 のボタンテキストを「はじめる」にしてください
Button 3 のテキストの初期値を「10.00」にして、ゲーム終了後にテキストをもとに戻すときも「10.00」に戻すようにしてください
ゲーム進行中フラグを立てると同時に westButtonCount を 0 で初期化してください
タイトルを「Went West」に変えてください

残り時間の追加

💡 JaveScript と HTML を分離して、より細かく指示できるように。[2]、[3]、[4] のように段階を踏んで指示すると上手く行くけど、これは No Code 的ではないね…笑

HTML と Javescript を個別に編集できるように、2 つのファイルに分割してください
starGame() の countdown を startGame() 関数以外から操作できるようにしてください。他の関数から countdown を増減する機能を作る準備です
作成した increaseCountdown 関数で引数を取って、受け取った値だけ countdown を増やしてください。JavaScript 全体を書いてください
今作った increaseCountdown を使って、ボタンテキストが「西」のボタンが押されたら、coundown を 1 秒増やしてください。JavaScript 全体を書いてください
increaseCountdown に渡す引数を westButtonClickCount を使って、次の数に変更してみてください。JavaScript をすべて書いてください
- 1/(increaseCountdown/5 + 2) + 0.5

ゲーム終了処理

countdown が 0 になったら次のようなアラートを出してください。[WestButtonClickCount] の部分にはその数値を入れてください。JavaScript 全体を書いてください
- おわり！[WestButtonClickCount] 回西に進みました

プログラミング的発想が指示のコツ？

ゼロから完成形までに踏むべきステップを具体的に想像する力があると、AI への指示が通りやすいね。例えば、人間なら「東西南北にボタンを並べて」で伝わるところ、「3×3 でボタンを並べて」と指示してから対角線のボタンを非表示にする。

これはプログラミングで必要なスキルと同じだ。完成形を一度に目指すのではなく、足りない機能を少しだけ補ってインクリメンタルに開発する。非表示にした 3×3 のボタンの奇数番目は、Rui さんの言う「最終的な結果には残らないコード」の単純な例になってると思う。

コーディング … で非常に気をつけているのは … できるかぎり小さな変更を積み重ねていくこと … 。

小さな変更でもきちんと動くようにするには、最終的な結果には残らないコードを書く必要があります … 。なるべく何も壊さずにインクリメンタルにゴールまでたどり着くのが目的
ソースコードって実際のところどういうふうに書いていますか？｜Rui Ueyama (強調筆者)

ともかく、僕のような非技術者がサクッとアイデアを試すには、ChatGPT はとんでもなく強力な道具だね。完成したコードは、HTML 47 行、JavaScript 96 行で、この程度なら慣れたプログラマなら自分で書くほうが早いのかも知れないけどね。成果物は GitHub に載せてるよ。

プレイ動画

実はこのゲームは、僕が 10 年ほど温めてるアイデアの試作品。頭の中にはこれをもっと面白くするアイデアがあるけど、まずは「脳内で方角を回転する遊び」がどれほど楽しいか、この試作品で確かめられたと思う。もっと作り込むぞ~

カテゴリー:tech

回れ右の内輪差

🎮 No Code でゲームを試作！ChatGPT 活用術

10 秒で、できるだけ西へ！