タップで落とす数字マージゲーム

作ってみた/小ネタ
Score 0
Best 0
NEXT
盤面をタップするとその列にピースが落ちます。
同じ数が上下左右でつながると合体:2個→2倍3個以上→3倍で1つになります(連鎖あり)。
キー操作:1〜6でドロップ / T=Trash / C=Clear / U=Undo / Space=現在列

これは何?

列をタップ(/クリック)するだけの超シンプルなマージゲームです。
同じ数字が上下左右でつながると1つに合体して2倍、重力で落ちて連鎖します。
外部ライブラリは使いません。HTML / カスタムCSS / カスタムJSの3つをコピペすれば動きます。

  • スマホ最適化(タップ操作のみ)
  • 落下アニメーションで“どこに落としたか”が分かる
  • Undo / Trash(次ピース捨て) / 列クリアで詰みにくい
  • **テーマ切替(5種)**搭載(Classic / Pastel / Neon[Dark] / Monochrome / Sunset)
  • 自動セーブ(localStorage

遊び方

  • 盤面の任意の列をタップすると、表示中のNEXTピースが上から落下します。
  • 同じ数字が上下左右でつながったときに**1つへ合体(数字は2倍)**します。連鎖します。
  • 右上の NEXT が次に落ちる数字です。

操作(PCでもOK)

  • 数字キー 1〜6 … 各列にドロップ
  • T … Trash(次ピースを捨てる)
  • C … 列クリアモードのオン/オフ(オンの間に列をタップでその列を丸ごと消去)
  • U … Undo(1手だけ戻る)

よくある質問

Q. 縦が長すぎて見切れます。
A. 盤面の高さはCSSの
height: min(68vh, 560px);
で制御しています。必要に応じて数値を調整してください。

Q. 列をタップしても反応しません。
A. 投稿側でJSが無効の可能性があります。JSは**投稿本文ではなく「カスタムJS」**に入っているか確認してください。

Q. 色を変えたいです。
A. 上部プルダウンのThemeで切り替えできます。テーマの色はCSS内のカスタムプロパティで定義しています。

Q. 列数・行数・落下速度を変えたいです。
A. JSの定数 COLS / ROWS / DROP_MS を変更してください。CSS側の --rows --cols とも一致させると見た目も最適化されます。