遠い昔、確か中3の頃だったと思う。
或る日ラジオから流れてきた曲がとても気に入ったのだが、しかしタイトルも曲名も聞き逃してしまった。
覚えているのは
街を歩く
で始まることと、サビが
待ちわびた頃に見つけたなら A happy birthday
であることだけ。
たまにこれを思い出して、検索して、何も見つからずにがっかりするのだった。 そして今日もリフレイン。
さて、蜘蛛の続き。
ゲームの処理を実装する前に、まずフィールドを決めておこう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Spider</title>
<link rel="stylesheet" type="text/css" href="spider.css" />
</head>
<body>
<div id="menu">
<span id="init">新規</span>
<span id="back">戻す</span>
<span id="score">
<span id="success">0</span> 勝
<span id="fail">0</span> 敗
</span>
</div>
<div id="field"></div>
</body\t
</html>
オリジナルの spider はメニューとか設定とか色々あるのだが、俺が使わないものは実装しない。 となると、ゲームの外側に必要なのは次の4項目。
初期化と戻しがクリック操作なので、これに倣って記録のリセットも記録をクリックすることにすれば、記録のリセット用の独立した項目は不要。 この3項目ぐらいなら、画面の端に常時表示させていても邪魔にならないだろう。 ということで css だが、まずはシンプルに必要最小限、必要に応じて後で装飾することとして
* {
margin : 0;
padding : 0;
}
#menu {
position : relative;
left : 0;
top : 0;
width : 100%;
color : #ffffff;
background : #000000;
}
#menu > span {
width : 6em;
font-family : sans-serif;
margin : 0.5em 0 0.5em 2em;
padding : 0.5em;
cursor : pointer;
}
#menu > span:last-child {
width : auto;
}
#field {
position : relative;
left : 0;
top : 0;
width : 100%;
}
あれ？ まずはシンプルにして、後で必要に応じて装飾を… なんて考えながら初めて、実際に後で装飾を付けたことがあったかな。