JS achieves the Elastic Collision Effect of Small balls and js small ball elastic collision

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.