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

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)

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

2. CSS ball style part

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;
    }

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!