[[435733]]

背景簡介

別踩白板這個游戲相信大家都玩過，這個是基于HTML5打造的簡單小游戲，在PC端和移動端都能夠運(yùn)行，適應(yīng)多種平臺，今天我們使用原生JS搭配JQuery構(gòu)建這個小游戲--別踩白板。

一、思路分析

整體頁面是一個大的矩形，長寬比例大概是3：2，然后游戲開始，不斷有白板降落，然后一行是4個板，一塊黑色板塊，其余三塊是白色板塊，通過板塊的點(diǎn)擊事件綁定，然后判定是什么顏色，只要是白色的，游戲結(jié)束(Game Over), 否則玩家積分加1;

二、頁面搭建

2.1 HTML層

<div class="wrapper"> 
        <div id="go"> 
            <a href="javaScript:void(0)" id="go">Game Start</a> 
        </div> 
        <div id="main"></div> 
</div> 

2.2 CSS層

在樣式設(shè)置前還是先了解大致結(jié)構(gòu),如下所示:

全局設(shè)置樣式

*{ 
    margin:0; 
    padding:0; 
} 

wrapper樣式設(shè)置樣式

.wrapper{ 
    margin:150px auto; 
    width:400px; 
    height:600px; 
    border:1px solid #ccc; 
    position: relative; 
    overflow: hidden; 
} 

wrapper下面的go的設(shè)置樣式

#go{ 
    width:100%; 
    position: absolute; 
    top:0; 
    text-align: center; 
    z-index:99; 
} 

開始游戲按鈕設(shè)置樣式

#go a{ 
    display:block; 
    height:100px; 
    width:400px; 
    color:cyan; 
    background-color: #000000; 
    text-decoration: none; 
    border-bottom:3px dashed #eee; 
    font-size:60px; 
    font-weight:600; 
} 

 main(方塊)設(shè)置樣式

#main{ 
    width:400px; 
    height:600px; 
    position: relative; 
    top:-150px; 
    /* border:1px solid black; */ 
} 

創(chuàng)建出來的每一行方塊設(shè)置樣式

.row{ 
    width:400px; 
    height:150px; 
} 

一行中的四個小方塊的設(shè)置樣式

.row div{ 
   width:99px; 
   height:149px; 
   border-left:1px solid #222; 
   border-bottom:1px solid #222; 
   float: left; 
   cursor: pointer; 
} 

在設(shè)置好樣式之后,得到的大致界面如下所示:

可以看到界面樣式比較簡單,我們的想法是點(diǎn)擊Start Game 按鈕后方塊自動降落,所以屏幕比較空(暫時)。

2.3 JS層

js層主要用來控制頁面產(chǎn)生動態(tài)效果;比如產(chǎn)生方塊,以及方塊的移動等等;

2.3.1獲取元素

var main = document.getElementById('main'); // 獲取dom元素 
var go = document.getElementById('go');  
var speed = 5, num = 0, timer, flag = true; // 設(shè)置初始變量 
var colors = ['red', 'green', 'black', 'blue']; // 設(shè)置存放顏色的數(shù)組 

這里存放顏色的數(shù)組不需要白色,每一個初始化出來的方塊不設(shè)置背景顏色,它默認(rèn)是白色。

2.3.2創(chuàng)建每一行div元素

前面我們說過,一行是四個方塊,比例和大方塊一樣(3:2),它的長寬是:{width: 100px ; height: 150px};

function cDiv() { 
    var oDiv = document.createElement('div');// 獲取一個隨機(jī)數(shù)將每一行找到一個隨機(jī)div 設(shè)置上顏色 
    var index = Math.floor(Math.random() * 4); 
     
    oDiv.setAttribute('class', 'row'); // 設(shè)置行class類名 
    for (var j = 0; j < 4; j++) { // for循環(huán)生成一行四個div 
        var iDiv = document.createElement('div'); 
        oDiv.appendChild(iDiv); // 將每一個小div插入每一行中 
    } 
     
    if (main.childNodes.length == 0) { // 根據(jù)父級中是否有子元素   插入新生成的行 
        main.appendChild(oDiv);  // 如果父級為空  直接插入 
    } else { 
        main.insertBefore(oDiv, main.childNodes[0]); // 如果父級有元素   將新生成的一行插入到已有行數(shù)的最前面 
    }  
    var clickDiv = main.childNodes[0].childNodes[index]; // 根據(jù)隨機(jī)數(shù) 設(shè)置一行中有顏色的div 
    clickDiv.setAttribute('class', 'i'); // 將此元素設(shè)置class類名  作為需要點(diǎn)擊的標(biāo)記 
    clickDiv.style.backgroundColor = colors[index]; // 同時設(shè)置上背景顏色 
} 

2.3.3點(diǎn)擊事件函數(shù)封裝

function bindEvent() { 
    main.addEventListener('click', function (event) { // 給main添加點(diǎn)擊事件 
        if (flag) {  // 根據(jù)flag值判斷是否可以點(diǎn)擊 
            var tar = event.target;  // 獲得到點(diǎn)擊的源事件 
            if (tar.className == 'i') { // 判斷點(diǎn)擊的塊是否為有顏色的  
                tar.style.backgroundColor = '#bbb'; // 改變背景顏色  
                tar.classList.remove('i'); // 移除class類名                
                num++;   // 計(jì)數(shù)++ 
            } else {                 
                alert('游戲結(jié)束，得分：' + num); // 如果點(diǎn)到了白色的塊   游戲結(jié)束 
                clearInterval(timer); 
                flag = false; 
            }             
            if (num % 10 == 0) { // 如果當(dāng)前分?jǐn)?shù)為10的倍數(shù)   速度++ 
                speed++; 
            } 
        } 
    }) 
} 

2.3.4 方塊移動函數(shù)封裝

function move() { 
    clearInterval(timer);  
    timer = setInterval(function () { // 設(shè)置定時器 
        var step = parseInt(main.offsetTop) + speed; // 利用top值移動main區(qū)域 
        main.style.top = step + 'px'; 
        if (parseInt(main.offsetTop) >= 0) { // 如果main區(qū)域移動到可視區(qū)域 創(chuàng)建一行新的元素 
            cDiv(); 
            main.style.top = '-150px'; // 同時將main區(qū)域移動到可視區(qū)域上方 
        } 
        var len = main.childNodes.length; // 獲得mian區(qū)域內(nèi)的行數(shù) 
        if (len == 6) {  // 如果main區(qū)域內(nèi)行數(shù)為6   即顯示區(qū)域四行  上面新生成一行  下面一行 
             
            for (var i = 0; i < 4; i++) { // 遍歷最后一行的每一個div 
                 
                if (main.childNodes[len - 1].children[i].classList.contains('i')) { // 如果其中有一個包含沒有被點(diǎn)擊的   游戲結(jié)束 
                    alert('游戲結(jié)束，得分：' + num); 
                    clearInterval(timer); 
                    flag = false; // 游戲結(jié)束后不可以繼續(xù)點(diǎn)擊 
                } 
            } 
             
            main.removeChild(main.childNodes[len - 1]); // 將展示過后的每一行移除 
        } 
    }, 20) 
    bindEvent(); // 點(diǎn)擊事件 
} 

在函數(shù)里面第一句就是clearInterval(timer);防止定時器多開;

2.3.5 游戲開始

// 開始按鈕點(diǎn)擊   開始移動 創(chuàng)建每一行元素 
function clickStart() { 
    go.addEventListener('click', function () { 
        go.style.display = 'none'; 
        move(); 
    }); 
} 
clickStart(); 

大致效果如圖所示：

這個是使用到HbuilderX中的內(nèi)置瀏覽器的界面,游戲結(jié)束效果如上圖所示。

三、總結(jié)

本文我們使用到原生js打造了簡單觸屏游戲------別踩白板，對于游戲有簡單的改動?？傮w來說首先我們需要設(shè)置好游戲界面大致結(jié)構(gòu)和樣式,然后通過原生js控制方塊的產(chǎn)生移動,以及點(diǎn)擊等等,最終才呈現(xiàn)了一個合適的完整的界面效果;感興趣的小伙伴可以去試一下。