目錄

• 背景簡介
• 一、思路分析
• 二、頁面搭建
• 2.1 HTML層
• 2.2 層
• 2.3 層
• 2.3.1獲取元素
• 2.3.2建立每一行div元素
• 2.3.3點選事件函式封裝
• 2.3.4 方塊移動函式封裝
• 2.3.5 遊戲開始
• 三、總結

背景簡介

別踩白板這個遊戲相信大家都玩過，這個是基於HTML5打造的簡單小遊戲，在PC端和移動端都能夠執行，適應多種平臺，今天我們使用原生JS搭配構建這個小遊戲--別踩白板。

一、思路分析

整體頁面是一個大的矩形，長寬比例大概是3：2，然後遊戲開始，不斷有白板降落，然後一行是4個板，一塊黑色板塊，其餘三塊是白色板塊，通過板塊的點選事件繫結，然後判定是什麼顏色，只要是白色的，遊戲結束（Game Over),否則玩家積分加1；

二、頁面搭建

2.1 HTML層

<div class="wrapper">
        <div id="go">
            <http://www.cppcns.coma href=":void(0)" id="go">Game Start</a>
        </div>
        <div id="main">
</div></div>

2.2 CSS層

在樣式設定前還是先了解大致結構,如下所示:

全域性設定樣式

*{
    margin:0;
    padding:0;
}

wrapper樣式設定樣式

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

wrapper下面的go的設定樣式

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

開始遊戲按鈕設定樣式

#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(方塊)設定樣式

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

創建出來的每一行方塊設定樣式

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

一行中的四個小方塊的設定樣式

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

在設定好樣式之後,得到的大致介面如下所示:

可以看到介面樣式比較簡單,我們的想法是點選Start Game 按鈕後方塊自動降落,所以螢幕比較空(暫時)。

2.3 JS層

js層主要用來控制頁面產生動態效果;比如產生方塊,以及方塊的移動等等;

2.3.1獲取元素

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

這裡存放顏色的陣列不需要白色,每一個初始化出來的方塊不設定背景顏色,它預設是白色;

2.3.2建立每一行div元素

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

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

2.3.3點選事件函式封裝

function bindEvent() {
    main.addEventListener('click',function (event) { // 給main新增點選事件
        if (flag) {  // 根據flag值判斷是否可以點選
            var tar = event.target;  // 獲得到點選的源事件
            if (tar.className == 'i') { // 判斷點選的塊是否為有顏色的 
                tar.style.backgroundColor = '#bbb'; // 改變背景顏色 
                tar.classList.rehttp://www.cppcns.commove('i'); // 移除class類名               
                num++;   // 計數++
            } else {                
                alert('遊戲結束，得分：' + num); // 如果點到了白色的塊   遊戲結束
                clearInterval(timer);
                flag = false;
            }            
            if (num % 10 == 0) { // 如果當前分數為10的倍數   速度++
                speed++;
            }
        }
    })
}

2.3.4 方塊移動函式封裝

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

在函式裡面第一句就是clearInterval(timer);防止定時器多開;

2.3.5 遊戲開始

// 開始按鈕點選   開始移動 建立每一行元素
function clickStart() {
    go.addEventListener('click',function () {
        go.style.display = 'none';
        move();
    });
}
clickStart();

大致效果如圖所示:

這個是使用到HbuilderX中的內建瀏覽器的介面,遊戲結束效果如上圖所示;

三、總結

本文我們使用到原生js打造了簡單觸屏遊戲------別踩白板，對於遊戲有簡單的改動。總體來說首先我們需要設定好遊戲介面大致結構和樣式,然後通過原生js控制方塊的產生移動,以及點選等等,最終才呈現了一個合適的完整的介面效果;感興趣的小夥伴可以去試一下。

到此這篇關於html+css+js實現別踩白板小遊戲的文章就介紹到這了,更多相關html+css+js別踩白板遊戲內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多NaJehd多支援我們！