テトリス風落ちゲー

テトリス風（背景ぼかし・ステージクリア表示・安定版）
isi-work.com

本記事は、AI（人工知能）を用いてゲームのコーディングおよび説明記事の執筆を行いました。クリエイティブ分野における AI 活用の可能性と透明性について示すことを目的としています。

説明

🎮 ゲーム概要

このゲームは、ブラウザ上で動作するテトリス風落下パズルゲームです。
ブロックを積み上げ、ラインを揃えて消していくおなじみのルールに加え、
背景画像の変化やぼかし演出など、ビジュアル演出を強化したステージ制の作品です。

🧩 主な特徴

◆ 背景とステージ進行

  • ステージごとに背景画像が切り替わります。（例：img/back01.jpg, img/back02.jpg …）
  • ステージ開始時は背景がぼかされた状態。
    ラインを消すごとにぼかしが少しずつ薄れ、
    全消去後にはクリアな背景が現れるという達成感の演出を加えています。
  • 10ラインを消すと「STAGE CLEAR」が表示され、
    3秒後に次のステージが自動的に開始します。

⚙️ ゲームシステム

■ ピースと操作

7種類のテトリミノ（I, J, L, O, S, T, Z）を搭載。
各ブロックは色分けされており、視認性も高い設計です。

操作方法

キー操作内容
← / →左右移動
↑回転（簡易キック対応）
↓ソフトドロップ（1段落下）
Spaceハードドロップ（滑らかな落下アニメ）
Rリスタート

■ ライン消去と連鎖

  • 揃ったラインは白フラッシュを数回点滅してから消去。
  • 同時に複数行を消した場合、その数に応じて下から数行も消滅する特殊ルール：
    • 2行同時 → 下から1行も消える
    • 3行同時 → 下から2行も消える
  • 消去後、上にあるブロックは滑らかなアニメーションで下に落下。

■ ハードドロップ（Spaceキー）

  • Spaceキーでピースを等速アニメーションで着地させる演出。
  • 着地時にはロック処理が行われ、即座にラインチェックを実施。
  • 落下速度や動作タイミングは一定で、操作の爽快感を重視。

💥 ゲームオーバー

  • 新しいピースが出現できない（上部まで積み上がった）場合はゲームオーバー。
  • 盤面全体を暗くし、「GAME OVER」を中央に表示。
  • Rキーまたは「START / RESTART」ボタンで再開可能。

🖼️ UI構成

  • メインキャンバス：10×20の盤面
  • サイドパネル：
    • ステージ番号
    • スコア
    • クリア進捗（例：6 / 10）
    • 次のピースプレビュー
    • 操作ガイド
    • スタート／リスタートボタン

🧠 開発仕様・技術メモ

  • HTML5 Canvas による描画（外部ライブラリ不使用）
  • **JavaScript（ES6）**単体で構成
  • 背景画像のぼかしにはCSSの filter: blur() を使用
  • 衝突判定は整数グリッドベースで精密に制御
  • テスト機能内蔵：
    • ブロック衝突やライン消去ロジックを自動チェック
    • ハードドロップ着地点計算の一致検証

🕹️ プレイの流れ

  1. 「START / RESTART」ボタンをクリック
  2. ピースがランダムに出現して落下開始
  3. 操作してラインを揃える
  4. 背景のぼかしが徐々に薄れる
  5. 10ラインでステージクリア → 「STAGE CLEAR」表示
  6. 3秒後に次のステージが開始
  7. 積み上がると「GAME OVER」表示

🌈 特徴まとめ

  • 背景のぼかしと解除による視覚的な達成感
  • 落下・消去ともに滑らかなアニメーション
  • ステージ制・スコア制で長く遊べる設計
  • 外部ライブラリ不使用の純粋なHTML一枚構成

仕様

以下の要件にて生成

ブラウザで動く「テトリス風」落下パズルゲームを、HTML単一ファイル（HTML+CSS+JS）で実装してください。要件は次の通りです。

基本
・canvas を使って描画。盤面は 10列×20行、セルサイズは見やすく大きめ（約44px四方）。
・次ピースのプレビューを**盤面の外（右側パネル）**に表示。
・操作キー：
　←/→：左右移動（壁＆他ブロックとの当たり判定あり）
　↑：右回転（簡易キック可）
　↓：ソフトドロップ（1押下で1段だけ確実に下げる）
　Space：ハードドロップをアニメーション付きで実行（着地点まで等速で滑らかに降下し、到達時にロック）
　R：リスタート
・ピースは I/J/L/O/S/T/Z の7種。色分けあり。

背景画像（ステージ連動）
・背景は盤面領域のみに表示。img/back01.jpg などを使用。
・ステージ番号に応じて画像パスを切り替え：
　ステージ1 → img/back01.jpg
　ステージ2 → img/back02.jpg
　ステージ10 → img/back10.jpg
・ステージ開始時はぼかしあり、ラインを1本消すごとに徐々にぼかしを弱める。
・ステージクリア時はぼかしゼロで背景をはっきり表示。

ステージとクリア条件
・1ステージあたりの目標：10ライン消去でステージクリア。
・クリア時の演出：
　盤面を空にして「STAGE CLEAR」の文字を盤面中央に表示。
　3秒間表示したら自動で次ステージへ（次ステージ開始時は再びぼかしあり）。
・初期配置として、下部にランダムなブロックを敷いて背景を部分的に隠す（難易度は適度に）。

ライン消去とアニメーション
・ラインが揃ったら白フラッシュを数回点滅させてから消去。
・複数列同時消し：n行同時に消した場合は、追加で下から (n−1) 行を消去（底が下がる仕様）。
・消去後、消えた列の上にあるブロックを滑らかに下へ落とすアニメーションを行う（落下距離に応じて時間が延びる）。アニメ完了後に次のピースを出す。

落下・当たり判定
・物理判定は整数グリッド基準。描画は補間してもよいが、衝突直前は補間オフにしてめり込みを防ぐ。
・ピースがロックした直後は補間用の内部タイマーをリセットし、Y方向の見た目ズレが出ないようにする。

ゲームオーバー
・新しいピースが出現できない（スポーン位置で衝突）場合は即ゲームオーバー。
・盤面全体に半透明の黒ベールを敷き、「GAME OVER」を中央に常時表示。リスタートで解除。

UI
・右側パネルに「ステージ番号」「スコア」「（クリア目標への）進捗」「次のピース」を表示。
・「START / RESTART」ボタンを用意（クリックで初期化＆開始）。

実装詳細ヒント
・7種ピースは行列（2次元配列）で表現、右回転は転置＋水平反転等で実装。
・乱数バッグ（7個シャッフル）方式で順序決定。
・ソフトドロップ時は同フレームで自動落下が重ならないよう、内部積算タイマー（acc）をリセット。
・ハードドロップ（Space）は着地点を事前計算し、ピクセル補間で fromY→toY を降下、到達したら lock()。
・ライン消去時は、消える行配列を使い、盤面スナップショットを基に「動くセルだけオフセット描画」する方式で落下アニメを実装。

画像パス
・背景は img/back${stageNumberPadded}.jpg（2桁ゼロ埋め、例：01, 02, …, 10）。

品質・テスト
・起動時に簡易セルフテストを走らせる（例）：
　盤面サイズ・7種定義の存在チェック
　空盤面スポーンが衝突しないこと
　底1段が埋まったとき Oミノが正しい高さで止まること
　中段に足場があるときの停止高さ
　ソフトドロップが1段だけ進むこと（自動落下と競合しない）
　同時消去後の落下量計算（例：行18・19消去時、行17のブロックは+2）
　ハードドロップ着地点計算が while 版と一致

制約
・外部ライブラリを使わず、純粋な HTML/CSS/JavaScript のみ。
・1ファイル完結。画像はパス指定のみで良い（実ファイルは用意済み想定）。

以上の仕様を満たす読みやすいモジュール化されたコードで、コメントを適宜入れて実装してください。

タイトルとURLをコピーしました