html+css+js實現(xiàn)別踩白板小游戲
背景簡介
別踩白板這個游戲相信大家都玩過,這個是基于HTML5打造的簡單小游戲,在PC端和移動端都能夠運行,適應多種平臺,今天我們使用原生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 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è)置好樣式之后,得到的大致界面如下所示:
可以看到界面樣式比較簡單,我們的想法是點擊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.2創(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.3點擊事件函數(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打造了簡單觸屏游戲------別踩白板,對于游戲有簡單的改動??傮w來說首先我們需要設(shè)置好游戲界面大致結(jié)構(gòu)和樣式,然后通過原生js控制方塊的產(chǎn)生移動,以及點擊等等,最終才呈現(xiàn)了一個合適的完整的界面效果;感興趣的小伙伴可以去試一下。
到此這篇關(guān)于html+css+js實現(xiàn)別踩白板小游戲的文章就介紹到這了,更多相關(guān)html+css+js別踩白板游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript事件概念詳解(區(qū)分靜態(tài)注冊和動態(tài)注冊)
這篇文章主要介紹了JavaScript事件(區(qū)分靜態(tài)注冊和動態(tài)注冊)的相關(guān)資料,幫助大家更好的理解和學習使用JavaScript,感興趣的朋友可以了解下2021-02-02js中火星坐標、百度坐標、WGS84坐標轉(zhuǎn)換實現(xiàn)方法示例
這篇文章主要介紹了js中火星坐標、百度坐標、WGS84坐標轉(zhuǎn)換實現(xiàn)方法,涉及JavaScript數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2020-03-03通過js動態(tài)操作table(新增,刪除相關(guān)列信息)
通過js動態(tài)操作table(新增,刪除相關(guān)列信息)的實現(xiàn)代碼,需要的朋友可以參考下2012-05-05