背景簡(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層
<div class="wrapper">
<div id="go">
<a href="javaScript:void(0)" id="go">Game Starta>
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;
}開(kāi)始游戲按鈕設(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)建出來(lái)的每一行方塊設(shè)置樣式
.row{
width:400px;
height:150px;
}一行中的四個(gè)小方塊的設(shè)置樣式
.row div{
width:99px;
height:149px;
border-left:1px solid #222;
border-bottom:1px solid #222;
float: left;
cursor: pointer;
}在設(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獲取元素
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ù)組不需要白色,每一個(gè)初始化出來(lái)的方塊不設(shè)置背景顏色,它默認(rèn)是白色;
2.3.1創(chuàng)建每一行div元素
前面我們說(shuō)過(guò),一行是四個(gè)方塊,比例和大方塊一樣(3:2),它的長(zhǎng)寬是:{width: 100px ; height: 150px};
function cDiv() {
var oDiv = document.createElement(div);// 獲取一個(gè)隨機(jī)數(shù)將每一行找到一個(gè)隨機(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)生成一行四個(gè)div
var iDiv = document.createElement(div);
oDiv.appendChild(iDiv); // 將每一個(gè)小div插入每一行中
}
if (main.childNodes.length == 0) { // 根據(jù)父級(jí)中是否有子元素 插入新生成的行
main.appendChild(oDiv); // 如果父級(jí)為空 直接插入
} else {
main.insertBefore(oDiv, main.childNodes[0]); // 如果父級(jí)有元素 將新生成的一行插入到已有行數(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í)設(shè)置上背景顏色
}2.3.2點(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 方塊移動(dòng)函數(shù)封裝
function move() {
clearInterval(timer);
timer = setInterval(function () { // 設(shè)置定時(shí)器
var step = parseInt(main.offsetTop) + speed; // 利用top值移動(dòng)main區(qū)域
main.style.top = step + px;
if (parseInt(main.offsetTop) >= 0) { // 如果main區(qū)域移動(dòng)到可視區(qū)域 創(chuàng)建一行新的元素
cDiv();
main.style.top = -150px; // 同時(shí)將main區(qū)域移動(dòng)到可視區(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++) { // 遍歷最后一行的每一個(gè)div
if (main.childNodes[len - 1].children[i].classList.contains(i)) { // 如果其中有一個(gè)包含沒(méi)有被點(diǎn)擊的 游戲結(jié)束
alert(游戲結(jié)束，得分： + num);
clearInterval(timer);
flag = false; // 游戲結(jié)束后不可以繼續(xù)點(diǎn)擊
}
}
main.removeChild(main.childNodes[len - 1]); // 將展示過(guò)后的每一行移除
}
}, 20)
bindEvent(); // 點(diǎn)擊事件
}
在函數(shù)里面第一句就是clearInterval(timer);防止定時(shí)器多開(kāi);
2.3.5 游戲開(kāi)始
// 開(kāi)始按鈕點(diǎn)擊 開(kāi)始移動(dòng) 創(chuàng)建每一行元素
function clickStart() {
go.addEventListener(click, function () {
go.style.display = none;
move();
});
}
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è)合適的完整的界面效果;感興趣的小伙伴可以去試一下。
看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人
IT共享之家
入群請(qǐng)?jiān)谖⑿藕笈_(tái)回復(fù)【入群】
