このツールをすぐ使いたい方はこちら
【個人開発】逆転の発想！「Reverse Tetris（逆テトリス）」を作りました
個人開発アプリ
はじめに — 逆テトリスって何？
テトリスといえば、行を揃えて消すのが基本中の基本ですよね。上から降ってくるブロックをうまく配置して、横一列を埋めたらパッと消える。あの爽快感はゲーム史に残る名発明だと思います。
でもある日、ふと考えたんです。「もしテトリスが”消す”んじゃなくて”積む”ゲームだったら？」と。行を消すことが目的じゃなくて、逆にブロックをどんどん積み上げて、上にあるゴールラインまで到達させる — つまり、テトリスの真逆。
考えれば考えるほど面白そうだったので、実際に作ってみました。それが「Reverse Tetris（逆テトリス）」です。見た目はテトリス、でもやってみると全然違う頭の使い方が求められる、ちょっと不思議なパズルゲームに仕上がりました。
Reverse Tetrisとは
Reverse Tetris（逆テトリス）は、おなじみのテトリスのルールを逆転させたブラウザゲームです。ブロックを消すのではなく、ブロックを積み上げてゴールラインに到達することがクリア条件になっています。
Reverse Tetris — 積め。消すな。
10×20のボード上で、7種類のテトリミノを使ってブロックを積み上げていきます。上から2行目にあるゴールラインを50%以上埋めればクリア。いかに速く・効率よく・隙間なく積めるかがスコアの鍵です。ダークテーマ＋ネオンサイバーパンクな世界観で、プレイしているだけで気分が上がります。
通常のテトリスでは「いかに隙間なく詰めて行を消すか」が重要ですが、Reverse Tetrisでは「いかに効率よく高く積み上げるか」が問われます。隙間（ギャップ）を作らないことは共通していますが、戦略がまるで違うんです。
ブラウザで動くのでインストール不要。PCのキーボード操作はもちろん、スマホのタッチ操作にも完全対応しているので、通勤中やちょっとした休憩時間にもサクッと遊べます。
ゲームの遊び方
遊び方はとてもシンプル。テトリスを知っている人なら直感的に遊べます。
-
ブロックが上から落ちてくる
I、O、T、S、Z、J、Lの7種類のおなじみテトリミノが、7-bag方式のランダムで出現します。次に来るピースはプレビューで確認できます。
-
ブロックを配置する
キーボード（左右移動・回転・ハードドロップ）またはスマホのタッチ操作でブロックを配置します。ゴースト（半透明のプレビュー）が着地位置を教えてくれるので、狙い通りに置けます。
-
ゴールラインを目指して積み上げる
ボードの上から2行目にゴールラインがあります。ここをブロックで50%以上埋めればクリア！ただし、隙間（ギャップ）が多いとスコアに響くので、なるべく密に積むのがコツです。
-
スコアをチェック＆シェア
クリアすると、タイム・ギャップ数・充填率からスコアが算出されます。リーダーボードでランキングを確認したり、Canvas生成されたリザルト画像をSNSにシェアしたりできます。
操作方法
| 操作 | キーボード | スマホ（タッチ） |
|---|---|---|
| 左右移動 | ← / → キー | 左右スワイプ |
| 回転 | ↑ キー | タップ |
| ソフトドロップ | ↓ キー | 下スワイプ |
| ハードドロップ | スペースキー | 上スワイプ |
主な機能・こだわりポイント
単にテトリスを逆にしただけじゃ面白くない。細部にもかなりこだわって作りました。
7種のテトリミノ × 7-bag方式
I、O、T、S、Z、J、Lの7種類のピースが登場。7-bag方式のランダマイズにより、同じピースが連続で偏って出ることがなく、公平で戦略的なプレイが楽しめます。本家テトリスと同じ仕様を忠実に再現しています。
ゴーストピース（着地プレビュー）
現在操作中のピースがどこに着地するかを、半透明のゴーストで表示します。ハードドロップ時の着地位置が一目でわかるので、素早い判断と正確な配置が可能になります。
ネオンサイバーパンク・テーマ
ダークテーマをベースに、ネオンカラーが光るサイバーパンクなビジュアルを採用。各テトリミノが鮮やかに発光し、プレイしているだけで没入感がある世界観に仕上げました。夜のゲームタイムにぴったりです。
モバイル完全対応
スマホ・タブレットのタッチ操作に完全対応。スワイプで移動、タップで回転という直感的な操作で、キーボードがなくても快適にプレイできます。レスポンシブデザインで画面サイズに自動フィットします。
Canvas生成のシェア画像
クリア時にリザルト画面でCanvas APIを使ってシェア用画像を自動生成します。スコア・ランキング・プレイ結果が美しくレイアウトされた画像をそのままSNSに投稿できます。
スコアリング＆リーダーボード
Reverse Tetrisのスコアリングは3つの指標で評価されます。ただ速いだけでもダメ、ただ綺麗に積むだけでもダメ。総合力が試されるスコアリングシステムです。
Time（スピード）
ゴールラインに到達するまでのクリアタイム。速ければ速いほど高スコア。焦って隙間だらけにならないよう注意。
Gaps（効率性）
積み上げたブロックの中にある隙間（ギャップ）の数。少ないほど高評価。効率的に隙間なく積む技術が問われます。
Fill Ratio（充填率）
ゴールライン上のブロック充填率。50%以上でクリアですが、100%に近づくほどスコアがアップ。完璧を目指せ！
リーダーボード
リーダーボードではTop 10のランキングを3つのカテゴリで表示します。
| ランキング | 評価基準 | 目指すべき指標 |
|---|---|---|
| Speed Ranking | クリアタイムの速さ | 最短クリアタイム |
| Gaps Ranking | ギャップの少なさ | 最少ギャップ数 |
| Overall Ranking | 総合スコア | 全指標のバランス |
個人的なコツとしては、まずGaps（隙間）を最小限にすることを意識するのがおすすめです。隙間が少ないと自然と充填率も上がるし、効率的に積めるのでタイムも縮まります。急がば回れ、ですね。
技術スタック
開発者としてのこだわりも紹介させてください。Reverse Tetrisは以下の技術スタックで構築しています。
Frontend
React 18
コンポーネントベースで状態管理がしやすく、ゲームのリアルタイム更新との相性が抜群。Hooksを活用してゲームロジックをすっきり整理しています。
Build Tool
Vite
爆速のHMR（Hot Module Replacement）で開発体験が最高。ビルドも高速で、デプロイまでのサイクルがストレスフリーです。
Rendering
Canvas API
ゲームボードの描画にはCanvas APIを使用。シェア画像の生成にも活用しており、リザルト画面をそのまま画像として出力できます。
Design
Dark + Neon Cyberpunk
ダークテーマをベースに、ネオンカラーのグロウエフェクトを組み合わせたサイバーパンク風UI。CSSカスタムプロパティで統一的なカラー管理を実現。
Game Logic
7-bag Randomizer
公式テトリスガイドラインに準拠した7-bag方式のピース生成。衝突判定、回転システム、ゴーストピースなどの基本機能を自前で実装しています。
Mobile
Touch Controls
スワイプ・タップによるモバイル操作を自前で実装。タッチイベントのスレッショルド調整により、意図しない誤操作を防いでいます。
技術選定で特にこだわったのはReact + Viteの組み合わせです。ゲームというと「Canvasでゴリゴリ描画する」イメージがありますが、UIの状態管理（スコア表示、リーダーボード、設定画面など）はReactの得意分野。ゲームボードの描画はCanvasに任せつつ、それ以外のUI部分はReactコンポーネントで構築するハイブリッドな設計にしています。
Viteを使ったのは開発速度を最大化するため。ゲーム開発はトライ＆エラーの連続なので、コードを書き換えた瞬間に結果が反映されるHMRの速さは本当に助かりました。Create React Appでは味わえない快適さです。
今後のアップデート予定
Reverse Tetrisはまだまだ進化の途中です。今後のアップデートでは以下のような機能を検討中です。
- 難易度選択 — 落下速度や目標ライン位置を変えて、初心者からハードコアゲーマーまで楽しめるようにする
- ホールド機能 — 現在のピースを一時的に保留して、後で使える機能
- BGM＆効果音 — サイバーパンクな世界観に合ったサウンドを追加して没入感をアップ
- 対戦モード — 2人でどちらが先にゴールラインに到達できるか競う対戦機能
- デイリーチャレンジ — 毎日異なる条件（特定のピースだけ、制限時間付きなど）で遊べるチャレンジモード
- 実績システム — 「ノーギャップクリア」「30秒以内クリア」などの実績バッジ
「こんなモードが欲しい」「ここが遊びにくい」といったフィードバックがあれば、ぜひXのDMやリプライで教えてください。個人開発なのでフットワーク軽く対応できます！
まとめ
Reverse Tetris（逆テトリス）は、テトリスの「消す」を「積む」に逆転させたブラウザゲームです。改めてポイントをまとめます。
- 逆転の発想 — 行を消すのではなく、ブロックを積み上げてゴールラインを目指す
- 10×20ボード — おなじみのサイズ感で、ゴールラインは上から2行目
- 3つのスコア指標 — Time、Gaps、Fill Ratioで総合力を評価
- リーダーボード — 3カテゴリのTop 10ランキングで競える
- サイバーパンク美学 — ダーク＋ネオンの世界観で遊ぶだけで楽しい
- どこでも遊べる — PC（キーボード）でもスマホ（タッチ）でもブラウザだけでOK
「テトリスを知っている」というだけで、すぐにルールが理解できるのがこのゲームの良いところ。でも実際にやってみると、普通のテトリスとは全然違う頭の使い方を求められて、新鮮な驚きがあるはずです。
個人開発のゲームなので荒削りな部分もあるかもしれませんが、どんどんアップデートしていきます。まずは一度遊んでみてください — きっと「あと1回だけ…」が止まらなくなります。笑
