スパイダーを作るの4

遠い昔、確か中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%;
}

あれ？まずはシンプルにして、後で必要に応じて装飾を… なんて考えながら初めて、実際に後で装飾を付けたことがあったかな。