弹力球游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#mycavas{position: relative;}
#qiu{width:40px;height: 40px;border-radius:50%;background: #008000;position: absolute;left: 20px;top:0;}
#ban{width: 80px;height: 20px;background: #0099FF;position: absolute;}
</style>
</head>
<body>
<div id="mycavas" style="border:1px solid #ccc;background: #DBDBDB;width:500px;height:500px;margin-left:340px;;">
<div id="qiu" style="left:35px;top:0;"></div>
<div id="ban" style="bottom:0;left: 251px;"></div>
</div>
</body>
<script>
function id(){
document.getElementById("id");
}
qiu.speedX=4;
qiu.speedY=4;
qiu.run=function(){
var Lft=this.style;
var leftval=parseInt(Lft.left)+this.speedX;
var topval=parseInt(Lft.top)+this.speedY;
Lft.left=leftval+'px';
Lft.top=topval+'px';
this.chek(leftval,topval);
}
qiu.chek=function(leftval,topval){
if(leftval>=462||leftval<=0){
this.speedX=-this.speedX;
}
if(topval<=0){
this.speedY=-this.speedY;
}
if(topval>=462){
clearInterval(clockid);
alert('你输了')
return false;
}
var $left=parseInt(ban.style.left);
var $top=parseInt(ban.style.top);
if(leftval+40>=$left&&leftval<=$left+80&&topval+40>=parseInt(ban.style.top)-5&&topval+40<parseInt(ban.style.top)+20){
this.speedY=-this.speedY;
}
}
//小木板
mycavas.onmousemove=function(e){
if(e.srcElement!==mycavas){
return ;
}
ban.style.left=(e.offsetX-40)+'px';
ban.style.top=(e.offsetY-20)+'px';
}
//反弹
//定时器
clockid=setInterval(function(){
qiu.run();
},20)
</script>
</html>
