JS實現(xiàn)打磚塊游戲

更新時間：2020年02月14日 11:01:35 作者：風華正茂呀

這篇文章主要為大家詳細介紹了JS實現(xiàn)打磚塊游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)打磚塊游戲的具體代碼，供大家參考，具體內容如下

面向對象思想

<!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
 }
 
 //打磚塊構造函數(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<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;
 }
 
 }
 }
 //擋板運動
 
 BlockBreak.prototype.keydown=function(){
 var that=this;
 var mleft=false;
 var mright=false;
 
 //因為按鍵之后第一次跟第之后的移動之間會有延遲，這是操作系統(tǒng)的問題防止連按兩次
 //所以就不把移動放在這里了，把治理放一個標志，移動放在定時器里
 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;
 //小球運動
 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)){
 //游戲結束
 
 $('lose').style.display='block';
 clearInterval(timer);
 $('res').innerHTML='游戲結束'+"<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>';
 }
 }
 }
 //小球磚塊反彈
 //以一個小球為基準 遍歷所有磚塊，找到滿足條件的磚塊
 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>當前時間:</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>

更多關于Js游戲的精彩文章，請查看專題：《JavaScript經典游戲玩不?！?/a>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。