Detailed example of JS realizing the elastic collision effect of small balls-JS Tutorial-php.cn

Detailed example of JS realizing the elastic collision effect of small balls

小云云

Release： 2017-12-22 10:23:05

Original

2218 people have browsed it

JavaScript is a client-side scripting language that is object- and event-driven and relatively secure. It is also a scripting language widely used in client-side Web development. It is often used to add dynamic functions to HTML web pages, such as responding to users. various operations. This article mainly introduces JS to realize the elastic collision effect of small balls. The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it. I hope it can help everyone.

1. HTML code (body part)

 <body>
   <!--只需要做一个大p包裹几个小p即可，你想要几个小球碰撞就在内部做几个p即可，这里我们做了6个小球-->
   <p id="main">
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
   </p> 
 </body>

Copy after login

The above body part is complete, now we add the body part The p does some small styling.

2. CSS ball style part

<style type="text/css">
   /*将body默认的margin和padding部分去掉*/
   *{
     margin: 0px;
     padding: 0px;
    }
    /*采用定位的方式，让小球运动起来*/
    #main{
      margin: 0px auto;
     position: relative;
   }
   /*小球的样式*/
   #main p{
     overflow: hidden;
     position: absolute;
     width: 80px;
     height: 80px;
    opacity: 0.5;
     border-radius: 50%;
     background-color: red;
   }
 </style>

Copy after login

The ball needs to move. We give the ball and it Add positioning to the parent element, and finally use js to change its top, bottom, left, and right values to make the ball move. Now that the style of our ball is ready, the following js code is the most important thing.

3.1 Basic knowledge of Android events

In fact, we can fully realize the function of collision detection of a small ball through the above code. But just the above code will still have certain bugs, that is, when there is a scroll bar on the right side of the entire website, when the ball hits the right side of the screen, a horizontal scroll bar will appear for a moment, which is taboo when building a website. Yes, the appearance of the horizontal scroll bar is too ugly. So we can solve it with the following code.

//滚动条宽度计算函数
    function getScrollbarWidth() {
      var oP = document.createElement("p"),
        styles = {
          width: "100px",
          height: "100px",
          overflowY: "scroll"
        }, i, scrollbarWidth;
      for (i in styles) oP.style[i] = styles[i];
      document.body.appendChild(oP);
      scrollbarWidth = oP.offsetWidth - oP.clientWidth;
      oP.remove();
      return scrollbarWidth;
    }

Copy after login

The above is a function that calculates the width of the scroll bar. This function can calculate the width of the scroll bar on the right. We only need to select "Automatically adjust according to the size of the browser window" "The movement space of the ball", call this function

var scrollbarWidth = getScrollbarWidth(); Modify the maximum movement width of the ball maxW=window.innerWidth-circles[0 ].clientWidth-scrollbarWidth ;This bug will be corrected.

Related recommendations:

Two JS methods to realize the parabolic trajectory movement of the ball

JS method to obtain various pinyin types

JS method to get age based on date of birth

The above is the detailed content of Detailed example of JS realizing the elastic collision effect of small balls. For more information, please follow other related articles on the PHP Chinese website!