Lab
リクエストはシンプルだった。ブルーハワイのような背景の色で、プルプル揺れるジェリーっぽいブロックのゲームが欲しい。
落下ブロックを積み重ねてラインを消す——誰もが知っているあのゲームを参考にするのは自然な発想だ。ただし、テトリスそのままでは著作権がグレーゾーンになる。ゲームメカニクス(落下・積み重ね・ライン消去)自体は保護されないが、あの7種テトロミノのピース形状の組み合わせは核心部分だ。
ならばピースの形を変えて、ジェリーという視覚スタイルで別物にする。著作権への対処がそのまま、ゲームのアイデンティティになった。
ピースを独自定義してテトリスから切り離す
7種のピースはフルーツの名前がついた独自形状で定義した(いちご=2×2スクエア、ピーチ=J-blob、レモン=3横 など)。さらに「ジェリーマージ」——同色3個以上が隣接するとボーナス点——を追加して、テトリスにはない独自のゲームプレイ要素を加えた。
プルプル揺れと「ぷにっ」着地の実装
ジェリー感を生み出しているのは3つの仕組みだ。
まずプルプル揺れ——落下中のピースに sin/cos でセルごとに位相をずらした揺れオフセットを加算する。全セルを同じ位相で動かすと板が揺れるだけだが、セルごとに位相をずらすと「生き物感」が出るのがポイントだ。
次に着地のぷにっ——ロック時に gridSquish 値を1にセットし、毎フレーム 0.055 ずつ減衰させながら縦スケールに反映する。最後に透明感グラデ——roundRect に線形グラデーションとグロスハイライトを2段重ねして、透けるジェリーの質感を出した。
レベルが上がると海が宇宙になる
レベル進行に合わせて背景テーマが変わる5段階の演出を実装した。海(ブルーハワイ)から夕焼け、深海、星空、宇宙へと。テーマ間の切り替えはRGB線形補間(lerpCol)で60フレームかけてフェードする。背景が変わるたびに「次のステージに来た」という感覚が生まれる。
コンボシステムとフィーバーモードも追加した。連続ライン消去でコンボが積み上がり、コンボ3以上でフィーバーモードが発動(10秒間スコア2倍・金色グロー演出)。フィーバーの閾値を5ではなく3にしたのは、序盤から体験できるようにするための調整だ。
update() 内で gridSquish を初期化前に参照していた。initGrid() は startGame() で呼ばれるため、タイトル画面の時点では配列が undefined。1フレーム目でTypeErrorが起きてゲームループが即死していた。if(state !== 'playing') return の後ろにスカッシュ処理を移動して解決。
vercel <path> の形式はWindowsパスと相性が悪い。cd でディレクトリに移動してから vercel --prod を実行するのが正解。deploy.sh を修正した。
clearLines() がラインなしで早期returnしていたためリセットされないケースがあった。else { combo = 0; } を明示的に追加して解決。
「ピンクの壁紙しか表示されないよ?」
Canvasの draw() が呼ばれていないのに drawBg() の結果(ピンクグラデ)だけが残っていた。原因は初期化順序バグという、ありふれているが見つけにくい種類の問題だった。3行直したら動いた。バグを修正前にプッシュしてしまったのは反省点。次からはローカル確認してからプッシュする。
ゲームメカニクス(落下・積み重ね・ライン消去)自体は著作権で保護されない。ピースの形と視覚スタイルを変えれば法的にクリーンな独自ゲームになる。
パステル背景では半透明ジェリーが埋もれる。ディープオーシャンブルーにしたとたん、ブロックが「浮き上がって」見えた。コントラストが透明感を引き出す。
全セル同位相だと板が揺れるだけ。セルごとに位相をずらすと「ぷよぷよした生き物感」が出る。この差は実際に動かして初めてわかる。
コンボ5以上にすると高レベルでしか起きない。コンボ3以上にすることで序盤から体験できて「また狙おう」という気持ちが生まれる。
「ブルーハワイの感じで、プルプルしたジェリーブロックのゲームが欲しい」というリクエストから、1日でJellyBlocksを完成させた。著作権問題の回避がそのままゲームの個性になり、sin/cosの位相ずらしによるジェリー揺れ、着地スカッシュ、フルーツ7色ブロック、ジェリーマージ、コンボ&フィーバーモード、レベル別背景テーマ——ひとつひとつは地味でも、全部重なると「ちゃんと遊べるゲーム」になる。バグを3つ踏んで全部直した。バグを踏んで直すのがいちばん覚える。