js实现小球随机运动

最新推荐文章于 2022-08-11 21:35:09 发布

子月吾生

最新推荐文章于 2022-08-11 21:35:09 发布

阅读量2.5k

点赞数 1

分类专栏： JS 实践案列

本文链接：https://blog.csdn.net/Sunday97/article/details/101649248

版权

本文介绍如何使用JavaScript创建一个动态效果，让小球在网页上进行随机运动。通过结合HTML、CSS和JavaScript，我们可以实现一个趣味性的交互式小球动画。内容包括小球的初始位置设定、运动方向与速度的随机生成以及碰撞检测等关键点。

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

效果图：
在这里插入图片描述

HTML

  <div class='box'>
    <div class='ball'></div>
  </div>

style:

.box{
  width:300px;
  height:400px;
  background-color:green;
  opacity:0.5;
  margin:auto;
  position:relative;
}
.ball{
  width:20px;
  height:20px;
  border-radius:50%;
  background-color:yellow;
  position:absolute;
}

javascript:

window.onload = function() {
       var ball = document.getElementsByClassName('ball')[0];
       var box = document.getElementsByClassName('box')[0];
    function ballMove() {
      var speed = 2;//定义总体速度
      //随机设置小球的初始位置
      var ballX = (box.offsetWidth - ball.offsetWidth) * Math.random();
      var ballY = (box