游戲唯一的一個(gè)規(guī)則，我們只需要不斷踩著黑色方塊前進(jìn)即可，這里根據(jù)方向鍵來(lái)踩白塊
在規(guī)定時(shí)間內(nèi)，每走一次分?jǐn)?shù)加100
游戲內(nèi)的每一排都是一個(gè)有四個(gè)元素的數(shù)組，當(dāng)正確的踩到黑塊前進(jìn)后，前一個(gè)數(shù)組內(nèi)所有的對(duì)象樣式屬性（backgroundColor）賦值給其后一個(gè)數(shù)組內(nèi)的對(duì)應(yīng)位置處的對(duì)象，便實(shí)現(xiàn)了前進(jìn)的功能，很簡(jiǎn)單的思想
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{padding: 0; margin: 0; } .div_bg { width: 410px; height: 512px; margin-top: 10px; border: 1px solid black; box-shadow: 0px 0px 20px #102327; } #score{ margin-top: 10px; color: #365669; margin:0 auto; width: 350px; height: 80px; } .span_1 { font-size: 3em; } .box_list { border-radius: 100%; text-align: center; line-height: 100px; color: red; font-size: 2em; } .box_list_1 { border-radius: 100%; box-shadow: 0px 0px 20px #ff5026; text-align: center; line-height: 100px; color: red; font-size: 2em; } .img{ margin: 0 auto; margin-top: 15px; } .over{ border: 2px solid #23f00f; border-radius: 20%; box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px white; top: 200px; left: 50%; margin-left: -150px; color: black; line-height: 50px; text-align: center; font-size: 20px; } .newGame{ border: 2px solid #23fdff; border-radius: 20%; box-shadow: 0px 0px 5px red,0px 0px 10px blue,0px 0px 15px green; top: 350px; left:50%; margin-left: -50px; color: white; font-size: 16px; z-index: 9999; } .newGame:hover{ border: 2px solid #c05e8c; color: #A1FEDC; } #clock{ font-size: 4em; color: red; margin:0 auto; width: 350px; height: 80px; } </style></head><body><div style="width: 410px;margin: 0 auto;"> <div class="div_bg"> </div> <div id="clock">00:00:20:00</div> <div id="score"> <p class="span_1"></p> </div></div><script> var box; var sum = 0;//全局變量 分?jǐn)?shù) var oclock=document.getElementById("clock"); var start1 = oclock.innerHTML; var finish = "00:00:00:00"; var timer = null;// var Over=new over();//實(shí)例化對(duì)象結(jié)束游戲框 var NewGame=new newGame();//實(shí)例化重新開(kāi)始游戲按鈕 var index=false;//標(biāo)志位哦（用于控制結(jié)束游戲框重復(fù)出現(xiàn)） var again=true;//標(biāo)志位（用于結(jié)束游戲后控制無(wú)法再踩白塊） box = new showbox();//實(shí)例化對(duì)象 box.show();//構(gòu)造游戲白塊 window.onkeydown = function (e) { box.clickinfo(e.keyCode);//獲取方向鍵keyCode值并傳參調(diào)用函數(shù) } function onTime()//定義倒計(jì)時(shí)秒表函數(shù) { if (start1 == finish)//到達(dá)時(shí)間執(zhí)行 { index=true; clearInterval(timer); if(index==true){ //由于后續(xù)定時(shí)器一直執(zhí)行，當(dāng)點(diǎn)擊重新開(kāi)始游戲后會(huì)重復(fù)出現(xiàn)結(jié)束框，所以設(shè)置標(biāo)志位控制只出現(xiàn)一次 Over.createOver(); index=false; } return; } var hms = new String(start1).split(":");//以:作為分隔符號(hào)取字符串內(nèi)的數(shù)據(jù) var ms = new Number(hms[3]);//給每個(gè)數(shù)據(jù)定義對(duì)象 var s = new Number(hms[2]); var m = new Number(hms[1]); var h = new Number(hms[0]); ms -= 10;//每次執(zhí)行ms減10 if (ms < 0)//判斷時(shí)間并進(jìn)行變化 { ms = 90; s -= 1; if (s < 0) { s = 59; m -= 1; } if (m < 0) { m = 59; h -= 1; } } var ms = ms < 10 ? ("0" + ms) : ms;//如果出現(xiàn)個(gè)位數(shù)給個(gè)位數(shù)前面添加0 var ss = s < 10 ? ("0" + s) : s; var sm = m < 10 ? ("0" + m) : m; var sh = h < 10 ? ("0" + h) : h; start1 = sh + ":" + sm + ":" + ss + ":" + ms; oclock.innerHTML = start1;//重新給oclock賦值 clearInterval(timer); timer =setInterval("onTime()", 100); } function run() {//開(kāi)始倒計(jì)時(shí)函數(shù) timer =setInterval("onTime()", 100); } function showbox() {//定義構(gòu)造函數(shù)創(chuàng)建白塊 this.width = 100; this.height = 100; this.border = "1px solid black"; this.float = "left"; this.color = "black"; this.body = [[null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null], [null, null, null, null]]; /*定義一個(gè)二維數(shù)組，每一個(gè)數(shù)組中存放的元素代表每一個(gè)白塊對(duì)象一排四個(gè)一共五排*/ this.show = function () { document.getElementsByClassName("span_1")[0].innerHTML = "分?jǐn)?shù)：" + sum;//初始化分?jǐn)?shù) for (var i = 0; i < this.body.length; i++) {//兩重循環(huán)動(dòng)態(tài)創(chuàng)建白塊和黑塊 var ran_num = Math.floor(Math.random() * 4);//去一個(gè)（0~3）的隨機(jī)數(shù)，使每一行隨機(jī)位置出現(xiàn)一個(gè)黑塊 for (var k = 0; k < this.body[i].length; k++) { if (this.body[i][k] == null) {//事先判斷一下是否已近存在該對(duì)象，防止產(chǎn)生多余對(duì)象（后續(xù)會(huì)多次調(diào)用該方法） this.body[i][k] = document.createElement("div"); this.body[i][k].style.width = this.width + "px";//給對(duì)象添加屬性 this.body[i][k].style.height = this.height + "px"; this.body[i][k].style.border = this.border; this.body[i][k].style.float = this.float;//讓每一個(gè)白塊浮動(dòng) if (k == ran_num) {//隨機(jī)黑塊位置 this.body[i][k].className = "box_list"; this.body[i][k].style.backgroundColor = this.color; } else { this.body[i][k].className = "box_list_1"; this.body[i][k].style.backgroundColor = "white"; } } document.getElementsByClassName("div_bg")[0].appendChild(this.body[i][k]); } } for(var i=0;i<this.body.length;i++){//兩重循環(huán)給黑塊添加方向鍵圖片（這里是頁(yè)面加載后執(zhí)行） for(var j=0;j<this.body[i].length;j++){ if(this.body[i][j].style.backgroundColor=="black"){ this.body[i][j].innerHTML="<img class=img src='image/direct"+j+".png'/>"; //這里我給圖片direct0（方向左）direct1（方向上）direct2（方向下）direct3（方向右）命名 } } } } this.clickinfo = function (code) {//code：傳的方向鍵keyCode值 for (var i = 0; i < 4; i++) {//給最下面一行索引賦值 this.body[4][i].index = i; } if (code == 37) { if (this.body[4][0].style.backgroundColor == "black") {//判斷若是方向左鍵且當(dāng)前是黑塊 box.moveinfo(); } else { document.getElementsByClassName("span_1")[0].innerHTML = "分?jǐn)?shù)：" + sum;//變動(dòng)分?jǐn)?shù) clearInterval(timer); Over.createOver();//現(xiàn)實(shí)游戲結(jié)束框 again=false; } } if (code == 38) { if (this.body[4][1].style.backgroundColor == "black") { box.moveinfo(); } else { document.getElementsByClassName("span_1")[0].innerHTML = "分?jǐn)?shù)：" + sum; clearInterval(timer); Over.createOver(); again=false; } } if (code == 40) { if (this.body[4][2].style.backgroundColor == "black") { box.moveinfo(); } else { document.getElementsByClassName("span_1")[0].innerHTML = "分?jǐn)?shù)：" + sum; clearInterval(timer); Over.createOver(); again=false; } } if (code == 39) { if (this.body[4][3].style.backgroundColor == "black") { box.moveinfo(); } else { document.getElementsByClassName("span_1")[0].innerHTML = "分?jǐn)?shù)：" + sum; clearInterval(timer); Over.createOver(); again=false; } } for(var i=0;i<this.body.length;i++){//再一次兩重循環(huán)給黑塊添加方向鍵圖片（這里是在游戲過(guò)程中） for(var j=0;j<this.body[i].length;j++){ this.body[i][j].innerHTML=""; if(this.body[i][j].style.backgroundColor=="black"){ this.body[i][j].innerHTML="<img class=img src='image/direct"+j+".png'/>"; } } } } this.moveinfo = function () {//踩白塊前進(jìn)功能函數(shù) if (again == true) { clearInterval(timer);//先清除一次定時(shí)器因?yàn)楹竺鏁?huì)再次調(diào)用，多余的定時(shí)器會(huì)讓時(shí)間加速倒計(jì)時(shí) sum += 100;//每走一次加100分 run();//開(kāi)啟倒計(jì)時(shí)（當(dāng)?shù)谝淮巫叩臅r(shí)候 開(kāi)始倒計(jì)時(shí)，標(biāo)志著游戲開(kāi)始了） document.getElementsByClassName("span_1")[0].innerHTML = "分?jǐn)?shù)：" + sum;//每走一次都要?jiǎng)討B(tài)改變一下當(dāng)前分?jǐn)?shù) for (var k = 4; k > 0; k--) { //把后一排所有塊的樣式屬性變?yōu)槠淝耙慌艍K和其相對(duì)應(yīng)位置塊的樣式屬性 // 這里注意：要從最后一排開(kāi)始賦值，并且第一排的塊不算進(jìn)去 for (var i = 0; i < 4; i++) { this.body[k][i].style.backgroundColor = this.body[k - 1][i].style.backgroundColor; } } var ran_num = Math.floor(Math.random() * 4); //取隨機(jī)數(shù)創(chuàng)建第一排黑白塊 for (var i = 0; i < 4; i++) { if (i == ran_num) { this.body[0][i].style.backgroundColor = "black"; } else { this.body[0][i].style.backgroundColor = "white"; } } this.show();//每一次踩白塊都要調(diào)用一下show讓全局改變一下 } } } function over(){//定義結(jié)束游戲框構(gòu)造函數(shù) this.width="300px"; this.height="100px"; this.bgColor="#ccc"; this.position="absolute"; this._over=null; this.className="over"; this.createOver=function(){ if(this._over==null){ this._over=document.createElement("div"); this._over.style.width=this.width; this._over.style.height=this.height; this._over.style.backgroundColor=this.bgColor; this._over.style.position=this.position; this._over.className=this.className; this._over.innerHTML="<span>游戲結(jié)束</br>得分："+sum+"</span>"; document.body.appendChild(this._over); NewGame.createNewGame(); } } } function newGame(){//定義重新開(kāi)始按鈕構(gòu)造函數(shù) this.width="100px"; this.height="40px"; this.bgColor="#4D5260"; this.position="absolute"; this._newGame=null; this.className="newGame"; this.createNewGame=function(){ if(this._newGame==null){ this._newGame=document.createElement("button"); this._newGame.style.width=this.width; this._newGame.style.height=this.height; this._newGame.style.backgroundColor=this.bgColor; this._newGame.style.position=this.position; this._newGame.className=this.className; this._newGame.innerHTML="<span>重新開(kāi)始</span>"; document.body.appendChild(this._newGame); } var oNewGame=document.getElementsByClassName("newGame")[0];//獲取創(chuàng)建后的重新開(kāi)始按鈕 oNewGame.onclick=function(){//添加點(diǎn)擊事件 初始各種對(duì)象 sum=0; again=true; document.getElementsByClassName("span_1")[0].innerHTML = "分?jǐn)?shù)：" + sum; document.getElementById("clock").innerHTML="00:00:20:00"; start1="00:00:20:00"; document.getElementsByClassName("newGame")[0].remove();//移除重新開(kāi)始按鈕 document.getElementsByClassName("over")[0].remove();//移除結(jié)束游戲框 NewGame._newGame=null; Over._over=null; } } }</script></body></html>總結(jié)
以上所述是小編給大家介紹的Javascript別踩白塊兒（鋼琴塊兒）小游戲?qū)崿F(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
