breakout.js

class GameObj {
    constructor (x, y, wW, wH) {
        this.x = x;
        this.y = y;
        this.w = 0;
        this.h = 0;
        this.wW = wW;
        this.wH = wH;
        this.enabled = true;
        this.color = "#ffffff";
    }

    get pos() {
        return {x: this.x, y: this.y};
    }

    update(dt) {

    }

    draw(ctx) {

    }

    collide() {

    }
}

class Ball extends GameObj {
    constructor (x, y, r, wW, wH) {
        super(x, y, wW, wH);
        
        this.w = r;
        this.h = r;

        this.r = r;
        this.speed = 5;

        this.vel = {
            x: this.speed,
            y: -this.speed
        }

        this.bounceCooldown = 500;
        this.canBounce = true;

        this.color = "#ff0000";
    }

    update(dt) {
        this.x += this.vel.x;
        this.y += this.vel.y;

        if (this.x + this.r > this.wW || this.x - this.r < 0) {
            this.vel.x = -this.vel.x;
        }

        if (this.y + this.r > this.wH || this.y - this.r < 0) {
            this.vel.y = -this.vel.y;
        }
    }

    draw(ctx) {
        ctx.strokeStyle = this.color;
        ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
        ctx.strokeStyle = "#ffffff";
    }

    collide(obj) {
        let x = obj.x;
        let y = obj.y;
        if (!this.canBounce) return;
        if (obj.constructor.name == "Player") {
            x = obj.x + obj.w/2;
            if (this.x > x) {
                this.vel.x = this.speed;
            } else {
                this.vel.x = -this.speed;
            }
        }
        this.vel.y = -this.vel.y;
        this.canBounce = false;
        setTimeout(() => {
            this.canBounce = true;
        }, this.bounceCooldown);
    }
}

class Player extends GameObj {
    constructor (x, y, w, h, wW, wH) {
        super(x, y, wW, wH);
        this.w = w;
        this.h = h;
        this.color = "#ff0000";
    }

    update(dt) {
        
    }

    draw(ctx) {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.w, this.h);
        ctx.fillStyle = "#ffffff";
    }

    setPos(x, y) {
        if (x + this.w > this.wW) {
            this.x = this.wW - this.w;
            this.y = y;
        } else if (x < 0) {
            this.x = 0;
            this.y = y;
        } else {
            this.x = x;
            this.y = y;
        }
    }

    setPosCentered(x, y) {
        this.setPos(x - this.w/2, y - this.h/2);
    }
}

class Brick extends GameObj {
    constructor (x, y, w, h, wW, wH, color) {
        super(x, y, wW, wH);
        this.w = w;
        this.h = h;
        this.enabled = true;
        this.color = color;
    }

    draw(ctx) {
        if (this.enabled) {
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y, this.w, this.h);
            ctx.fillStyle = "#ffffff";
        }
    }

    collide(obj) {
        if (this.enabled) {
            this.enabled = false;
        }
    }
}

class Game {
    constructor (canvas, ctx) {
        this.setup(canvas, ctx);
        this.start();
    }

    setup(canvas, ctx) {
        this.time = 0;
        this.oldTime = 0;
        this.dt = 0;
        this.running = false;
        this.canvas = canvas;
        this.ctx = ctx;

        this.objects = {};

        this.addObject("player", new Player(750/2 - 96/2, 700, 96, 16, this.canvas.width, this.canvas.height));
        this.addObject("ball", new Ball(750/2, 675, 10, this.canvas.width, this.canvas.height));

        this.genBlocks(10, 5, 73, 32);
    }

    start() {
        this.running = true;
        window.requestAnimationFrame(this.loop.bind(this));
    }

    loop() {
        if (this.running) {
            this.time = Date.now();
            this.dt = this.time - this.oldTime;
            this.oldTime = Date.now();
            this.tick(this.dt);
            this.draw(ctx);
            window.requestAnimationFrame(this.loop.bind(this));
        }
    }

    tick(dt) {
        this.collide();
        Object.keys(this.objects).forEach(id => {
            let obj = this.objects[id];
            obj.update(dt);
        });
        this.ball.speed = 5 * (this.bricksCleared + 1)/10
    }

    draw() {
        let ctx = this.ctx;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        Object.keys(this.objects).forEach(id => {
            ctx.beginPath();
            ctx.fillStyle = "#FFFFFF";
            let obj = this.objects[id];
            obj.draw(ctx);
            ctx.closePath();
            ctx.fill();
        });
    }

    onKey(e) {
        switch (e.key) {
            case "left":

                break;
            case "right":

                break;
        }
    }

    onMouse(e) {
        let x = e.layerX;
        let y = e.layerY;

        this.player.setPosCentered(x, 700);
    }

    addObject(name, obj) {
        this.objects[name] = obj;
    }

    removeObject(name) {
        this.objects[name] = undefined;
    }

    get player() {
        return this.objects['player'];
    }

    get ball() {
        return this.objects['ball'];
    }

    genBlocks(xx, yy, w, h) {
        let num = 1;
        let colors = [
            "#ff0000",
            "#fcba03",
            "#fcf403",
            "#a1fc03",
            "#03fc14"
        ]
        for (let y = 0; y < yy; y++) {
            for (let x = 0; x < xx; x++) {
                this.addObject(`brick${num}`, new Brick((x * w) + 10, (y * h) + 150, w, h, this.ctx.width, this.ctx.height, colors[y]));
                num++;
            }
        }
    }

    collide() {
        Object.keys(this.objects).forEach(id => {
            let obj = this.objects[id];
            Object.keys(this.objects).forEach(id2 => {
                let obj2 = this.objects[id2];
                if (obj !== obj2 && obj.enabled && obj2.enabled) {
                    if (id == "ball") {
                        if (obj.x + obj.r > obj2.x && obj.x - obj.r < obj2.x + obj2.w) {
                            if (obj.y + obj.r > obj2.y && obj.y - obj.r < obj2.y + obj2.h) {
                                obj.collide(obj2);
                                obj2.collide(obj);
                            }
                        }
                    } else {
                        // if (obj.x + obj.w > obj2.x && obj.x < obj2.x + obj2.w) {
                        //     if (obj.y + obj.h > obj2.y && obj.y < obj2.y + obj2.h) {
                        //         if (id.startsWith('brick') && id2.startsWith('brick')) return;
                        //         obj.collide(obj2);
                        //     }
                        // }
                    }
                }    
            });
        });
    }

    get bricksCleared() {
        let num = 0;
        Object.keys(this.objects).forEach(id => {
            if (!id.startsWith("brick")) return;
            let obj = this.objects[id];
            if (!obj.enabled) {
                num++;
            }
        });
        return num;
    }
}

var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");

var wWidth = 750;
var wHeight = 750;

canvas.width = wWidth;
canvas.height = wHeight;

const game = new Game(canvas, ctx);

canvas.addEventListener('keydown', game.onKey.bind(game));
canvas.addEventListener('mousemove', game.onMouse.bind(game));