普段はお客さま向けの業務アプリやモックを作っていますが、今回は完全に趣味です。ふと幽遊白書に出てくるゲーム「スリーセブン」を思い出して、「これ、自分で作れるかも。。」と気になり、勢いでブラウザゲームにしてみました。

https://mocks-psi.vercel.app/three-seven/

スリーセブンのルールはシンプルです。

  • 1〜7の数字が書かれたブロックが、4個ひと組でいろんな形で落ちてくる

  • タテかヨコに並んだ数字の合計が「7」になると消える（連続していれば個数は何個でもOK。3+4、2+3+2、1+2+4 など）

  • ただし名前のとおり、「7」だけは特別。3つ並べないと消えない

  • 時間が経つほど落下が速くなり、上まで積み上がったらゲームオーバー

テトリスやぷよぷよの「消す条件」を“足し算”に置き換えた感じですね。

技術スタック

HTML / CSS / JavaScript のみで作りました。

ファイルは index.html / css/style.css / js/app.js の3つだけ。1ファイルで完結する手軽さは、こういう“週末の思いつき”と相性が良いです。

実装でおもしろかったところ

1. 「合計7で消える」判定ロジック

タテ・ヨコそれぞれの列を走査して、連続したマスの合計がちょうど7になる区間を探して消します。

やっかいなのが「7」の特別ルール。普通に「合計7」で判定すると、7単体でも消えてしまいます。そこで「長さ2以上で合計7」を通常消去とし、「7が3つ連続」だけを別ルールで拾うようにしました。すべて正の数なので、合計が7を超えた時点で打ち切れる――という性質を使うと、7単体は自然に除外できて実装がスッキリします。

4 / 3 / 4 のように重なるケース（上の 4+3 と下の 3+4 が同時成立）も、両方の区間をまとめて消えるようにしてあります。

2. 列重力と連鎖

ブロックが着地したら、ぷよぷよのように各列を下に詰めて、再び消える組み合わせがないかをチェック。消えたらまた詰めて…を繰り返すことで、自然に連鎖が成立します。連鎖数に応じてスコアが伸びるので、ちょっとした中毒性が出ました。

3. ハマったバグ：ブロックが一瞬ダブる

地味に苦戦したのがこれ。ピースを固定 → 列重力で落とす、という流れで、固定したピースの“元の位置の残像”と、落ちた後の本体が一瞬重なって見える現象が出ました。原因は、固定後も「操作中のピース」を描画し続けていたこと。固定した瞬間に操作ピースを破棄してから描画するようにして解決しました。落ちゲーの“見た目の気持ちよさ”は、こういう1フレームの詰めで決まるんだなと実感。

デザインはぷよぷよ風に。

デザインはぷよぷよ寄りのパステルポップにしてみました。可愛い方がやる気が出ます。

ネクスト・ネクネクの表示

やはりぷよぷよとかと同様、ネクストぷよだけじゃなく、ネクネクも見れるようにしたかったのでやってみました。

やってみた感想と攻略のコツ

完成して自分で遊んでみたら…普通に難しい（自分で作ったのに）。

海藤優は「慣れれば何時間でもやっていられる」と言っていたけどとてもできない。。

落ち着いて考えると、コツはこのあたり。

  • 7の補数（1+6 2+5 3+4）を反射で出せるように

  • 「7」は隔離して、1か所で縦に3つを狙う（バラ撒くと詰む）

ただ、3+4が7なのはわかるけど、

例えば、以下のような状態だと、

3

4

3

2

1

「3 + 4」も「4 + 3」も「4 + 2 + 1」も「7」なので、全部消えることになります。

これ瞬時に理解するの無理だ、、、😅

奥が深いゲームでした。

まとめ

普段の業務開発とは違って、「気持ちよさ」や「可愛さ」みたいな感覚的な部分をひたすら詰める時間が新鮮でした。ビルドツールなしの素のHTML/CSS/JSでも、アニメーションやレスポンシブまで含めてちゃんと“遊べるもの”になる、という再確認にもなりました。

よかったら遊んでみてください 👇
▶ https://mocks-psi.vercel.app/three-seven/