htmlとかcssとかjsとか　～視聴者参加型ゲーム「闘賽」を作る上での自分用メモ　その1

トランプゲームが頓挫してしまってます。ちょっとこれは時間がかかりそうです。逆に何か他のことを軌道に乗せれば出来るようになるんじゃないかという意味も込めて、過去にやっていたゲームを再開させようと画策してる次第です。

ここで「闘賽」というゲームの説明を軽くさせていただきます。正確には「闘賽トーナメント　サイコロバトルトーナメント　シーズン２」と銘打っています。過去にやっていたゲームは「サイコロバトルトーナメント」でして、それのバージョンアップ版ということになります。

すごくおおざっぱな説明をすると、赤サイドと青サイドに分かれたキャラの戦いで、４色のサイコロを振って赤のサイコロの出目が大きいなら赤の攻撃、青のサイコロの出目が大きいなら青の攻撃という具合で、どちらかがやられたら試合終了。といった具合です。トーナメントとあるように、トーナメント形式で優勝者を決めます。もともとこの企画は僕がトーナメント大会を開きたかったから始めたという経緯もあるんです。

さて、では本題。ここに何を書いていくかというと、このゲームの内容とかそういうことではございません。以前はエクセルでやっていたゲームなんですが、今回はウェブに舞台を移そうとしてまして、となるとウェブ上にフィールドを作っていかないといけません。ただ、いつものことなんですが、htmlはまだ良いとしてもcssとjsに関しては、作ってる時に覚えてもすぐ忘れちゃうので、整理の意味も込めてここにメモしていこうということです。例えるなら、こういうことを書いていきます。

CSSの冒頭にいつも書くヤツです。コメントアウトもどう書くか忘れがちです。

/* とりあえず全ての要素のマージンとパディングを消しておきましょう */
* {
  margin: 0;
  padding: 0;
}

こんな感じにメモっていきます。

あと、CSSをいじった後に結果を確かめる時は、更新だけじゃなくシフト押しながらの更新も忘れずに。