首页用JS写一个小球在方框内碰撞到方框边界的网页动画

用JS写一个小球在方框内碰撞到方框边界的网页动画

时间: 2023-11-30 17:03:18 浏览: 63

好的，以下是一个用JS实现小球在方框内碰撞到边界的网页动画： ```html <!DOCTYPE html> <html> <head> <title>Ball Bouncing Animation</title> <style> #container { width: 500px; height: 500px; border: 1px solid black; position: relative; } #ball { width: 50px; height: 50px; border-radius: 25px; background-color: red; position: absolute; } </style> </head> <body> <div id="container"> <div id="ball"></div> </div> <script> var container = document.getElementById("container"); var ball = document.getElementById("ball"); // 初始位置和速度 var x = 0; var y = 0; var vx = 5; var vy = 2; function animate() { // 小球碰到左右边界时反弹 if (x + vx > container.clientWidth - ball.clientWidth || x + vx < 0) { vx = -vx; } // 小球碰到上下边界时反弹 if (y + vy > container.clientHeight - ball.clientHeight || y + vy < 0) { vy = -vy; } // 更新小球位置 x += vx; y += vy; ball.style.left = x + "px"; ball.style.top = y + "px"; // 递归调用动画函数 requestAnimationFrame(animate); } // 开始动画 animate(); </script> </body> </html> ``` 这个网页动画会在一个500x500像素的方框内显示一个红色的小球，小球会在方框内反复弹跳，直到页面被关闭。你可以将上面的代码复制到一个HTML文件中并在浏览器中打开，就可以看到这个动画效果了。

阅读全文