金沙8331网址:原生JS完毕多个小球碰撞反弹效果示例_javascript才能_脚本之家

金沙8331网址:原生JS完毕多个小球碰撞反弹效果示例_javascript才能_脚本之家。正文实例陈说了原生JS达成三个小球碰撞反弹效果。分享给大家供大家参照他事他说加以考查,具体如下:

福寿年高思路:小球的位移,是经过变越来越小球的left和top值来校勘,坐标分别为当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 { return Math.floor * ; } /** * 生成一个随机颜色,并返回rgb字符串值 */ function randomColor() { var r = randomNum; var g = randomNum; var b = randomNum; return "rgb(" + r + "," + g + "," + b + ")"; } //获得wrapDiv var wrapDiv = document.getElementById; //定义数组存储所有的小球 var balls = []; //生成小球函数 function createBalls() { for (var i = 0; i < 20; i++) { var ball = document.createElement; //随机小球起始的X坐标和小球的Y坐标 ball.x = randomNum; ball.y = randomNum; //随机小球的移动速度 ball.speed = randomNum; //随机小球移动的方向 if  - 0.5 > 0) { ball.xflag = true; } else { ball.xflag = false; } if  - 0.5 > 0) { ball.yflag = true; } else { ball.yflag = false; } //随机小球的背景颜色 ball.style.backgroundColor = randomColor(); ball.innerHTML = i + 1; //将小球插入当wrapDiv中 wrapDiv.appendChild; //将所有的小球存储到数组中 balls.push; } } createBalls(); //小球移动函数,判断小球的位置 function moveBalls { setInterval { ballObj.style.top = ballObj.y + "px"; ballObj.style.left = ballObj.x + "px"; //判断小球的标志量,对小球作出相应操作 if  { //小球向下移动 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.yflag = true; } } if  { //小球向右移动 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.xflag = true; } } crash; } var x1, y1, x2, y2; //碰撞函数 function crash { //通过传过来的小球对象来获取小球的X坐标和Y坐标 x1 = ballObj.x; y1 = ballObj.y; for (var i = 0; i < balls.length; i++) { //确保不和自己对比 if  { x2 = balls[i].x; y2 = balls[i].y; //判断位置的平方和小球的圆心坐标的关系 if  + Math.pow + 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; } 

运作效果:

越来越多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript运动功用与技艺汇总》、《JavaScript动漫特效与能力汇总》、《JavaScript图形绘制技巧计算》、《JavaScript切换特效与本领总括》、《JavaScript错误与调度技艺总计》、《JavaScript数据构造与算法工夫总计》及《JavaScript数学生运动算用法总计》

期望本文所述对大家JavaScript程序设计具有利于。

发表评论

电子邮件地址不会被公开。 必填项已用*标注