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

首先我們給游戲?qū)懸粋€起點，Start：

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

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

#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;
}

然后我們在剛才的標(biāo)簽里面寫一個 div 當(dāng)作老鼠，于是就變成了：

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

我再給它一個簡單的樣式：

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

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

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

#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)然其中包含一些為了視覺舒服而做的小變化。另外就是這個 #start>.mouse 是特意規(guī)定了一下第一個 .mouse 的位置，因為這個跟別的有點區(qū)別。

現(xià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)的滑動，逐漸顯示出了一條直線，因為每一只 mouse 都相對于前一只向后偏移了，所以是一條水平的直線，但是這樣沒有變化就顯得毫無趣味了。那么所謂的變化也就是換個偏移的方向而已，實際上就涉及到了兩個屬性——left 和 top。

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

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

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

<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>

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

我的案例玩起來是這個樣子的：

本章代碼下載：本章代碼

本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

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

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

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

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

第四十五章 無聊的寫個小游戲吧

第四十五章無聊的寫個小游戲吧