飲水思源：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、改進碰撞函數：暫時不填

【筆記】直播編程寫遊戲 - 4