【笔记】直播编程写游戏

饮水思源：https://www.bilibili.com/video/av12296198

1、画背景

    game.draw = function() {
        // draw background
        game.context.fillStyle = "lightcoral";
        game.context.fillRect(0, 0, 400, 300);
        // draw
        game.drawImage(paddle);
        game.drawImage(ball);
        for (let i = 0; i != bricks.length; ++i) {
            if (bricks[i].alive) {
                game.drawImage(bricks[i]);
            }
        }
        // 显示分数
        game.context.fillStyle = "white";
        game.context.font = "28px serif";
        game.context.fillText("你的分数：" + game.score, 30, 100);
    };

2、添加一个拖动小球的功能（用于测试）顺便把makeBall()改为class Ball

let pause = false;
let enableDebugMode = function(game, enable) {
    if (!enable) {
        return;
    }
    window.addEventListener("keydown", event => {
        if (event.key == 'p') {
            pause = !pause;
        }
    });
    document.querySelector("#id-input-speed").addEventListener("input", event => {
        let newFps = Number(event.target.value);
        game.fps = newFps + 1; // 防止为0
    });
    
    
};

let __main = function() {
    let game = makeGuaGame();
    enableDebugMode(game, true);

    let paddle = makePaddle();
    let ball = new Ball();
    let bricks = loadLevel(1);

    /**
     * 手动更新数据
     */
    game.registerAction('a', function() {
        paddle.moveLeft();
    });
    game.registerAction('d', function() {
        paddle.moveRight();
    });
    game.registerAction('f', function() {
        ball.fire();
    });
    // 鼠标拖动小球功能实现
    let pressTheBall = false;
    game.canvas.addEventListener("mousedown", event => {
        if (ball.inBall(event.offsetX, event.offsetY)) {
            pressTheBall = true;
        }
    });

    game.canvas.addEventListener("mouseup", event => {
        pressTheBall = false;
    });
    
    game.canvas.addEventListener("mousemove", event => {
        if (pressTheBall) {
            ball.x = event.offsetX;
            ball.y = event.offsetY;
        }
    });

    /**
     * 自动更新数据
     */
    game.update = function() {
        if (pause) { // 暂停球的移动
            return;
        }

        ball.move();
        if (paddle.collide(ball)) {
            ball.反弹();
        }
        
        for (let i = 0; i != bricks.length; ++i) {
            if (bricks[i].collide(ball)) {
                bricks[i].hit();
                ball.反弹();
                game.score++;
            }
        }
    };

    /**
     * 渲染数据
     */
    game.draw = function() {
        // draw background
        game.context.fillStyle = "lightcoral";
        game.context.fillRect(0, 0, 400, 300);
        // draw
        game.drawImage(paddle);
        game.drawImage(ball);
        for (let i = 0; i != bricks.length; ++i) {
            if (bricks[i].alive) {
                game.drawImage(bricks[i]);
            }
        }
        // 显示分数
        game.context.fillStyle = "white";
        game.context.font = "28px serif";
        game.context.fillText("你的分数：" + game.score, 30, 100);
    };

    loadImgs().then(() => {
        game.begin();        
    });
};

class Ball {
    constructor() {
        this.img = imgFromPath(imgPaths.ball);
        this.x = 200;
        this.y = 200;
        this.speedX = 10;
        this.speedY = -10;
        this.fired = false;
    }
    
    fire() {
        this.fired = true;
    }
    
    move() {
        if(this.fired) {
            if(this.x > 400 || this.x < 0) {
                this.speedX *= -1;
            } else if(this.y > 300 || this.y < 0) {
                this.speedY *= -1;
            }
            this.x += this.speedX;
            this.y += this.speedY;
        }        
        log(this.x, this.y);
    }
    
    反弹() {
        this.speedY *= -1;
    }
    
    // 判定某个坐标是否在球里面
    inBall() {
        let ballW = this.img.naturalWidth;
        let ballH = this.img.naturalHeight;
        return x >= this.x && x <= this.x + ballW &&
            y >= this.y && y <= this.y + ballH;        
    }
}

3、改进碰撞函数：暂时不填