暇だった。
正確に言うと、やるべきことは山ほどあるのに、
「今それやる気は起きない」タイプの暇だ。
こういうとき、脳は碌でもないことを言い出す。
ぷよぷよ、作れるんじゃね？
本当にそれだけだった。
http://kero2fog.com/wp-content/uploads/2025/12/keropuyo2.html
重いエンジンも要らない。 3Dでもない。 ブラウザで動けば十分。
HTMLとCanvasとJavaScriptだけで、
丸い何かが落ちて、4つつながったら消える。
その程度のものを想定していた。
――この時点では、まだ蛙は出てきていない。
ぷよぷよは、ただ落ちればいいわけじゃない
実際に作り始めると、すぐに違和感が出た。
あれ？ なんかテトリスっぽくない？
原因はシンプルだった。
- 固定した瞬間に確定してしまう
- 消える時に一瞬で消える
これだと「落ち物ゲーム」ではあっても、ぷよぷよではない。
ぷよぷよらしさって、実はかなり繊細だ。
- 着地しても、ちょっと粘れる
- ギリギリで回転が間に合う
- 消える前に「今から消えるぞ」という溜めがある
ここを再現しないと、脳が納得しない。
着地後の“ちょい猶予”を入れる
まず入れたのがロックディレイ。
下にもう落ちない状態でも、
- 数ステップだけ猶予を持たせる
- その間に移動や回転が成功したら、猶予を復活
これだけで、操作感が一気に「ぷよ」になる。
落ち物ゲームの正体は、
アルゴリズムじゃなくて、体感だと実感した。
連鎖は“演出”が本体
次の違和感はこれ。
消えるの、早すぎる
ぷよぷよの連鎖って、
結果じゃなくて過程を見せるゲームなんだよな。
そこで、
- 消える前に点滅
- 少し間を置いて消滅
- 落下 → 次の連鎖判定
という流れに変更した。
さらに、
- 「1れんさ！」「2れんさ！」の文字表示
- 連鎖数に応じてSEを変化
これでようやく「ゲームをしている感じ」が出てきた。
ぷよが、全然蛙じゃない問題
ここで致命的な指摘が入る。
ぷよ、全然かえるじゃないな
たしかにそうだった。
丸い玉に目を付けただけでは、蛙ではない。
そこで見た目を全面改修。
- 目玉の出っ張り（カエル特有の頭）
- ちょっとした口とほっぺ
- 手足っぽいシルエット
- 社畜なのでネクタイ
結果、
ぷよぷよではなく、蛙が落ちてくるゲームになった。
ゲームオーバーで社畜蛙は倒れる
せっかくなので、
ゲームオーバーもちゃんと演出した。
- 画面暗転
- 「社畜蛙、力尽きる…」の文字
- ネクタイを締めた蛙が落ちてきて、倒れる
こういう無駄な演出は、
一度入れると削れなくなる。
技術的な話：なぜ“ゲームらしく”なるのか
使っている技術は驚くほど単純だ。
- HTML + Canvas
- 素のJavaScript
- 外部ライブラリなし
描画はすべてCanvas上での図形描画。
画像素材もスプライトも使っていない。
ぷよが“ぷよ”になる条件
実装していて一番重要だったのは、
ロジックよりも時間だった。
- いつ落ちるか
- いつ確定するか
- いつ消えるか
これを少しでも間違えると、
途端にテトリスになる。
具体的には、
- 着地後すぐ確定 → ✕
- 消去が即時 → ✕
そこで、
- ロックディレイ（着地後の猶予）
- 消去前の点滅アニメーション
- 連鎖間の“間”
を意図的に入れた。
連鎖処理は同期しない
連鎖は「計算」ではなく「演出」なので、
一気に解決しない。
- 消える対象をまず集める
- 点滅させる
- 少し待ってから消す
- 重力をかける
- 次の連鎖を判定する
この一連を async / await で順番に処理している。
結果として、
コードは少し長くなったが、
見て分かる連鎖になった。
図形だけで蛙を描く
見た目もすべてコードだ。
- 円と楕円で体を作る
- 目玉の出っ張りで蛙感を出す
- 口・ほっぺ・手足は雰囲気
「それっぽく見える最小構成」を探すのは、
地味だが一番楽しい作業だった。
まとめ：ぷよぷよは設計思想の塊
今回作ってみて分かったのは、
ぷよぷよは「消えるゲーム」じゃないということ。
- 粘り
- 間
- 演出
この3つが揃って、初めてぷよぷよになる。
そして気づいたら、
ぷよは消えて、蛙だけが残った。
次はスコアか、難易度か、
それとも本当に誰かに遊ばせるか。
まあ、暇なときに続きを作ればいい。
―― 蛙は今日も落ちる。
