Canvas-2

碰撞检测

设计一个小球在矩形内运动，如果碰到边界则反弹回去

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小球碰撞检测</title>
    <style>
        canvas{
            border: 2px solid grey;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas width="500px" height="500px" id="canvas"></canvas>
    <script>
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');
        //定义一个函数来画圆
        let drawCircle = function(x,y,r,start,end,flag){
            ctx.beginPath();
            ctx.arc(x,y,r,start,end,flag);
            ctx.fillStyle = 'gold';
            ctx.fill();
            ctx.stroke();
        }
        let x = 100;
        let y = 100;
        let Xspeed = 10*Math.random();
        let Yspeed = 10*Math.random();
        let r = 30;
        //每隔20ms改变坐标位置，到达边界速度反向
        setInterval(()=>{
            ctx.clearRect(0,0,500,500);	//注意清除画布

            if((x+r>=500)||(x-r)<=0){
                Xspeed = -Xspeed;
            }
            if((y+r>=500)||(y-r)<=0){
                Yspeed = -Yspeed;
            }
            x = x+Xspeed;
            y = y+Yspeed;
            drawCircle(x,y,r,0,2*Math.PI,true)
        },20)
    </script>
</body>
</html>

碰撞小球

面向对象的小球

对于上述例子，可以有以下思考：

如果不同的小球，生成位置，半径，速度，颜色，都不同，那么产生的效果也不同

对于上述数据封装成一个小球类即可实现

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象小球</title>
    <style>
        canvas {
            border: 2px solid grey;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <canvas width="500px" height="500px" id="canvas"></canvas>
    <script>
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');
        let w = 500;
        let h = 500;
        //随机函数
        function r(num) {
            return Math.random() * num; //返回一个[0,num)的值
        }

        //构造函数
        function Ball() {
            this.x = 60 + r(380);
            this.y = 60 + r(380); //[60,440)
            this.r = r(50) + 10; //[10,60)
            this.color = '#' + parseInt((0xfff) * Math.random());
            this.Xspeed = r(20) + 5;
            this.Yspeed = r(20) + 5;

        }
		//让小球运动
        Ball.prototype.run = function () {
            if ((this.x + this.r >= w) || (this.x - this.r) <= 0) {
                this.Xspeed = -this.Xspeed;
            }
            if ((this.y + this.r >= h) || (this.y - this.r) <= 0) {
                this.Yspeed = -this.Yspeed;
            }
            this.x = this.x + this.Xspeed;
            this.y = this.y + this.Yspeed;

        }
		//显示小球
        Ball.prototype.show = function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);
            ctx.fillStyle = this.color;
            ctx.fill();
            ctx.stroke();
        }
        let BallArr = [];
        for (let i = 0; i < 10; i++) {
            let ball = new Ball();
            BallArr.push(ball);
            
        }
        setInterval(()=>{
            ctx.clearRect(0,0,w,h)
            for(let i=0;i<BallArr.length;i++){
                let ball = BallArr[i];
                ball.run();
                ball.show();
            }
        },100)
    </script>
</body>

</html>

面向对象的小球

HTML
#canvas
Canvas-2
https://blog-theta-ten.vercel.app/2022/04/05/Canvas-2/
作者
Chen
发布于
2022年4月5日
许可协议