本文實(shí)例為大家分享了JS實(shí)現(xiàn)打磚塊游戲的具體代碼，供大家參考，具體內(nèi)容如下
面向?qū)ο笏枷?/p>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #show{ width: 200px; height: 600px; position: absolute; left:1122px ; top:50px; background-color: gray; color: blue; line-height: 100px; font-size: larger; align-self: center; } #lose{ position: absolute; top: 300px; left: 300px; font-size: xx-large; display: none; } li{ position: absolute; list-style-type: none; background-color: #000000; width: 90px; height: 30px; border: 1px solid white; } #box{ position: absolute; width: 920px; height: 600px; left: 200px; top: 50px; border: 2px solid red; } #board{ position: absolute; top:590px; left: 300px; width: 200px; height: 10px; background-color: black; } #bubble{ position: absolute; top: 565px; left: 360px; width: 25px; height: 25px; background-color: #FF0000; border-radius: 50%; } </style> <script type="text/javascript"> window.onload=function(){ function $(id){ return document.getElementById(id); } function rand(min,max){ return Math.floor(Math.random()*(max-min+1))+min } //打磚塊構(gòu)造函數(shù) function BlockBreak(){ this.box=$('box');//容器 this.list=document.getElementsByTagName('li');//磚塊 this.board=$('board');//擋板 this.ball=$('bubble');//小球 this.fx=3;//橫向 this.fy=-3;//縱向 this.leftInit=0;//磚塊left初始值 this.topInit=0;//磚塊top初始值 } //初始化功能 擺放每一個(gè)磚塊的位置 BlockBreak.prototype.init=function(){ for(var i=0;i<this.list.length;i++){ this.list[i].style.backgroundColor="rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")"; var x=this.leftInit*this.list[0].offsetWidth; var y=this.topInit; this.list[i].style.left=x+'px'; this.list[i].style.top=y+'px'; this.leftInit++ //換行 if((i+1)%10==0){ this.leftInit=0; this.topInit+=this.list[0].offsetHeight; } } } //擋板運(yùn)動(dòng) BlockBreak.prototype.keydown=function(){ var that=this; var mleft=false; var mright=false; //因?yàn)榘存I之后第一次跟第之后的移動(dòng)之間會(huì)有延遲，這是操作系統(tǒng)的問題防止連按兩次 //所以就不把移動(dòng)放在這里了，把治理放一個(gè)標(biāo)志，移動(dòng)放在定時(shí)器里 document.onkeydown=function(e){ var e=e||event; if(e.keyCode==37){ mleft=true; } if(e.keyCode==39){ mright=true; } } document.onkeyup=function(){ mleft=false; mright=false; } setInterval(function(){ console.log(mleft); if (mleft){ that.board.style.left=that.board.offsetLeft-15+'px'; if(that.board.offsetLeft<=0){ that.board.style.left=0; } }else if(mright){ that.board.style.left=that.board.offsetLeft+15+'px'; if(that.board.offsetLeft>=720){ that.board.style.left=720+'px'; } } },50) } var times=0; var score=0; //小球運(yùn)動(dòng) BlockBreak.prototype.move=function(){ var timer=null; var that=this; timer=setInterval(function(){ that.ball.style.left=that.ball.offsetLeft+that.fx+'px'; that.ball.style.top=that.ball.offsetTop+that.fy+'px'; //小球四個(gè)方向反彈 if(that.ball.offsetTop<=0){ that.fy*=-1; } if(that.ball.offsetLeft<=0){ that.fx*=-1; } if(that.ball.offsetLeft>=(that.box.offsetWidth-that.ball.offsetWidth)){ that.fx*=-1; } if(that.ball.offsetTop>=(that.box.offsetHeight-that.ball.offsetHeight)){ //游戲結(jié)束 $('lose').style.display='block'; clearInterval(timer); $('res').innerHTML='游戲結(jié)束'+"<br>"; } //小球擋板碰撞反彈 if(that.ball.offsetTop+that.ball.offsetHeight>=that.board.offsetTop){ if(that.ball.offsetLeft+that.ball.offsetWidth>=that.board.offsetLeft){ if(that.ball.offsetLeft<=that.board.offsetLeft+that.board.offsetWidth){ that.fy*=-1; times++; $('times').innerHTML=times+'次'+'<br>'; } } } //小球磚塊反彈 //以一個(gè)小球?yàn)榛鶞?zhǔn) 遍歷所有磚塊，找到滿足條件的磚塊 for(var i=0;i<that.list.length;i++) { if(that.ball.offsetTop<=that.list[i].offsetTop+that.list[i].offsetHeight){ if(that.ball.offsetLeft>=that.list[i].offsetLeft){ if(that.ball.offsetLeft<=that.list[i].offsetLeft+that.list[i].offsetWidth){ that.fy*=-1; that.list[i].style.display='none'; score++; $('score').innerHTML=score+'分'+'<br>'; } } } } },10) } var bb=new BlockBreak(); bb.init(); $('start').onclick=function(){ $('times').innerHTML=0+'次'+'<br>'; $('score').innerHTML=0+'分'+"<br>"; $('res').innerHTML= "正在游戲"+"<br>"; bb.keydown(); bb.move(); } } </script> </head> <body> <div id="container"> <div id="show"> <span id="info">游戲重要信息<br></span> <span>當(dāng)前時(shí)間:</span> <span id="time">加載中...<br></span> <span>游戲狀態(tài):</span> <span id="res">加載中...<br></span> <span>擋板打球次數(shù):</span> <span id="times">加載中...<br></span> <span>游戲得分:</span> <span id="score">加載中...</span> </div> <!----游戲區(qū)域---> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div id="bubble"></div> <div id="board"></div> <div id="lose"><h1>Game Over!</h1></div> </div> <button type="button" id="start">開始游戲</button> </div> </body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
