生成AIにゲーム作ってもらった <テトリス> →改善してみる
前回作ってもらったテトリスにいろいろ要望を追加しました。
途中経過の画像とるの忘れてました。今回の最終系は最下部に画面貼り付けています。
修正1
ラインが消える時がわかりづらいのでエフェクト追加。
また、上下のカーソルを押したときに、ウィンドウ自体のスクロールが効いてしまい、画面全体が動くので改善依頼。
途中で止めたりやり直し機能も追加
[追加プロンプト]
ラインが消える時の効果を派手にしてほしい。
縦スクロールが発生するため、カーソル上下でスクロールしてしまう。
一時停止できるようにしたい。
最初からやり直せるようにしたい。
完璧です!ゲームに以下の改良を加えました:
🎆 派手なライン消去エフェクト
ライン消去時にカラフルなグラデーション効果が表示
アニメーションで拡大→縮小する視覚効果
エフェクト後にラインが削除される
🚫 スクロール問題の解決
矢印キーとスペースキーのページスクロールを完全に無効化e.preventDefault()でブラウザのデフォルト動作を阻止
⏸️ 一時停止機能
Pキーまたは一時停止ボタンでゲームを一時停止
一時停止中は半透明のオーバーレイが表示
ボタンの表示も「一時停止」⇄「再開」で切り替わる
🔄 リスタート機能
いつでもリスタートボタンでゲームを最初から開始可能
スコア、レベル、ボードがすべてリセット
エフェクトもクリアされる
🎮 追加された操作
P: 一時停止/再開
矢印キー: スクロールしない安全な移動・回転
ボタン: マウスでも操作可能
これでより快適で見た目にも楽しいテトリスゲームになりました!ライン消去の瞬間がとても派手で爽快感がありますよ。
修正2
追加されたはずの来消去時のエフェクトが効いていないようだったので、指示を追加。
また、テトリスによくある次に出てくるブロックを表示してもらいたいので追加。
[追加プロンプト]
ライン消去エフェクトが効かない
次のブロックを表示したい
完璧です!以下の改良を加えました:
🎆 修正されたライン消去エフェクト
消去対象のラインが白く点滅
その後カラフルなランダム色に変化
最終的にラインが削除される3段階のアニメーション
🔮 次のブロック表示
右パネルに「次のブロック」プレビューを追加
120×90pxの小さなキャンバスで次のピースを表示
ブロックは中央に配置され、光沢効果付き
ゲーム開始時に2つのピースを準備
✨ 改良点
エフェクトがキャンバス内で確実に動作
次のピースが常に表示される
ゲームリスタート時に次のピースもリセット
色配列に白色(エフェクト用)を追加
🎮 動作の流れ
ライン完成 → 白く点滅
カラフルに変化
ライン削除 → 新しいピース登場
これでライン消去がとても派手で分かりやすくなり、戦略を立てやすい次のピース表示も追加されました!
修正3
現状だとページ表示と同時にゲームが開始してしまうので、開始画面を追加してもらう。
また、スタート時のレベルを選択できるように機能追加。
ハイスコアを記録して、ハイスコア更新した時に通知するようにする。
[追加プロンプト]
最初にいきなりゲームスタートせずに、開始レベルを選択させて、スタートボタンでゲーム開始させたい
ハイスコアを覚えておいて表示、ハイスコアを超えた場合に、エフェクトで分かるようにしたい。
完璧です!ゲームに以下の素晴らしい機能を追加しました:
🎮 スタート画面機能
美しいグラデーションの開始画面
1〜15レベルの選択ボタン(グリッド表示)
ゲームスタートボタンで開始
レベルが高いほど最初から速く落下
🏆 ハイスコアシステム
セッション内でハイスコアを記憶(sessionStorage使用)
スタート画面とゲーム中にハイスコア表示
ゲームオーバー時に新記録表示
✨ 新記録エフェクト
ハイスコア更新時に**「🎉 新記録達成! 🎉」**の派手なポップアップ
現在スコアが金色に光るアニメーション
ゲームオーバー画面でも新記録を祝福
🎯 改良されたゲームフロー
タイトル画面 → レベル選択 → ゲーム開始 → ゲームオーバー → タイトルに戻る
レベル計算が開始レベルベース(例:レベル5スタート→15ライン消去で6レベル)
一時停止はゲーム開始後のみ有効
🎨 視覚的な改良
レベル選択ボタンのホバー効果
新記録時の豪華なアニメーション
スタートボタンの3Dエフェクト
これで本格的なテトリスゲームになりました!高レベルからの挑戦やハイスコア更新の達成感を楽しんでください!
完成
ここまでで改善された結果が以下の通り。
すごくゲームっぽくなりました。
日本語で指示しているだけで放置してたら出来上がるのすごすぎる。
近い将来、プログラマは失業してしまうかも。
スタート画面

ゲーム画面

新記録達成時

ゲームオーバー

プログラムの中も見て勉強しないといけませんね。
== ランキングに参加しています。ぜひクリックお願いします ==
生成AIにゲーム作ってもらった <テトリス> 生成AIにゲーム作ってもらった <テトリス> →改善してみる2