canvas实现弹球的代码示例

本篇文章给大家带来的内容是关于canvas实现弹球的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果

代码

!DOCTYPE htML>
    html lang="zh_CN">
    head>
        meta charset="UTF-8">
        tITle>
    弹球/title>
        script src="https://code.jquery.COM/jquery-3.3.1.js">
    /script>
    /head>
    body>
    canvas id="canvas" width="400" height="400">
    /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>
    /body>
    /html>
    @H_360_19@
思路
这就是俩对象，，一个依赖于另一个。。
碰撞检测时实的坐标判断，碰撞完成以后两个速度分量为取反即可。
事件是左右事件。。移动即可。
需要时实刷新，即，帧的概念
以上就是canvas实现弹球的代码示例的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！