碰壁反弹小游戏
本文作者：IMWeb 一大碗油茶 原文出处：IMWeb社区 未经同意，禁止转载
利用碰壁反弹写的小游戏，可以积分，用左右键控制移动 由于小球是用border-radius写的，所以碰到边的时候可能会有一点问题 体验链接如下：http://www.qdfuns.com/notes/45682/28c4076859bdd0368bc2a5ef50176f63.html 喜欢的可以关注下哦！！！
具体代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
.outer{width:300px;height:450px;border:3px solid black;float:left;}
#box{width:70px;height:15px;background-color:#52C6F3;position: absolute;bottom:5px;left:110px;}
.ball{width:20px;height:20px;border-radius:10px;border:1px solid #A5E642;background-color: #A5E642;display: none}
.outer{position: relative;}
.ball{position: absolute;}
.kongzhi{height:450px;width:110px;float:left;margin-left:10px;}
button{border-radius: 10px;height: 25px;width:60px;}
#df{position: absolute;top:150px;width:300px;display: none}
h1{background-color: black;color:white;text-align: center;}
#df h3{text-align: center;color:red;}
</style>
</head>
<body>
<div id="outer" class="outer">
<div id="ball" class="ball"></div>
<div id="box"></div>
<div id="df">
<h1>Game Over</h1>
<h3 id="ff">得分：</h3>
</div>
</div>
<div class="kongzhi">
<button id="start">开始</button>
<p style="color:skyblue">左右控制移动点击开始</p>
<h2>得分：</h2>
<h2 id="fs"></h2>
</div>
<script>
var z,y,n=0;
var outer=document.getElementById('outer');
var ball=document.getElementById('ball');
var start=document.getElementById('start');
var ff=document.getElementById('ff');
var df=document.getElementById('df');
var fs=document.getElementById('fs');
var box=document.getElementById("box");
var posX=150;
var posY=0;
var moveX=true;
var moveY=true;
var timer=null;
var timer1,timer2;
function clear(){
clearInterval(timer);
clearInterval(timer1);
clearInterval(timer2);
}
window.onload=pos;
function pos(){
ball.style.left=posX+'px';
ball.style.left=posY+'px';
}
start.onclick=function(){
clear();
ball.style.display="block";
df.style.display="none";
timer=setInterval(move,5);
timer2=setInterval(function(){
n=n+1;
fs=n;
},100)
key();
x=Math.round(Math.random()*300);//从第二次开始小球的位置随机开始
posX=x;
posY=0;
}
function move(){//小球的移动
if(moveX){
if(posX>0){
posX--;
ball.style.left=posX+'px';
}else{
moveX=false;
}
}
else{
if(posX<outer.clientWidth-ball.offsetWidth){
posX++;
ball.style.left=posX+'px';
}else{
moveX=true;
}
}
if(moveY){
if(posY>0){
posY--;
ball.style.top=posY+'px';
}else{
moveY=false;
}
}
else{
if(posY<outer.clientHeight-ball.offsetHeight-15){
posY++;
ball.style.top=posY+'px';
}else{
if(box.offsetLeft > ball.offsetLeft || (box.offsetLeft + box.offsetWidth) < ball.offsetLeft){
clear();
df.style.display="block";
ff="得分："+n;
n=0;//判断小条是否接到小球，否，游戏结束
}
moveY=true;
}
}
}
function key(){
document.onkeydown=function(ev) {
var ev=ev||window;
switch(ev.keyCode){
case 37:
z=true;
break;
case 39:
y=true;
break;
}
}
document.onkeyup=function(ev) {
var ev=ev||window;
switch(ev.keyCode){
case 37:
z=false;
break;
case 39:
y=false;
break;
}
}
timer1=setInterval(function() {
if(z){
if(box.offsetLeft > 0){
box.style.left = (box.offsetLeft-2 < 0? 0 : box.offsetLeft-2)+"px";
}
}
if(y){
if(box.offsetLeft < 230){
box.style.left = (box.offsetLeft+2 > 400? 400 : box.offsetLeft+2)+"px";
}
}
},10);//左右移动的小条
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读