原生JS实现多个小球碰撞反弹效果示例
程序员文章站
2022-04-03 08:20:49
本文实例讲述了原生js实现多个小球碰撞反弹效果。分享给大家供大家参考，具体如下：
实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x...
本文实例讲述了原生js实现多个小球碰撞反弹效果。分享给大家供大家参考，具体如下：
实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x/y值加到最大，即加到父级的宽度或者高度时，使x值或者y值减小，同理当x值或者y值减到最小时，同样的使x值或者y值增加，以上的思路可以实现小球的碰壁反弹
小球与小球之间的碰撞，要判断小球在被撞小球的哪个方向，从而判断小球该向哪个方向移动，同样的改变小球的坐标值，来实现小球的反弹
实现代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>小球碰撞</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
height: 800px;
width: 1300px;
border: 1px solid red;
/*小球设置相对定位*/
position: relative;
margin: 0 auto;
overflow: hidden;
}
p {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 25px;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
<!--<script src="js/common.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript">
/**
* 生成并返回一个从m到n全区间的随机数
* @param {object} m
* @param {object} n
*/
function randomnum(m, n) {
return math.floor(math.random() * (n - m + 1) + m);
}
/**
* 生成一个随机颜色，并返回rgb字符串值
*/
function randomcolor() {
var r = randomnum(0, 255);
var g = randomnum(0, 255);
var b = randomnum(0, 255);
return "rgb(" + r + "," + g + "," + b + ")";
}
//获得wrapdiv
var wrapdiv = document.getelementbyid("wrap");
//定义数组存储所有的小球
var balls = [];
//生成小球函数
function createballs() {
for (var i = 0; i < 20; i++) {
var ball = document.createelement("p");
//随机小球起始的x坐标和小球的y坐标
ball.x = randomnum(0, 1200);
ball.y = randomnum(0, 700);
//随机小球的移动速度
ball.speed = randomnum(2, 5);
//随机小球移动的方向
if (math.random() - 0.5 > 0) {
ball.xflag = true;
} else {
ball.xflag = false;
}
if (math.random() - 0.5 > 0) {
ball.yflag = true;
} else {
ball.yflag = false;
}
//随机小球的背景颜色
ball.style.backgroundcolor = randomcolor();
ball.innerhtml = i + 1;
//将小球插入当wrapdiv中
wrapdiv.appendchild(ball);
//将所有的小球存储到数组中
balls.push(ball);
}
}
createballs();
//小球移动函数，判断小球的位置
function moveballs(ballobj) {
setinterval(function() {
ballobj.style.top = ballobj.y + "px";
ballobj.style.left = ballobj.x + "px";
//判断小球的标志量，对小球作出相应操作
if (ballobj.yflag) {
//小球向下移动
ballobj.y += ballobj.speed;
if (ballobj.y >= 800 - ballobj.offsetwidth) {
ballobj.y = 800 - ballobj.offsetwidth;
ballobj.yflag = false;
}
} else {
//小球向上移动
ballobj.y -= ballobj.speed;
if (ballobj.y <= 0) {
ballobj.y = 0;
ballobj.yflag = true;
}
}
if (ballobj.xflag) {
//小球向右移动
ballobj.x += ballobj.speed;
if (ballobj.x >= 1300 - ballobj.offsetheight) {
ballobj.x = 1300 - ballobj.offsetheight;
ballobj.xflag = false;
}
} else {
//小球向左移动
ballobj.x -= ballobj.speed;
if (ballobj.x <= 0) {
ballobj.x = 0;
ballobj.xflag = true;
}
}
crash(ballobj);
}, 10);
}
var x1, y1, x2, y2;
//碰撞函数
function crash(ballobj) {
//通过传过来的小球对象来获取小球的x坐标和y坐标
x1 = ballobj.x;
y1 = ballobj.y;
for (var i = 0; i < balls.length; i++) {
//确保不和自己对比
if (ballobj != balls[i]) {
x2 = balls[i].x;
y2 = balls[i].y;
//判断位置的平方和小球的圆心坐标的关系
if (math.pow(x1 - x2, 2) + math.pow(y1 - y2, 2) + 800 <= math.pow(ballobj.offsetwidth + balls[i].offsetwidth, 2)) {
//判断传过来的小球对象，相对于碰撞小球的哪个方位
if (ballobj.x < balls[i].x) {
if (ballobj.y < balls[i].y) {
//小球对象在被碰小球的左上角
ballobj.yflag = false;
ballobj.xflag = false;
} else if (ballobj.y > balls[i].y) {
//小球对象在被碰小球的左下角
ballobj.xflag = false;
ballobj.yflag = true;
} else {
//小球对象在被撞小球的正左方
ballobj.xflag = false;
}
} else if (ballobj.x > balls[i].x) {
if (ballobj.y < balls[i].y) {
//小球对象在被碰撞小球的右上方
ballobj.yflag = false;
ballobj.xflag = true;
} else if (ballobj.y > balls[i].y) {
//小球对象在被碰撞小球的右下方
ballobj.xflag = true;
ballobj.yflag = true;
} else {
//小球对象在被撞小球的正右方
ballobj.xflag = true;
}
} else if (ballobj.y > balls[i].y) {
//小球对象在被撞小球的正下方
ballobj.yflag = true;
} else if (ballobj.y < balls[i].y) {
//小球对象在被撞小球的正上方
ballobj.yflag = false;
}
}
}
}
}
for (var i = 0; i < balls.length; i++) {
//将所有的小球传到函数中,来实现对小球的移动
moveballs(balls[i]);
}
</script>
</html>
运行效果：
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript运动效果与技巧汇总》、《javascript动画特效与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： 狄仁杰对武则天的武周王朝有哪些深远影响？
下一篇： 江湖再无张近东