本文實例講述了原生JS實現(xiàn)多個小球碰撞反彈效果。分享給大家供大家參考，具體如下：

實現(xiàn)思路：小球的移動，是通過改變小球的left和top值來改變，坐標(biāo)分別為(x,y)當(dāng)x/y值加到最大，即加到父級的寬度或者高度時，使x值或者y值減小，同理當(dāng)x值或者y值減到最小時，同樣的使x值或者y值增加，以上的思路可以實現(xiàn)小球的碰壁反彈

小球與小球之間的碰撞，要判斷小球在被撞小球的哪個方向，從而判斷小球該向哪個方向移動，同樣的改變小球的坐標(biāo)值，來實現(xiàn)小球的反彈

實現(xiàn)代碼：

小球碰撞

* {

margin: 0;

padding: 0;

}

#wrap {

height: 800px;

width: 1300px;

border: 1px solid red;

/*小球設(shè)置相對定位*/

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全區(qū)間的隨機數(shù)

* @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");

//定義數(shù)組存儲所有的小球

var balls = [];

//生成小球函數(shù)

function createBalls() {

for (var i = 0; i < 20; i++) {

var ball = document.createElement("p");

//隨機小球起始的X坐標(biāo)和小球的Y坐標(biāo)

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;

//將小球插入當(dāng)wrapDiv中

wrapDiv.appendChild(ball);

//將所有的小球存儲到數(shù)組中

balls.push(ball);

}

}

createBalls();

//小球移動函數(shù)，判斷小球的位置

function moveBalls(ballObj) {

setInterval(function() {

ballObj.style.top = ballObj.y + "px";

ballObj.style.left = ballObj.x + "px";

//判斷小球的標(biāo)志量，對小球作出相應(yīng)操作

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;

//碰撞函數(shù)

function crash(ballObj) {

//通過傳過來的小球?qū)ο髞慝@取小球的X坐標(biāo)和Y坐標(biāo)

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;

//判斷位置的平方和小球的圓心坐標(biāo)的關(guān)系

if (Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) + 800 <= Math.pow(ballObj.offsetWidth + balls[i].offsetWidth, 2)) {

//判斷傳過來的小球?qū)ο?#xff0c;相對于碰撞小球的哪個方位

if (ballObj.x < balls[i].x) {

if (ballObj.y < balls[i].y) {

//小球?qū)ο笤诒慌鲂∏虻淖笊辖?/p>

ballObj.yflag = false;

ballObj.xflag = false;

} else if (ballObj.y > balls[i].y) {

//小球?qū)ο笤诒慌鲂∏虻淖笙陆?/p>

ballObj.xflag = false;

ballObj.yflag = true;

} else {

//小球?qū)ο笤诒蛔残∏虻恼蠓?/p>

ballObj.xflag = false;

}

} else if (ballObj.x > balls[i].x) {

if (ballObj.y < balls[i].y) {

//小球?qū)ο笤诒慌鲎残∏虻挠疑戏?/p>

ballObj.yflag = false;

ballObj.xflag = true;

} else if (ballObj.y > balls[i].y) {

//小球?qū)ο笤诒慌鲎残∏虻挠蚁路?/p>

ballObj.xflag = true;

ballObj.yflag = true;

} else {

//小球?qū)ο笤诒蛔残∏虻恼曳?/p>

ballObj.xflag = true;

}

} else if (ballObj.y > balls[i].y) {

//小球?qū)ο笤诒蛔残∏虻恼路?/p>

ballObj.yflag = true;

} else if (ballObj.y < balls[i].y) {

//小球?qū)ο笤诒蛔残∏虻恼戏?/p>

ballObj.yflag = false;

}

}

}

}

}

for (var i = 0; i < balls.length; i++) {

//將所有的小球傳到函數(shù)中,來實現(xiàn)對小球的移動

moveBalls(balls[i]);

}

運行效果：

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

總結(jié)

以上是生活随笔為你收集整理的多个小球碰撞的java_原生JS实现多个小球碰撞反弹效果示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。