這篇文章主要介紹了原生JS實現多個小球碰撞反彈效果,結合完整實例形式分析了javascript實現小球碰撞的相關數值計算、隨機數生成、事件響應等操作技巧,需要的朋友可以參考下方
本文實例講述了原生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> <p id="wrap"> </p> </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 + ")"; } //获得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]); } </script> </html>
運行效果:
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
#以上是透過JS如何實現多個小球碰撞反彈的詳細內容。更多資訊請關注PHP中文網其他相關文章!