【作ってみた】WordPressだけで動く「マージ要素」ミニゲーム — HTML/CSS/JS分離・プラグイン不要

作ってみた/小ネタ

同じ数字を合体させて育てる「マージ要素」タイプのミニゲームを、WordPress標準の カスタムHTML / 追加CSS / カスタムJSだけで動くように作りました。外部ライブラリなし、ES5構文、ローカル自動保存＆Undo対応の軽量実装です。

遊び方（ルール）

  1. タイルを1回目クリックで選択、2回目クリックで移動先を指定。
  2. 同じ数字に置くとマージしてレベル（数字）が1つ上がり、スコア加算。
  3. 手番ごとに次のタイルが盤面の空きマスへ出現。移動だけでもOK。
  4. 移動・マージできなくなったらゲームオーバー。Undoやリセットはいつでも可。

実装のポイント（ざっくり解説）

  • HTML：ルート要素（class="merge-lite-root"）を設置し、属性 data-size で盤面サイズを指定。
  • CSS：コンポーネント名にスコープ（.merge-lite-root ...）を付けてテーマ干渉を低減。
  • JS：ページ内の複数ルートを自動検出してマウント。ローカルストレージでセーブ、配列ボードでロジックを管理。

おわりに

小さなゲームでも、HTML/CSS/JSをきれいに分離しておくと、テーマ変更や最適化プラグインの有無に影響されにくく保守が楽になります。 機能追加（タイムアタック、スコアランキング、エフェクト強化など）も拡張しやすいので、ぜひ遊びながら育ててみてください。