使用canvas实现一个圆球的触壁反弹

HTML

<canvas id="canvas" width="500" height="500" style="border: 1px solid #FF0000;"></canvas>

JS

1.获取上下文

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

2.实现一个球类

    class circle {
        constructor() {
            this.x = 25,
            this.y = 25,
            this.mx = Math.random()*5,
            this.my = Math.random()*3,
            this.radius = 25,
            this.color = 'blue',
            this.draw = function () {
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }

    };

3.new一个球

let ball = new circle();

4.实现动画函数

    const move = (function () {
        // 清除画布
        ctx.clearRect(0,0, canvas.width, canvas.height);
        
        // 重新绘制圆
        ball.draw();
        
        // 移动圆
        ball.x += ball.mx; // x坐标递增
        ball.y += ball.my; // y坐标递增
        
        // x轴坐标加移动的距离大于画布宽度(到达右边界) 或 x轴坐标加移动的距离等于0(到达左边界) 
        if (ball.x + ball.mx > canvas.width || ball.x + ball.mx < 0) {
            ball.mx = -ball.mx; // x轴坐标递减
        };
        // y轴坐标加移动的距离大于画布宽度(到达下边界) 或 y轴坐标加移动的距离等于0(到达上边界) 
        if (ball.y + ball.my > canvas.height || ball.y + ball.my < 0) {
            ball.my = -ball.my; // y轴坐标递减
        };
        
        // 递归调用当前方法
        window.requestAnimationFrame(arguments.callee);
    })();