微客导航 » 文章资讯 » JavaScript实现打砖块游戏

JavaScript实现打砖块游戏

2023-07-31 16:35:04 225

本文实例为大家分享了JavaScript实现打砖块游戏的具体代码，供大家参考，具体内容如下

html+css部分





打砖块





*{
padding:0;
margin:0;
}
.content{
position:relative;
width:800px;
height:600px;
background-color:#999;
margin:0auto;
overflow:hidden;
}
.game{
position:relative;
width:550px;
height:500px;
background-color:pink;
margin:20pxauto0;
}
.brick{
position:absolute;
width:50px;
height:20px;
background-color:blueviolet;
}
.flap{
position:absolute;
width:120px;
height:30px;
bottom:0;
left:0;
background-color:blue;
}
.ball{
position:absolute;
width:30px;
height:30px;
bottom:30px;
left:0;
border-radius:50%;
background-color:greenyellow;
}
.btn{
position:absolute;
width:550px;
height:50px;
bottom:0;
left:125px;
}
.btnbutton{
width:120px;
height:40px;
}
#score{
position:absolute;
width:80px;
height:30px;
right:0;
top:10%;
background-color:#fff;
/*border:1pxsolidred;*/
}

开始重置

js部分

window.onload=init;

functioninit(){
vargameArea=document.getElementsByClassName("game")[0];
varrows=5;
varcols=11;
varb_width=50;
varb_height=20;
varbricks=[];
varspeedX=5;
varspeedY=-5;
varinterId=null;
varlf=0;
vartp=0;
varflap
varball;
varn=0;

varst=document.getElementById("start");
varrt=document.getElementById("reset");
varscore=document.getElementById("score");
score.innerHTML="得分:"+n;

renderDom();
bindDom();

functionrenderDom(){
getBrick();
//得到五彩砖块
functiongetBrick(){
for(vari=0;i=gameArea.offsetWidth-flap.offsetWidth){
lf=gameArea.offsetWidth-flap.offsetWidth
}
flap.style.left=lf+"px";
}
}

st.onclick=function(){
ballMove();
st.onclick=null;
}

rt.onclick=function(){
window.location.reload();
}

}

//得到砖块的随即颜色
functiongetColor(){
varr=Math.floor(Math.random()*256);
varg=Math.floor(Math.random()*256);
varb=Math.floor(Math.random()*256);
return"rgb("+r+","+g+","+b+")";
}
//实现小球上下左右来回运动
functionballMove(){
ball=document.getElementsByClassName("ball")[0];

interId=setInterval(function(){
lf=ball.offsetLeft+speedX;
tp=ball.offsetTop+speedY;
//实现砖块消失的效果
for(vari=0;i=bk.offsetLeft
&&(lf+ball.offsetWidth/2)<=(bk.offsetLeft+bk.offsetWidth)
&&(bk.offsetTop+bk.offsetHeight)>=ball.offsetTop
){
bk.style.display="none";
speedY=5;
n++;
score.innerHTML="得分:"+n;
}
}

if(lf<0){
speedX=-speedX;
}
if(lf>=(gameArea.offsetWidth-ball.offsetWidth)){
speedX=-speedX;
}
if(tp<=0){
speedY=5;
}elseif((ball.offsetTop+ball.offsetHeight)>=flap.offsetTop
&&(ball.offsetLeft+ball.offsetWidth/2)>=flap.offsetLeft
&&(ball.offsetLeft+ball.offsetWidth/2)<=(flap.offsetLeft+flap.offsetWidth)
){
speedY=-5;
}elseif(ball.offsetTop>=flap.offsetTop){
gameOver();
}
ball.style.left=lf+'px';
ball.style.top=tp+"px";
},20)
}

//判断游戏是否结束
functiongameOver(){
alert("gameover"+"\n"+"您的得分是"+score.innerHTML);
clearInterval(interId);
}

}

更多关于Js游戏的精彩文章，请查看专题：《JavaScript经典游戏玩不停》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JavaScript实现打砖块游戏

热门推荐

随机推荐