當(dāng)然了，沒(méi)有 JS 這種靈活的東東，我們不可能做很復(fù)雜的動(dòng)態(tài)游戲。但是如果你肯開(kāi)發(fā)思路的話，確實(shí)可以實(shí)現(xiàn)一些完整的游戲過(guò)程，雖然確實(shí)很簡(jiǎn)單，但是可玩性，以及游戲體驗(yàn)卻也未必很差。

那么今天我們來(lái)做一個(gè)貓咪抓老鼠的小游戲。你看說(shuō)的好聽(tīng)，其實(shí)就是不斷把鼠標(biāo)移動(dòng)到一個(gè)小小的紅色方塊的過(guò)程，你把它當(dāng)成鼠標(biāo)走迷宮也可以，總之鼠標(biāo)要是沒(méi)有能夠準(zhǔn)確的移動(dòng)到下一個(gè)預(yù)定位置就算失敗。如果我們把目標(biāo)點(diǎn)設(shè)置的小一些，那么難度還是很大的。

首先我們給游戲?qū)懸粋€(gè)起點(diǎn)，Start：

<div id="start">Start</div>

至于 CSS，我就把上節(jié)課那只紅色按鈕簡(jiǎn)單修改了一下，所以不解釋嘍~

#start {
    width: 64px;
    height: 64px;
    padding: 4px;
    position: relative;
    background: #CC0000;
    border: 5px solid #CCCCFF;
    border-radius: 40px;
    font-size: 16px;
    color: #FCFCFC;
    line-height: 64px;
    text-align: center;
}

然后我們?cè)趧偛诺臉?biāo)簽里面寫(xiě)一個(gè) div 當(dāng)作老鼠，于是就變成了：

<div id="start">Start
    <div class="mouse"></div>
</div>

我再給它一個(gè)簡(jiǎn)單的樣式：

.mouse {
    display: none;
    width: 10px;
    height: 10px;
    background: #CC0000;
    position: absolute;
    left: 10px;
    top:0;
}

寫(xiě)到這里你就發(fā)現(xiàn)了，這跟彈出菜單很像啊。對(duì)啊，我就是讓鼠標(biāo)放在一個(gè)元素上，就會(huì)彈出它的內(nèi)部元素，再放到彈出的元素上，又彈出內(nèi)部元素……如此玩下去，鼠標(biāo)一旦位置放錯(cuò)，這些彈出就都隱藏了，于是……游戲失敗。

那么顯然的我就寫(xiě)下了如下的觸發(fā)動(dòng)作：

#start:hover {
    background: #CCCCFF;
}
#start>.mouse {
    left: 74px;
    top: 35px;
}
#start:hover>.mouse {
    display: block;
}
.mouse:hover {
    background: #CCCCFF;
}
.mouse:hover>.mouse {
    display: block;
}

當(dāng)然其中包含一些為了視覺(jué)舒服而做的小變化。另外就是這個(gè) #start>.mouse 是特意規(guī)定了一下第一個(gè) .mouse 的位置，因?yàn)檫@個(gè)跟別的有點(diǎn)區(qū)別。

現(xiàn)在的問(wèn)題就是 .mouse 里面嵌套 .mouse 了，就像下面這樣：

<div id="start">Start
    <div class="mouse">
        <div class="mouse">
            <div class="mouse">
                <div class="mouse">
                    <div class="mouse">
                        <div class="mouse">
                            <div class="mouse"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

你可以試一下，隨著你鼠標(biāo)的滑動(dòng)，逐漸顯示出了一條直線，因?yàn)槊恳恢?mouse 都相對(duì)于前一只向后偏移了，所以是一條水平的直線，但是這樣沒(méi)有變化就顯得毫無(wú)趣味了。那么所謂的變化也就是換個(gè)偏移的方向而已，實(shí)際上就涉及到了兩個(gè)屬性——left 和 top。

于是我再定義幾個(gè)類(lèi)，產(chǎn)生一些變化。

.md {
    left: 0;
    top: 10px;
}
.ml {
    left: -10px;
    top: 0;
}
.mu {
    left: 0;
    top: -10px;
}

.md 是向下偏移，.ml 向左，.mu 向上，至于向右，.mouse 不就是么？然后這么寫(xiě)：

<div id="start">Start
    <div class="mouse">
        <div class="mouse">
            <div class="mouse md">
                <div class="mouse md">
                    <div class="mouse md">
                        <div class="mouse ml">
                            <div class="mouse ml"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我就不多寫(xiě)了，你可以自由組合著玩，最后在里面再寫(xiě)一個(gè) #end 來(lái)作為結(jié)束，就算大功告成。我寫(xiě)了一個(gè)案例，你可以下載來(lái)玩，當(dāng)然也要認(rèn)真想想都是為什么，然后你能想出什么有趣的玩法嗎？

我的案例玩起來(lái)是這個(gè)樣子的：

本章代碼下載：本章代碼

本書(shū)是收費(fèi)的，不過(guò)交費(fèi)憑自覺(jué)。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書(shū)將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡(jiǎn)書(shū)： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me