一个简单的触壁反弹(js原生)

最新推荐文章于 2023-08-23 20:52:39 发布

weixin_30493321

最新推荐文章于 2023-08-23 20:52:39 发布

阅读量162

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/jwhgz/p/6061035.html

版权

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{padding: 0;margin: 0;}

#box{width: 500px;height: 350px;border:1px solid #ccc;margin: 20px auto 0;position: relative;}

#ball{width: 50px;height: 50px;background: red;position: absolute;top:0;left: 0;}

#btn{width: 50px;height: 50px;cursor: pointer;background: green;}

</style>

</head>

<body>

<div id="box">

　　<div id="ball">

　　</div>

</div>

<div id="btn">

 

</div>

</body>

</html>

<script type="text/javascript">

var box=document.getElementById("box");

var ball=document.getElementById("ball");

var btn=document.getElementById("btn");

var speedX=10;//横向的移动速度

var speedY=10;//横向的移动速度

//点击更改ball的速度

btn.onclick=function(){

speedX=parseInt(Math.random()*4+1)+2;

speedY=parseInt(Math.random()*4+1)+2;

}

setInterval(function(){

ball.style.left=ball.offsetLeft+speedX+"px";

ball.style.top=ball.offsetTop+speedY+"px";

//判断ball的位置 触壁speed取反

if(ball.offsetLeft>=box.clientWidth-ball.offsetWidth||ball.offsetLeft<=0){

speedX*=-1;

}

if(ball.offsetTop>=box.clientHeight-ball.offsetHeight||ball.offsetTop<=0){

speedY*=-1;

}

},30)

</script>