ブラウザ版テトリス

概要

SEGAアーケード版の操作感を意識した、HTML5 Canvasだけで動くブラウザ版テトリス。ハイスコアとキー設定のカスタマイズに対応。

詳細

HTML5 CanvasとJavaScriptだけで実装したブラウザ版テトリス。SEGAアーケード版の操作感を意識し、壁キック付き回転（上下左右斜め8方向のキック位置を順に試す「弾む」感触）、3段階の設置猶予（ロックディレイ）、レベル上昇、スコア計算、オールクリアボーナス、ネクストピース表示、効果音、ポーズ、ゲームオーバー表示を備える。ブラウザ上でキー割り当てをカスタマイズできる設定画面（複数キー割り当て・重複防止・localStorage保存・初期設定への復帰）と、名前つきハイスコア機能（上位10件をlocalStorageに保存）を追加。F3による5段階の画面サイズ切り替え、URLパラメータによる開始レベル指定にも対応する。ダークアーケード風のベベル表現、ライン消去時のフラッシュ、レベルアップ・スコアのバンプアニメーションなど、控えめな演出も加えた。

目的

業務アプリとは別に、Canvas描画、ゲームループ、キー入力、当たり判定、状態管理、操作感調整、localStorageによる設定・記録の永続化を見せるインタラクション展示枠として制作。

想定利用者

ブラウザで手軽に遊びたいユーザー、Canvasやゲームの状態管理・設定カスタマイズの実装を確認したい人

見せたいポイント

• Canvas単体で動くブラウザゲーム
• SEGAアーケード版を意識した壁キック付き回転と3段階の設置猶予
• ブラウザ上でキー割り当てをカスタマイズできる設定画面（複数キー対応）
• 名前つきハイスコア機能（上位10件をlocalStorageに保存）
• URLパラメータで開始レベルを指定可能
• スコア、ライン、レベル、ネクストピース表示
• 効果音、ポーズ、ゲームオーバー演出、F3による画面サイズ切り替え
• ライン消去フラッシュ・レベルアップトーストなどの控えめな演出

補足

2026-07-04 更新: C:\dev\tetris の実装内容から登録内容を更新（全面リプレース後の版）。ハイスコア・キー設定カスタマイズ機能を追加し、スクリーンショットをローカルに差し替え。