JS實現打磚塊遊戲
阿新 • • 發佈：2020-02-16
本文例項為大家分享了JS實現打磚塊遊戲的具體程式碼，供大家參考，具體內容如下
面向物件思想
<!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
}
//打磚塊建構函式
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)+")";
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;
//因為按鍵之後第一次跟第之後的移動之間會有延遲，這是作業系統的問題防止連按兩次
//所以就不把移動放在這裡了，把治理放一個標誌，移動放在定時器裡
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>遊戲狀態:</span>
<span id="res">載入中...<br></span>
<span>擋板打球次數:</span>
<span id="times">載入中...<br></span>
<span>遊戲得分:</span>
<span id="score">載入中...</span>
</div>
<!----遊戲區域--->
<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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。