背景簡介
別踩白板這個游戲相信大家都玩過，這個是基于HTML5打造的簡單小游戲，在PC端和移動端都能夠運行，適應(yīng)多種平臺，今天我們使用原生JS搭配JQuery構(gòu)建這個小游戲--別踩白板。
一、思路分析
整體頁面是一個大的矩形，長寬比例大概是3：2，然后游戲開始，不斷有白板降落，然后一行是4個板，一塊黑色板塊，其余三塊是白色板塊，通過板塊的點擊事件綁定，然后判定是什么顏色，只要是白色的，游戲結(jié)束（Game Over), 否則玩家積分加1；
二、頁面搭建
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;
}開始游戲按鈕設(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è)置好樣式之后,得到的大致界面如下所示:
可以看到界面樣式比較簡單,我們的想法是點擊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è)置背景顏色,它默認是白色;
2.3.1創(chuàng)建每一行div元素
前面我們說過,一行是四個方塊,比例和大方塊一樣(3:2),它的長寬是:{width: 100px ; height: 150px};
function cDiv() {
var oDiv = document.createElement(div);// 獲取一個隨機數(shù)將每一行找到一個隨機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ù)隨機數(shù) 設(shè)置一行中有顏色的div
clickDiv.setAttribute(class, i); // 將此元素設(shè)置class類名 作為需要點擊的標記
clickDiv.style.backgroundColor = colors[index]; // 同時設(shè)置上背景顏色
}2.3.2點擊事件函數(shù)封裝
function bindEvent() {
main.addEventListener(click, function (event) { // 給main添加點擊事件
if (flag) { // 根據(jù)flag值判斷是否可以點擊
var tar = event.target; // 獲得到點擊的源事件
if (tar.className == i) { // 判斷點擊的塊是否為有顏色的
tar.style.backgroundColor = #bbb; // 改變背景顏色
tar.classList.remove(i); // 移除class類名
num++; // 計數(shù)++
} else {
alert(游戲結(jié)束，得分： + num); // 如果點到了白色的塊 游戲結(jié)束
clearInterval(timer);
flag = false;
}
if (num % 10 == 0) { // 如果當前分數(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)) { // 如果其中有一個包含沒有被點擊的 游戲結(jié)束
alert(游戲結(jié)束，得分： + num);
clearInterval(timer);
flag = false; // 游戲結(jié)束后不可以繼續(xù)點擊
}
}
main.removeChild(main.childNodes[len - 1]); // 將展示過后的每一行移除
}
}, 20)
bindEvent(); // 點擊事件
}
在函數(shù)里面第一句就是clearInterval(timer);防止定時器多開;
2.3.5 游戲開始
// 開始按鈕點擊 開始移動 創(chuàng)建每一行元素
function clickStart() {
go.addEventListener(click, function () {
go.style.display = none;
move();
});
}
clickStart();
大致效果如圖所示:
這個是使用到HbuilderX中的內(nèi)置瀏覽器的界面,游戲結(jié)束效果如上圖所示;
三、總結(jié)
本文我們使用到原生js打造了簡單觸屏游戲------別踩白板，對于游戲有簡單的改動。總體來說首先我們需要設(shè)置好游戲界面大致結(jié)構(gòu)和樣式,然后通過原生js控制方塊的產(chǎn)生移動,以及點擊等等,最終才呈現(xiàn)了一個合適的完整的界面效果;感興趣的小伙伴可以去試一下。
看完本文有收獲？請轉(zhuǎn)發(fā)分享給更多的人
IT共享之家
入群請在微信后臺回復【入群】
