原生JS实现多个小球碰撞反弹效果示例
2020-11-27
来源：爱够旅游网
本文实例讲述了原生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程序设计有所帮助。
显示全文