Home > Developer > JavaScript
JS achieves the Elastic Collision Effect of Small balls and js small ball elastic collision
I. HTML code (body part)
<Body> <! -- You only need to wrap a large div with a few small Divs. If you want to collide with a few small balls, just make a few divs inside, here we have made 6 small balls --> <div id = "main"> <div> </div> <div> </div> </body>
This completes the above body part. Below we will make some small styles for the div in the body.
Ii. CSS ball style section
<Style type = "text/css">/* remove the default margin and padding parts of the body */* {margin: 0px; padding: 0px ;} /* use the positioning method to move the ball */# main {margin: 0px auto; position: relative;}/* style of the ball */# main div {overflow: hidden; position: absolute; width: 80px; height: 80px; opacity: 0.5; border-radius: 50%; background-color: red;} </style>
The ball is to be moved. We add positioning to the ball and its parent element, and then use js to change its top, bottom, left, and right values to make the ball move. Now we have completed the style of the ball, and the following js Code is the top priority.
3.1 basic knowledge about Android events
In fact, we can use the above Code to completely implement a ball collision detection function. However, the above Code only has a certain bug, that is, when the entire website has a scroll bar on the right side, when the ball hits the right side of the screen, a horizontal scroll bar will appear instantly, this is a relatively taboo website, and the appearance of horizontal scroll bars is too ugly. So we can solve this problem through 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 used to calculate the scroll bar width. This function can calculate the width of the scroll bar on the right. We only need to call this function on "automatically adjust the moving space of the ball based on the size of the browser window ".
var scrollbarWidth = getScrollbarWidth(); Modify the maximum movement width of the ball.maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth In this way, the bug is modified.
Summary
The above section describes how to implement the elastic collision of small balls in Javascript. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
