BreakOut-Game/CanvasBall.js at main · OlympicAngel/BreakOut-Game · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
class CanvasBall extends CanvasItem {
    static speed = 5
    /**
     * Brick item
     * @param {Number} x
     * @param {Number} y
     * @param {Number} r
     * @param {String} color
     */
    constructor(x = 0, y = 0, r = 20, color = "#ff0000") {
        super(x, y);
        this.r = r;
        this.color = color;
        this.velocity = [0.5 - Math.random() * 1, -1];
        this.speed = CanvasBall.speed;
    }

    reset(x, y) {
        this.x = x;
        this.y = y;
        this.speed = CanvasBall.speed;
        this.velocity = [1 - Math.random() * 1, -1]
    }

    draw() {
        if (this.checkOutbound())
            return;

        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.r / 2, 0, 360)
        ctx.fill();
        ctx.closePath();
    }

    update() {
        if (this.checkOutbound()) {
            balls = balls.filter(b => b != this)
            return true;
        }

        this.x += this.velocity[0] * this.speed;
        this.y += this.velocity[1] * this.speed;

        if (this.x + this.r > ctx.canvas.width || this.x - this.r / 2 <= 0)
            this.velocity[0] *= -1;
        else if (this.y - this.r / 2 <= 0)
            this.velocity[1] *= -1;

        if (this.checkOutbound())
            return true;

        return false;
    }

    checkOutbound() { return this.y >= ctx.canvas.height; }


    /**
     *
     * @param {*} grid
     * @returns {CanvasBrick}
     */
    testCollision(grid) {
        //find a brick that is an a brick region from grid
        function findInGrid(dot) {
            const lineRegion = ~~(dot.y / CanvasBrick.height),
                xRegion = ~~(dot.x / CanvasBrick.width)
            if (grid[lineRegion]?.[xRegion])
                return [lineRegion, xRegion]
        }

        //calc all contact dots possible (using square)
        const contactDots = [
            { y: this.y + this.r / 2, x: this.x, location: "bottom" }, //bottom
            { y: this.y - this.r / 2, x: this.x, location: "top" }, //top
            { y: this.y, x: this.x + this.r / 2, location: "right" }, //right
            { y: this.y, x: this.x - this.r / 2, location: "left" } //left
        ]

        //attempt find a dot the touches a brick
        const touchingDot = contactDots.find(findInGrid);
        if (!touchingDot)
            return;

        //get the brick
        const brickPos = findInGrid(touchingDot);
        /**@type {CanvasBrick} */
        const brick = grid[brickPos[0]][brickPos[1]];

        switch (touchingDot.location) {
            case "bottom":
            case "top":
                //if on top/bottom hit & but x is on the border => hit on the side of the ball
                if (this.x >= brick.x + CanvasBrick.width + this.speed * this.velocity[0] ||
                    this.x <= brick.x + this.speed * this.velocity[0])
                    this.velocity[0] *= -1;
                else
                    this.velocity[1] *= -1;
                break;
            case "left":
            case "right":

                //if on left/right hit & but y is on the border => hit on the side of the ball
                if (this.y >= brick.y + CanvasBrick.height + this.speed * this.velocity[1] ||
                    this.y <= brick.y + this.speed * this.velocity[1])
                    this.velocity[1] *= -1;
                else
                    this.velocity[0] *= -1;
        }

        this.velocity[0] += 0.1 - 0.2 * Math.random()

        delete grid[brickPos[0]][brickPos[1]];//remove brick
        return brick;
    }
}