<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>碰撞检测</title>
<style type="text/css">
#wrap {
width: 500px;
height: 300px;
margin:100px auto;
border:1px solid red;
position: relative;
}
#small {
width: 20px;
height:20px;
background:green;
position: absolute;
left:0px;
top:0px;
border-radius:50%;
}
#big {
width: 30px;
height:30px;
background:blueviolet;
position: absolute;
right:0px;
bottom:0px;
border-radius:50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="small"></div>
<div id="big"></div>
</div>
<script type="text/javascript">
/*
* 碰撞效果
* 1.控件布局
2.移动
a.水平移动
b.竖直移动
3.边界控制
4.反弹
*/
var smallDiv = document.getElementById("small");
//记录当前x方向的位置.
var x =0;
//声明一个布尔值去记录x方向是否已到达边界,true表示已经到达,false表示还没有到达.
var flagX = false;
//x方向移动的函数
function moveX(){
if(!flagX){
//还没有到达边界,继续向右移动
x+=2;
if (x > 480){
x = 480;
flagX = true;
}
}else{
//已经到达右边界
//从右往左移动
x-=2;
if (x <= 0){
x =0;
flagX = false;
}
}
smallDiv.style.left = x + "px";
}
// setInterval(moveX, 5);
//记录当前y方向的位置
var y = 0;
//声明一个布尔值去记录y方向是否已经到达边界,true表示已经到达,false表示还没到达;
var flagY = false;
//y方向移动的函数
function moveY(){
if(!flagY){
y+=2;
if (y > 280){
y = 280;
flagY = true;
}
}else{
y-=2;
if(y <= 0){
y = 0;
flagY = false;
}
}
smallDiv.style.top = y + "px";
}
// setInterval(moveY, 5);
function move(){
moveX();
moveY();
}
setInterval(move, 10);
var bigDiv = document.getElementById("big");
//记录当前x方向的位置.
var x1 =0;
//声明一个布尔值去记录x方向是否已到达边界,true表示已经到达,false表示还没有到达.
var flagX1 = false;
//x方向移动的函数
function moveX1(){
if(!flagX1){
//还没有到达边界,继续向右移动
x1+=2;
if (x1 > 470){
x1 = 470;
flagX1 = true;
}
}else{
//已经到达右边界
//从右往左移动
x1-=2;
if (x1 <= 0){
x1 =0;
flagX1 = false;
}
}
bigDiv.style.right = x1 + "px";
}
// setInterval(moveX1, 5)
//记录当前y方向的位置
var y1 = 0;
//声明一个布尔值去记录y方向是否已经到达边界,true表示已经到达,false表示还没到达;
var flagY1 = false;
//y方向移动的函数
function moveY1(){
if(!flagY1){
y1+=2;
if (y1 > 270){
y1 = 270;
flagY1 = true;
}
}else{
y1-=2;
if(y1 <= 0){
y1 = 0;
flagY1 = false;
}
}
bigDiv.style.bottom = y1 + "px";
}
function move1(){
moveX1();
moveY1();
}
setInterval(move1, 5);
</script>
</body>
</html>
2331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
