JS动画_碰撞

最新推荐文章于 2023-07-06 21:45:43 发布

心丿涅

最新推荐文章于 2023-07-06 21:45:43 发布

阅读量184

点赞数

分类专栏：前端文章标签： js动画

本文链接：https://blog.csdn.net/qq_38096598/article/details/101101521

版权

这篇博客介绍了如何使用JavaScript来创建一个动态的小球碰撞效果。通过代码实现，展示了在有限条件下，小球之间的碰撞交互，提供了一种视觉上的动态体验。

摘要由CSDN通过智能技术生成

小球碰撞效果

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>小球碰壁</title>
</head>

<body>
  <div id="borderDiv" style="width: 440px;height:440px;border:1px solid;margin: 40px 0 0 40px;position: relative;">
  </div>
  <script>
    var arr = [];

    init();

    function init() {
      arr.push(createBall(20, 2, 5, document.getElementById("borderDiv")));
      //每16ms移动一次
      setInterval(moveBall, 16);
    }

    /**
     * @author: 
     * @description: 创建小球
     * @param: Number r 半径, Number speed 移动速度, parent 父元素
     * @return: ball 小球元素对象
     * @Date: 2019-09-21 09:51:04
     */
    function createBall(r, speedX, speedY, parent) {
      if (!parent) {
        parent = document.body;
      }
      if (r <= 0) {
        r = 5;
      }
      var ball = document.createElement("div");
      setSt