jQuery 实现小球撞击动画

shifeng~

已于 2024-04-08 12:22:03 修改

阅读量851

点赞数 17

分类专栏：代码块文章标签： jquery 前端 javascript

于 2024-04-02 22:22:27 首次发布

本文链接：https://blog.csdn.net/qq_36330464/article/details/137294304

版权

代码块专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了一个使用JavaScript和jQuery实现的简单小球碰撞检测动画代码，展示了如何控制小球在页面上移动并根据边界调整方向。

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

单个小球运动的代码如下
多个小球运动的示例代码下载地址：https://download.csdn.net/download/qq_36330464/89073445

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小球撞击</title>
    <style>
      .ball {
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: green;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="ball"></span>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      // 定义小球的初始坐标
      var x0 = 0
      var y0 = 0

      // 定义小球当前的坐标
      var x = 0
      var y = 0

      // 1/-1改变小球移动的方向
      var directionX = 1
      var directionY = 1

      // 获取小球 DOM 元素
      var ball = $('.ball')

      function move(speed) {
        // offset() 返回的是所选元素相对于当前文档的坐标
        var vTop = ball.offset().top
        var vLeft = ball.offset().left
        // console.log('小球当前的坐标为：（' + vLeft + ',' + vTop + '）')

        x = x0 + vLeft + directionX * speed
        y = y0 + vTop + directionY * speed

        if (ball.offset().top + 50 >= $(document).height()) {
          directionY = -1
        } else if (y <= 0) {
          directionY = 1
        }
        if (ball.offset().left + 50 >= $(document).width()) {
          directionX = -1
        } else if (x <= 0) {
          directionX = 1
        }

        ball.css('top', y + 'px')
        ball.css('left', x + 'px')
      }

      // 每隔 1 毫秒执行一次 Move 函数，更新小球的位置
      setInterval(function () {
        move(1)
      }, 1)
    </script>
  </body>
</html>