这篇文章主要介绍了原生JS实现多个小球碰撞反弹效果,结合完整实例形式分析了javascript实现小球碰撞的相关数值计算、随机数生成、事件响应等操作技巧,需要的朋友可以参考下

本文实例讲述了原生JS实现多个小球碰撞反弹效果。分享给大家供大家参考，具体如下：

实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x/y值加到最大，即加到父级的宽度或者高度时，使x值或者y值减小，同理当x值或者y值减到最小时，同样的使x值或者y值增加，以上的思路可以实现小球的碰壁反弹

小球与小球之间的碰撞，要判断小球在被撞小球的哪个方向，从而判断小球该向哪个方向移动，同样的改变小球的坐标值，来实现小球的反弹

实现代码：

小球碰撞

* {

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;

}

/**

* 生成并返回一个从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 + ")";

}

//获得wrapp

var wrapp = 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;

//将小球插入当wrapp中

wrapp.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]);

}

运行效果：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：