コピペテック @copipetech
ゲーム概要
- Webページのスタイルを指定する仕組みであるCSSをテーマにしたカードゲームです。
- 各プレイヤーが順番にCSSセレクタカードを出して、HTML要素にトークンを置き合い、要素を奪い合います。
- プレイするとCSSがちょっと学べるかもしれません。
| プレイ人数 | 2〜4人 | プレイ時間 | 10〜30分 |
|---|---|---|---|
| 対象年齢 | 15歳〜 | 価格 | 2,500円 |
| 発売時期 | 2023秋 | 予約 | 不可 |
| ゲームデザイン | コピペテック | イラスト・DTP | コピペテック |
ゲーム詳細
「あのCSSセレクタに上書きされたんだけど」はどんなゲーム？
簡単にルールを説明すると、各プレイヤーが順番にCSSセレクタカードを出して、HTML要素にトークンを置き（スタイルを適用し）合い、HTML要素を奪い合って、最終的に一番多くのHTML要素にトークンを置いたプレイヤーの勝ちです。
HTML要素をどう取り合うかは14秒という超短い動画にまとめたので、ご覧ください。
雰囲気つかめたでしょうか？この他人のトークンをどけて自分のトークンを置くことをゲームタイトルの「上書き」と呼んでいます。
なお、「あのCSSセレクタに上書きされたんだけど」は長いので、以降は「あのCSS」と略します。
「あのCSS」の内容物
- CSSセレクタカード：合計36枚
- class name 13枚
- div 9枚
- h1, h2 各3枚
- header, body, footer 各2枚
- !important 2枚
- カラートークン：20個 x 4色
- Webページマップ：B5 1枚
- 説明書：B5 1枚
「あのCSS」のルール・遊び方
簡単なゲームの流れをご紹介します。
1. 最初の手札は5枚
2. CSSセレクタカードを出す
CSSセレクタを言いながら、手札からCSSセレクタカードを出し、Webページマップ上のHTML要素を指定します。
3. カードの枚数だけ自分のトークンを置く
②で宣言したCSSセレクタで指定したHTML要素に自分のトークンを置きます。ここではカードが2枚なので2個のトークンを置けます。
ここで前の14秒動画の通り他のユーザのトークンが既に置かれている要素を上書きすることもできます。
4. 手札が5枚になるように山札から補充します
手札は常に5枚になるようにします。
5. 各プレイヤーが2〜4を繰り返します
2〜4を繰り返して、全プレイヤーのトークンがなくなるか、手札が出せなくなったらゲーム終了です。
6. 勝敗は？
最終的にWebページマップ上のトークンの数が多い人が勝ちです！
製作者的「あのCSS」のおすすめポイント
考えると勝てそうなのに勝ち方がわからない
頭を使えば勝てそうなんだけど、製作者でも勝つ戦略がよくわかりません。勝つ戦略がありそうでよくわからず、運で勝てちゃうこともあるゲームはおもしろいゲームの一つだと製作者は思っているので、その観点でよいバランスで作れたと思います。
現実のCSSを感じられる、かも
けっこう現実のCSSをうまくゲームに落とし込めたと思います。ぜひ非エンジニアの人とも遊んでみてください。
「あのCSS」の裏話
noteに制作秘話なども書いていますので、よければご覧ください。
https://note.com/copipetech/m/m70d0b3af4fcf