canvas 小球碰撞的效果

1、 用canvas实现小球在局部的空间内，不停的滚动效果，代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>小球碰撞</title>
        </head>
        <style type="text/css">
            #myCanvas {
                border: 1px solid #000000;
            }
        </style>
        <body>
            <canvas id="myCanvas" width="500" height="500">浏览器不支持Canvas</canvas>
        </body>
    </html>
 
 
    <script type="text/javascript">
        var car = document.getElementById("myCanvas");
 
        var ctx = car.getContext("2d");
        var h = 500;
        var w = 500;
 
        var x = 100;
        var y = 100;
        var r = 20;
 
        //水平方向的速度
        var speedX = 4;
 
        //垂直方向的速度
        var speedY = 3;
 
        var Interval = setInterval(() => {
 
            //改变X的坐标
            x = x + speedX;
 
            //当x的位置加上半径大于等于总宽度的时候，代表小球刚好与右边边框相碰
            //当x的位置加上半径小于等于0的时候，代表小球刚好与左边边框相碰
            if (r + x >= w || x - r <= 0) {
                //当判断成立时，代表速度要取相反值，小球才会进行反方向运动
                speedX = -speedX;
            }
 
            //改变Y的坐标
            y = y + speedY;
 
            //当Y的位置加上半径大于等于总高度的时候，代表小球刚好与底边边框相碰
            //当Y的位置加上半径小于等于0的时候，代表小球刚好与上边边框相碰
            if (r + y >= h || y - r <= 0) {
                //当判断成立时，代表速度要取相反值，小球才会进行反方向运动
                speedY = -speedY;
            }
 
            //清空内容
            ctx.clearRect(0, 0, w, h);
 
            motion(x, y, randomHexColor());
        }, 10)
 
 
 
        function motion(x, y, color) {
            ctx.beginPath();
            ctx.arc(x, y, r, 0, Math.PI * 2);
 
            ctx.fillStyle = color;
            ctx.fill();
 
            ctx.strokeStyle = color;
            ctx.stroke();
            ctx.closePath();
        }
 
 
        //随机生成十六进制颜色
        function randomHexColor() {
            //生成ffffff以内16进制数
            var hex = Math.floor(Math.random() * 16777216).toString(16);
            //while循环判断hex位数，少于6位前面加0凑够6位
            while (hex.length < 6) {
                hex = '0' + hex;
            }
            //返回‘#'开头16进制颜色
            return '#' + hex;
        }
    </script>

　　

posted @   凌晨的粥  阅读(315)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae