canvas实现弹球的代码示例

nbsp;html&gt;    <meta>    <title>弹球</title>    <script></script><canvas></canvas><script>    // 全局canvas    let canvas = document.getElementById("canvas");    let context = canvas.getContext("2d");    // 弹球对象    class Ball{        x = 100;        y = 40;        xSpeed = -2;        ySpeed = -2;        constructor(){};        getX(){            return this.x;        }        getY(){            return this.y;        }        setX(x){            this.x = x;        }        setY(y){            this.y = y;        }        getXSpeed(){            return this.xSpeed;        }        setXSpeed(xSpeed){            this.xSpeed = xSpeed;        }        getYSpeed(){            return this.ySpeed;        }        setYSpeed(ySpeed){            this.ySpeed = ySpeed;        }        // 绘制小球的方法        draw = () => {            context.beginPath();            context.arc(this.x, this.y, 10, 0, Math.PI * 2, false);            context.strokeRect(0, 0, 400, 400);            context.fill();        };        // 移动操作        move = () => {            this.x = this.x + this.xSpeed;            this.y = this.y + this.ySpeed;        };        // 边缘检测,碰撞检测        checkCanvas = (panel) => {            // 左右            if(this.x < 5 || this.x > 400 - 5){                this.xSpeed = -this.xSpeed;            }            // 上方            if(this.y < 0){                this.ySpeed = -this.ySpeed;            }            // 下方            // 碰到挡板            if(this.y > 390 - 10){                if(this.x > panel.x && this.x < panel.xSize + panel.x){                    this.ySpeed = -this.ySpeed;                }else{                    alert("游戏结束");                    this.x = 100;                    this.y = 10;                }            }        }    }    // 增加一个挡板对象    class Panel{        constructor(){};        // 左x        x = 200;        // 左y        y = 390;        // 长度        xSize = 50;        // 宽度        ySize = 5;        draw(){            context.fillRect(this.x, this.y, this.xSize, this.ySize);        }    }    // 创建出一个小球对象    let ball = new Ball();    // 创建出挡板对象    let panel = new Panel();    // 每10秒为一帧    window.setInterval(() => {        // 清空画布        context.clearRect(0, 0, 400, 400);        // 画出小球        ball.draw();        // 画出挡板        panel.draw();        // 移动        ball.move();        // 进行边界判断        ball.checkCanvas(panel);    },10);    // 控制挡板    $("body").keydown((event) => {        if(event.keyCode == 37){            panel.x = panel.x - 5;            // 移出边界问题处理            if(panel.x < 0){                panel.x = 0;            }        }        if(event.keyCode == 39){            panel.x = panel.x + 5;            // 移出边界处理            if(panel.x + panel.xSize > 400){                panel.x = 400 - panel.xSize;            }        }    })</script>