自主制作CPU対戦パズルHTML / CSS / JavaScript

CHAIN CLASH ARENA

L字の3セルを動かし、同色を縦・横・斜めに3個以上そろえます。不発弾をためて自動供給される点火爆弾で連爆し、20人のCPUファイターを突破するブラウザーゲームです。

ゲームで遊ぶ
CHAIN CLASH ARENA / GATE 01
プレイヤーとCPUの8列14行盤面、操作ボタン、オリジナル格闘家を表示した対戦画面
一人用CPU戦、20ステージ、20人のオリジナル3D格闘家、PC・スマートフォン操作、効果音、進行保存まで実装しています。ゲームで遊ぶ

映像で確認できる挙動を、独立した仕組みとして組み直す

参考映像から、落下物の形、移動と回転、色の消え方、着地後の重力、爆弾の供給周期、下からのせり上がり、敗北までを受入条件へ分解しました。内部数値が映像から確定できない部分は設定表へ分離し、見える結果を比較しながら調整できる構成です。

ルールの考え方だけを参照し、名称、ロゴ、キャラクター、ブロックの顔、画面配置、配色、台詞、音楽、効果音、背景は新規に設計しています。

盤面
各対戦者8列×14行、上部4行を出現・危険領域として表示
落下物
3セルのL字、左右移動、落下加速、左右回転
追加しない操作
HOLD、即時着地、任意の爆弾生成・起爆
敗北
上部中央の出現位置が塞がり、次の落下物を出せない状態
独自性
人物、名称、UI、配色、音、演出、全20ステージを新規制作

4方向の3個消しと、セル単位で落ちる連鎖

同じ色を横、縦、右上がり斜め、右下がり斜めのどれかに3個以上並べると、一度に該当セルを消します。4個以上、交差、複数列の同時成立にも対応します。

L字は着地後も固まりのまま残りません。支えのない各セルが列ごとに下へ落ち、再び3個以上がそろえば2連鎖、3連鎖と解決を続けます。

一致方向
横、縦、右上がり斜め、右下がり斜め
必要数
同色3個以上を一直線
重力
着地後と消去後に、支えのないセルを列ごとに落下
連鎖
消去、重力、再判定を新しい一致がなくなるまで反復
検査
4方向、4個列、交差、複数連鎖を固定盤面で自動確認

消すほど自分に不発弾が上がり、点火の一手が攻撃になる

色を消すと、自分の盤面下から不発弾が列ごとにせり上がります。通常ピースを3回置いた次は、単セルの点火爆弾が自動で現れます。着地すると十字方向へ爆風が伸び、不発弾へ触れるたびに連爆します。

通常の色セルは十字爆風を通し、妨害セルは爆風で除去されます。まとめて爆破した量に応じて相手盤面の下から妨害セルを押し上げます。CORE BREAKゲージが満タンになると、次の落下物が広い範囲を消す大爆弾へ変わります。

不発弾
色消去に応じ、自分の盤面下から順にせり上がる
点火爆弾
3回の通常ピースの次、4回目に自動供給
爆風
十字方向へ伸び、触れた不発弾からさらに十字へ連爆
妨害
色合わせでは消えず、爆風だけで除去
大爆弾
ゲージ満タン後の次の落下物として自動供給

同じ物理を使うCPUを、20段階で少しずつ強くする

20人のCPUはプレイヤーと同じ落下周期、ピース供給、爆弾周期、盤面物理を使用し、盤面の書き換えや任意起爆は行いません。置ける位置と4方向の回転を評価し、消去数、連鎖、穴、高さ、凹凸、中央の危険を比べて一手を選びます。

ステージが上がるほど判断間隔、誤配置率、誤配置時に選ぶ候補幅を小さくします。乱数は判断結果にかかわらず同じ回数だけ進め、難度を上げたCPUだけが別の偶然へ分岐しないようにしています。1〜4、5〜8、9〜12、13〜16、17〜20を難度帯として表示しつつ、各ステージの実戦結果も固定条件で比較します。

ステージ
全20戦、勝利時だけ次のゲートを解放
人物
ステージと1対1で対応する20人のオリジナル3D格闘家
CPU評価
消去、連鎖、穴、高さ、凹凸、中央の危険を比較
難度上昇
判断間隔、誤配置率、誤配置時の候補幅を20段階で縮小
保存
解放ステージと最高得点を同じブラウザー内へ保存

キーボードと、常設した6つのタッチ操作

PCでは左右キーで移動、下キーで落下加速、Z・Xで左右回転、Pでポーズします。スマートフォンでは左、右、落下加速、左回転、右回転、ポーズの6ボタンを盤面下へ常設しました。

左右ボタンは一回押すと1列、長押しすると連続移動します。縦向きでは両盤面と6操作を上下にまとめ、横向きでは操作部を右側へ移して盤面の高さを確保します。音を使わなくても、連鎖、攻撃、受信量、結果を文字とゲージで確認できます。

PC
← →、↓、Z / X、P
スマートフォン
左、右、落下加速、左回転、右回転、ポーズ
長押し
左右は連続移動、下は押している間だけ落下を加速
画面方向
縦向きと横向きの両方で盤面と操作を同時表示
配慮
フォーカス表示、遊び方、音切替、進行記録の消去

20人の選択画面と、実際に動く対戦画面

掲載画像はコンセプト画ではなく、完成したブラウザーゲームを動作させて撮影しています。