はじめに
ダメージ%が増えて、KOされて、FINAL SMASHが飛び出す。
そんなスマブラ風の演出を、テキサスホールデムポーカーに乗せてみました。
その名も 
SMASH POKER
まずは実際にプレイしている様子をご覧ください。
面白そうと思ったら、ぜひ実際に遊んでみてください！
👉 SMASH POKERで遊ぶ
これは何？
一言でいうと「スマブラ風の演出をした本格テキサスホールデムポーカー」です。
普通のポーカーアプリとの違いはこちら。
- チップの増減が、スマブラでおなじみの「ダメージ%」表示に置き換わっている
- 大きく負けると「KO」される
- ここぞという場面で「FINAL SMASH」演出が発動する
- CPU戦は4体のAIファイターとの対戦形式
ルール自体は正統派のテキサスホールデムです。ポーカー経験者なら普通に遊べますし、ルールを知らない人でもスマブラのノリで自然と役を覚えていけると思います。
ブラウザで直接開くだけで動作し、PWA対応なのでスマホのホーム画面に追加してアプリのように起動することもできます。
技術スタック
構成はシンプルで、単一の smash.html の中に完結しており、npm installなどの準備なしにブラウザで開くだけで動く手軽さも特徴です。
| 技術 | 役割 |
|---|---|
| HTML5 | 全体構造・ゲーム画面のベース |
| JavaScript (Vanilla) | ポーカーのゲームロジック、AIファイターの思考処理 |
| Three.js | カード・エフェクトなどの3D演出、FINAL SMASH演出のカメラワーク・パーティクル表現 |
| CSS3 | ダメージ%表示やUIのアニメーション |
工夫したところ
-
ダメージ%とポーカーのリスクをリンクさせる
ポーカーは今どれだけリスクを取っているかが分かりにくいゲームです。それを「ダメージ%」という直感的な指標に変換して、攻めているのか追い詰められているのかが一目で分かるようにしました。
-
FINAL SMASH演出をとにかく派手に
スマブラらしさを出す上で一番こだわったのがFINAL SMASH演出です。文字が画面いっぱいに広がり、画面全体が揺れるような演出を入れました。本来静かなポーカーの決着シーンを、大きな役が決まった瞬間の盛り上がりとして表現できたと思います。
-
初心者でも役がひと目でわかる表示
ポーカー初心者がつまずきやすいのが「自分が今どの役を作れているのか分からない」という点です。フラッシュやスリーカードなど、現在成立している役を画面上に常に表示するようにしました。遊びながら役の名前と強さの感覚を覚えられます。
つまずいた点・学び
-
縦画面（スマホ）に収める画面レイアウト
一番苦労したのはスマホの縦画面に収まるレイアウトでした。SMASH POKERは4人のプレイヤーが同時に登場し、勝負が終わった後には各プレイヤーの手札も表示します。表示する情報量に対して横幅が足りず、要素がすぐ重なったりはみ出したりする問題に何度もぶつかりました。プレイヤーの配置やカードのサイズ、余白を都度調整し直しています。
-
カード表示をシンプルにする
見やすさを優先して、カードのデザインは本物のトランプを模した見た目ではなく、数字とスート（スペード・クローバー・ハート・ダイヤ）だけのシンプルな表示にしました。情報量を絞ったことで、小さい画面でも4人分の手札を瞬時に判別できるようになっています。
まとめ
スマブラの「ダメージ%」「KO」「FINAL SMASH」をポーカーに持ち込んだことで、静かなカードゲームに緊張感と派手さを加えられたと思います。役の表示やスマホ向けレイアウトのような地味な調整も含めて、見た目と遊びやすさの両立にはそれなりに時間がかかりました。
AIの強さ調整や演出のバリエーション追加など、まだ手を入れたい部分もあるので、今後も少しずつアップデートしていきたいと思います！
面白そうと思ったら、ぜひ実際に遊んでみてください！
👉 SMASH POKERで遊ぶ