首页 / H5教程

    canvas实现弹球的代码示例

    类型:转载      发布者:不言2019-02-13 14:27:36

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

    效果

    4050576798-5c63384c6f19c_articlex.png


    代码

    <!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>

    思路

    这就是俩对象,,一个依赖于另一个。。
    碰撞检测时实的坐标判断,碰撞完成以后两个速度分量为取反即可。
    事件是左右事件。。移动即可。
    需要时实刷新,即,帧的概念

    以上就是canvas实现弹球的代码示例的详细内容,更多请关注php中文网其它相关文章!

    本文来源于:https://segmentfault.com/a/1190000018132933,如有侵犯,请联系删除
php中文网第五期线上直播培训班

PHP中文网

未登录