「あのCSSセレクタに上書きされたんだけど」〜HTML要素を奪い合う陣取りカードゲーム〜

2023年5月11日 19:13

今までカードゲームの製作過程を紹介してきましたが、ついにカードゲーム自体の紹介をしたいと思います！

2023/11/29更新: ゲームマーケット2023秋での販売情報を追加しました！
2023/05/19更新: プレイ動画を公開しました！

「あのCSSセレクタに上書きされたんだけど」はどんなゲーム？

Webページのスタイルを指定する仕組みであるCSSをテーマにしたカードゲームです。

簡単にルールを説明すると、各プレイヤーが順番にCSSセレクタカードを出して、HTML要素にトークンを置き（スタイルを適用し）合って、HTML要素を奪い合って、最終的に一番多くのHTML要素にトークンを置いたプレイヤーの勝ちです。

HTML要素をどう取り合うかは14秒という超短い動画にまとめたので、ご覧ください。

雰囲気つかめたでしょうか？この他人のトークンをどけて自分のトークンを置くことをゲームタイトルの「上書き」と呼んでいます。

なお、「あのCSSセレクタに上書きされたんだけど」は長いので、以降は「あのCSS」と略します。

CSSセレクタカードで要素を指定してトークンを置くことは、CSSセレクタで要素を指定して要素にスタイルを適用することに対応しています。

上の動画を例にして説明すると、以下のようなCSSでHTML要素にスタイルを適用することをイメージしています。(1)で.title要素の背景色を赤にしています。しかし、(1)より(2)のCSSセレクタの方が詳細度が高い（強い）ので、この.title要素は(2)が優先されて背景が青になります。

/* （１） */
h1.title {
  background-color: red;
}

/* （２） */
header h1.title {
  background-color: blue;
}

詳しくは以下の説明書をご覧いただくとして、ここでは簡単なゲームの流れをご紹介します。

CSSセレクタを言いながら、手札からCSSセレクタカードを出し、Webページマップ上のHTML要素を指定します。

②で宣言したCSSセレクタで指定したHTML要素に自分のトークンを置きます。ここではカードが2枚なので2個のトークンを置けます。

ここで前の14秒動画の通り他のユーザのトークンが既に置かれている要素を上書きすることもできます。

手札は常に5枚になるようにします。

2〜4を繰り返して、全プレイヤーのトークンがなくなるか、手札が出せなくなったらゲーム終了です。

最終的にWebページマップ上のトークンの数が多い人が勝ちです！

プレイ動画の編集が完了しました！どんな感じでプレイするのかが伝わりやすいと思うのでぜひご覧ください。

頭を使えば勝てそうなんだけど、製作者でも勝つ戦略がよくわかりません。勝つ戦略がありそうでよくわからず、運で勝てちゃうこともあるゲームはおもしろいゲームの一つだと製作者は思っているので、その観点でよいバランスで作れたと思います。

けっこう現実のCSSをうまくゲームに落とし込めたと思います。ぜひ非エンジニアの人とも遊んでみてください。

ゲームマーケット2023秋で販売します。そんなに売れるとは思わないのですが、今回は100個ありますので、余裕を持ってお買い求めいただけるかと思います。

＜こちらのイベントは終了しました＞

技術書典14のオフライン会場のみで買えます。限定42個の発売なので、ご興味ある方はぜひお早めにお越しください！技術書典は入場券（無料）の購入が必要ですので、お気をつけて。

また、「あのCSS」のページができています。こちらで💚（緑のハート）を押しておくと、当日ブースの場所をチェックしやすくなるので、ぜひ💚を押してください。

なお、けっこう自作の部分が多くて製作が大変すぎたので、今のところ売り切れても再販の予定はありません🙏

この記事が気に入ったらサポートをしてみませんか？