原生JS怎么实现多个小球碰撞反弹效果

这篇文章主要介绍了原生JS怎么实现多个小球碰撞反弹效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联公司提供高防主机、云服务器、香港服务器、绵阳电信机房

js有什么特点

1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,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 + ")";     }     //获得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]);     }   

运行效果:

原生JS怎么实现多个小球碰撞反弹效果

感谢你能够认真阅读完这篇文章,希望小编分享的“原生JS怎么实现多个小球碰撞反弹效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网站标题:原生JS怎么实现多个小球碰撞反弹效果
网站路径:http://myzitong.com/article/jpdghp.html

其他资讯