开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js随机运动的小球

在JavaScript中实现一个随机运动的小球，通常涉及到HTML5的Canvas绘图和JavaScript的动画逻辑。以下是一个简单的示例，展示了如何创建一个小球，并使其在画布上随机移动。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Random Moving Ball</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

class Ball {
    constructor(x, y, radius, dx, dy) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.dx = dx;
        this.dy = dy;
        this.color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    }

    update() {
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
            this.dx = -this.dx;
        }
        if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
            this.dy = -this.dy;
        }
        this.x += this.dx;
        this.y += this.dy;
        this.draw();
    }
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

const ball = new Ball(
    canvas.width / 2,
    canvas.height / 2,
    20,
    getRandomInt(-5, 5),
    getRandomInt(-5, 5)
);

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ball.update();
}

animate();

解释

HTML部分：创建一个canvas元素，用于绘制小球。
JavaScript部分：
- Ball类：定义小球的属性（位置、半径、速度、颜色）和方法（绘制和更新位置）。
- getRandomInt函数：生成一个指定范围内的随机整数。
- 创建一个Ball实例，初始位置在画布中心，速度为随机值。
- animate函数：使用requestAnimationFrame实现动画循环，每次循环清除画布并更新小球的位置。

应用场景

游戏开发：用于创建简单的动画效果，如弹球游戏。
数据可视化：用于展示动态数据的变化。
教育演示：用于教学JavaScript动画和Canvas绘图。

可能遇到的问题及解决方法

小球速度过快或过慢：可以通过调整getRandomInt函数的参数来控制速度范围。
小球卡在边界：确保在更新位置时正确反转速度方向。
性能问题：对于大量小球，可以考虑使用requestAnimationFrame和批量绘制优化性能。

这个示例展示了如何使用JavaScript和Canvas创建一个简单的随机运动小球，并解释了相关的基础概念和应用场景。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

求小球运动路径

/* 功能：求小球运动路径日期：2013-4-19 */ #include #include int main(void) { int n;...double hight,s; for (hight=100.0,s=0,n=1;n<=10;n++) { hight=hight/2.0; printf("第%d次反弹的高度：%.6lfn",...n,hight); s=s+hight; } s=s+100.0; printf("小球共经过的路程：%.6lfn",s); system ("pause"); return 0; }

4333 0

【Unity】控制小球运动

搭建场景建立地面Plane、小球Player和四面墙Wall。...小球运动脚本给小球创建一个刚体（有重力的物体），并添加一个Player脚本；脚本编写如下： using System.Collections; using System.Collections.Generic...Debug.Log(h); (1,2,3) * 2 = (2,4,6) //加速 rd.AddForce(new Vector3(h, 0, v)); //x y z } } 相机跟随小球运动脚本...如果相机位置固定，小球运动的时候无法实时看到小球的运动，因此要让相机跟随运动，才有运动的效果；给相机添加FollowTarget脚本，并关联小球刚体：脚本编写如下： using System.Collections...UnityEngine; public class FollowTarget : MonoBehaviour { public Transform playerTransform; //球的位置

1001 0

【Flutter】Flutter 手势交互 ( 跟随手指运动的小球 )

文章目录一、Flutter 手势 - 跟随手指运动的小球三、完整代码示例三、相关资源一、Flutter 手势 - 跟随手指运动的小球 ---- 设置小球坐标变量 : 其中 currentX 是距离左侧边界的距离..., currentY 是距离右侧边界的距离 ; /// 当前小球的 x 坐标 double currentX = 0; /// 当前小球的 y 坐标 double currentY =...0; 小球的位置 : 小球是在 Stack 帧布局中的 Positioned 组件 , 其 left 和 top 字段值设置其坐标 , 分别对应 currentX 和 currentY 值 ; //...小球 Positioned( /// 当前位置 left: currentX, top: currentY, ) 监听事件 : 监听 GestureDetector 组件的 onPanUpdate...组件的位置 , 以达到小球移动的目的 ; /// 手势检测组件 child: GestureDetector( /// 移动操作 onPanUpdate: (e){ setState(

5250 0

Python+OpenGL绘制沿B样条曲线运动的红色小球

任务描述：绘制多条B样条曲线以及一个沿曲线运动的红色小球，具体功能有： 1）按1、2、3键可以切换1次B样条曲线、2次B样条曲线、3次B样条曲线； 2）鼠标左键选择一个控制点后按delete键可以删除该控制点...在任意空白位置单击鼠标右键可以结束上一段曲线并开始下一段曲线； 5）鼠标右键单击最后一个控制点可以将其删除； 6）按下鼠标左键选择一个控制点后可以拖动改变其位置； 7）鼠标右键单击除最后一个控制点之外的其他任意控制点可以将其重复一次...； 8）红色小球沿第偶数段B样条曲线循环移动； 9）按空格键可以切换是否显示控制点和控制多边形； 10）按字母r可以把图形恢复到初始状态。

3492 0

Js运动框架

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="div1" sty...

5.4K6 0

JS中的运动函数

分享一个JS封装的运动函数，里面分为弹性运动和缓冲运动两个方法，通过调用startMove()函数来实现动画效果。...css(obj, attr_in, value_in) }; } } var MOVE_TYPE = { BUFFER: 1, FLEX: 2 }; // 调用运动的函数...,根据不同类型调用不同的方法 function startMove(obj, oTarget, iType, fnCallBack, fnDuring) { var fnMove = null;...= setInterval(function () { fnMove(obj, oTarget, fnCallBack, fnDuring); }, 15); } // 缓冲运动方法...(obj.timer); obj.timer = null; if (fnCallBack) fnCallBack.call(obj); } } // 弹性运动方法

2.4K2 0

用OpenGL实现粒子的随机运动

一、目的：掌握OpenGL中粒子的绘制、随机数的使用二、代码： #include "stdafx.h" #include #include //srand...GL_LIGHT0); //打开0#灯 glEnable(GL_DEPTH_TEST); //打开深度测试 } void display(void) { //通过循环更新每个粒子的位置...//平移 glTranslatef(0.0f, 0.0f, -4.0f);//总体旋转 glRotatef(rtri, 0.1, 1.0, 0.1); //每个粒子的位置变动...break; default: break; } } int main(int argc, char** argv) { //seed初始化随机数函数...); glutReshapeFunc(reshape); glutKeyboardFunc(keyboard); glutIdleFunc(display);//设置空闲时调用的函数

8135 0

JS-匀速运动-运动停止

DOCTYPE html> 匀速运动停止条件...top: 0; background-color: blueviolet; /*用这个标杆，发现div1并没有走到300的准确位置...top: 0; background-color: blueviolet; /*用这个标杆，发现div1并没有走到300的准确位置...}else{ speed = -7; } //这种个情况就是速度不能被整除的时候会出现的问题...div> 智能社的开发教程

2.4K4 0

js小效果之跟随鼠标移动的小球

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/120055629

1.6K2 0

【Android UI】Path 测量 PathMeasure ③ ( 使用 PathMeasure 绘制沿曲线运动的小球 )

文章目录一、使用 PathMeasure 绘制沿曲线运动的小球二、代码示例三、运行效果一、使用 PathMeasure 绘制沿曲线运动的小球 ---- 绘制圆形曲线 : 创建 Path 对象 ,...直接向其中添加圆形曲线即可 , 设置中心坐标以及半径 ; // 绘制的 Path Path path = new Path(); // 绘制圆形...每次绘制进度都增加千分之五 , 本次绘制完毕后 , 立刻开始下一次绘制 ; // 每次前进千分之五 mProgress += 0.005; // 到达结束点后, 继续循环运动...super.onDraw(canvas); // 每次前进千分之五 mProgress += 0.005; // 到达结束点后, 继续循环运动...0], pos[1], 20, mPaint); // 触发下一次绘制 invalidate(); } } 三、运行效果 ---- 运行时 , 圆是沿着曲线运动的

5702 0

原生JS实现各种运动之运动框架

给大家分享一个用原生JS实现的运动框架，并分别用改变高度、宽度、字体大小、边框、透明度来进行测试，欢迎大家复制粘贴及吐槽。原生JS...实现各种运动之运动框架 div { width: 100px; height: 50px;...} }; //获取属性值 function getStyle(obj, attr) { //用两种不同的情况处理兼容...obj.style.opacity = (iCur + iSpeed) / 100; } else { //设置其它属性的值

1.1K1 0

原生JS实现各种运动之缓冲运动

分享一个用原生JS实现的缓冲运动的小Demo，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。原生JS...实现各种运动之缓冲运动 #div1 { width: 100px; height: 100px;...oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'; } // 以标题的形式打印出来...iSpeed; }, 30); } 运动

1.5K1 0

原生JS实现各种运动之弹性运动

给大家分享一个用原生JS实现的弹性运动，效果如下：以下是代码实现，欢迎大家复制粘贴及吐槽。原生JS...实现各种运动之弹性运动 #div1 { width: 100px; height: 100px;...'px'; }, 30); } 运动

1.1K1 0

原生JS实现各种运动之重心运动

给大家分享一个用原生JS实现的重心运动，所谓重心运动即为一个元素在向下运动触底时呈一定角度的递减回弹，效果如下： ? 实现代码如下，欢迎大家复制粘贴及吐槽。原生JS...实现各种运动之重心运动 #div1 { width: 100px; height: 100px;...0.8; //误差强行赋值 l = 0; }; //当X轴的速度绝对值小于...//强行终止 iSpeedX = 0; }; //当Y轴的速度绝对值小于

1.1K1 0

原生JS实现各种运动之碰撞运动

给大家分享一个用原生JS实现的碰撞运动，效果如下：实现代码如下，欢迎大家复制粘贴及吐槽。原生JS...实现各种运动之碰撞运动 #div1 { width: 100px; height: 100px;...'px'; }, 30); } 运动

1.4K3 0

原生JS实现各种运动之链式运动

给大家分享一个用原生JS实现的链式运动，所谓链式运动即为一个属性变化完成后另一个属性接着发生变化，效果如下： ? 实现代码如下，欢迎大家复制粘贴及吐槽。原生JS...实现各种运动之链式运动 #div1 { width: 100px; height: 100px;... // 获取属性值 function getStyle(obj, attr) { // 用两种不同的情况处理兼容...obj.style.opacity = (iCur + iSpeed) / 100; } else { // 设置其它属性的值

1.2K2 0

原生JS实现各种运动之匀速运动

给大家分享一个用原生JS实现的匀速运动，效果如下： ? 需要注意的是，这种运动效果在实际的开发中用的比较少，用的更多的还是弹性运动和缓冲运动，以下是代码实现，欢迎大家复制粘贴及吐槽。原生JS...实现各种运动之匀速运动 #div1 { width: 100px; height: 100px;...} }, 30); } 运动

1.2K2 0

原生JS实现各种运动之复合运动

给大家分享一个用原生JS实现的复合运动，所谓复合运动就是在同一个进间段内不同的属性都会发生变化，效果如下： ? 实现代码如下，欢迎大家复制粘贴及吐槽。原生JS...实现各种运动之复合运动 #div1 { width: 100px; height: 100px;... 运动

9702 0

js运动框架，兼容opacity

function getStyle(obj, name) { if (obj.currentStyle) { return obj....

2.3K4 0

（36）JS运动之使物体向右运动「建议收藏」

当开启一个定时器的时候。必须先清除定时器。这是为了防止鼠标连续点击button而开启多个定时器，导致物体的速度加快等原因，其次要控制好物体的运动和停止。用if-else控制逻辑控制。 <!...从而导致速度变快 timer=setInterval(function (){ var speed=1; if(oDiv.offsetLeft>=300)//大于300时让物体停在那里，不一直运动下去...oDiv.offsetLeft+speed+'px'; } },30) } 运动

7725 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭