背景簡(jiǎn)介

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

一、思路分析

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

二、頁(yè)面搭建

2.1 HTML層

2.2 CSS層

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

全局設(shè)置樣式

1. *{
2. margin:0;
3. padding:0;
4. }

wrapper樣式設(shè)置樣式

1. .wrapper{
2. margin:150px auto;
3. width:400px;
4. height:600px;
5. border:1px solid #ccc;
6. position: relative;
7. overflow: hidden;
8. }

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

1. #go{
2. width:100%;
3. position: absolute;
4. top:0;
5. text-align: center;
6. z-index:99;
7. }

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

1. #go a{
2. display:block;
3. height:100px;
4. width:400px;
5. color:cyan;
6. background-color: #000000;
7. text-decoration: none;
8. border-bottom:3px dashed #eee;
9. font-size:60px;
10. font-weight:600;
11. }

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

1. #main{
2. width:400px;
3. height:600px;
4. position: relative;
5. top:-150px;
6. /* border:1px solid black; */
7. }

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

1. .row{
2. width:400px;
3. height:150px;
4. }

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

1. .row div{
2. width:99px;
3. height:149px;
4. border-left:1px solid #222;
5. border-bottom:1px solid #222;
6. float: left;
7. cursor: pointer;
8. }

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

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

2.3 JS層

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

2.3.1獲取元素

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

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

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

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

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

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

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

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

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

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

2.3.5 游戲開(kāi)始

1. // 開(kāi)始按鈕點(diǎn)擊 開(kāi)始移動(dòng) 創(chuàng)建每一行元素
2. function clickStart() {
3. go.addEventListener('click', function () {
4. go.style.display = 'none';
5. move();
6. });
7. }
8. clickStart();

大致效果如圖所示：

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

三、總結(jié)

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

原文鏈接：https://mp.weixin.qq.com/s/_RScuUKKcU4MVl5wx-q93A