How to achieve the ball beating effect in javascript

This time I will show you how to achieve the bouncing effect of the ball with javascript. What are the precautions for javascript to achieve the bouncing effect of the ball. The following is a practical case. Let’s take a look. .

What we are introducing today is a cool animation effect achieved through javascript. I will show you the specific effects through pictures

---

---

After being released, these small balls will move within a specified range. The most critical part is that the various styles of these small balls are randomly obtained, so a cool effect appears. The main thing is that the various styles of these small balls are randomly obtained. The code used to generate random numbers is as follows:

//获取一个范围内的随机数random返回一个大于0小于1的一个随机数 
            function selectFrom(Lowervalue,upperValue){ 
                var choices=upperValue-Lowervalue+1; 
                return Math.floor(Math.random()*choices+Lowervalue); 
            }

After that, the various styles of these small balls are obtained through random functions. The remaining part is related to positioning. Each small ball is a p. They are all absolute positioning. The position of these small balls relative to the parent container is obtained through offsetLeft to prevent them from running out of the boundary. As long as the implementation method is to obtain the relative position of the p through offsetLeft, it will be judged when the current period moves to the boundary. , let the speed of this p equal to the opposite of the speed,

        //设置运行速度
            Circle.prototype.run=function(){
                var maxLeft=1435-this.r*2;                var maxTop=700-this.r*2;                var that=this;                //使用间隔式计时器
                setInterval(function(){
                    var left=that.p.offsetLeft + that.speedX;                    var top=that.p.offsetTop + that.speedY;                    if(left<=0)
                    {
                        left=0;
                        that.speedX *=-1;
                    }                    if(top<=0)
                    {
                        top=0;
                        that.speedY *=-1;
                    }                    if(left>=maxLeft)
                    {
                        left=maxLeft;
                        that.speedX*=-1;
                    }                    if(top>=maxTop)
                    {
                        top=maxTop;
                        that.speedY*=-1;
                    }
                    that.p.style.left=left+"px";
                    that.p.style.top=top+"px";
                },30)
            }

After that, you can see the effect of these pinballs moving within a range:

---

---

The complete code for the entire effect is as follows:

This also involves the use of this. When using another function inside the function, you must determine the scope of the current function. , distinguish the scope pointed by this. When calling internally, you can use variables externally to save the scope pointed by this. I hope this will be helpful to your study.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Solutions to common CSS compatibility issues

Web front-end browser compatibility issues solution

The above is the detailed content of How to achieve the ball beating effect in javascript. For more information, please follow other related articles on the PHP Chinese website!