這篇文章主要介紹了JS實現(xiàn)打磚塊游戲的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體內(nèi)容如下

面向?qū)ο笏枷?/p>

 
 
 
 
 #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%;
 }
 
 
 
 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初始值
 }
 //初始化功能 擺放每一個磚塊的位置
 BlockBreak.prototype.init=function(){
 for(var i=0;i=720){
 that.board.style.left=720+'px';
 }
 } 
 
 },50) 
 
 
 }
 var times=0;
 var score=0;
 //小球運動
 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';
 //小球四個方向反彈
 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é)束'+"
";
 }
 //小球擋板碰撞反彈
 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+'次'+'
';
 }
 }
 }
 //小球磚塊反彈
 //以一個小球為基準(zhǔn) 遍歷所有磚塊，找到滿足條件的磚塊
 for(var i=0;i=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+'分'+'
';
 }
 }
 }
 
 }
 
 },10)
 }
 var bb=new BlockBreak();
 bb.init();
 $('start').onclick=function(){
 $('times').innerHTML=0+'次'+'
';
 $('score').innerHTML=0+'分'+"
";
 $('res').innerHTML= "正在游戲"+"
";
 bb.keydown();
 bb.move();
 
 }
 
 }
 
 
 
 
 
 游戲重要信息

 當(dāng)前時間:
 加載中...

 游戲狀態(tài):
 加載中...

 擋板打球次數(shù):
 加載中...

 游戲得分:
 加載中...