SnakeJS/Block.js at main · OlympicAngel/SnakeJS · 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
class Block {
    static width = 10;
    static ration = 1;
    constructor(x, y, color = "lime") {
        this.x = x;
        this.y = y;
        this.color = color;
    }

    /**
     *
     * @param {CanvasRenderingContext2D} ctx
     */
    draw(ctx) {
        //set color
        ctx.fillStyle = this.color;
        //draw block
        ctx.fillRect(this.x * Block.width,
            this.y * Block.width,
            Block.width,
            Block.width)
    }

    drawHead(ctx, direction) {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x * Block.width + direction[0] * Block.width * 0.8 / 2 + Block.width * 0.8 / 8,
            this.y * Block.width + direction[1] * Block.width * 0.8 / 2 + Block.width * 0.8 / 8,
            Block.width * 0.8,
            Block.width * 0.8)
    }

    drawApple(ctx) {

        ctx.fillStyle = "lightgreen";
        ctx.fillRect(this.x * Block.width + Block.width * 0.45,
            this.y * Block.width - Block.width * 0.1,
            Block.width * 0.3,
            Block.width * 0.3)

        ctx.fillStyle = this.color;
        //top
        ctx.fillRect(this.x * Block.width + Block.width * 0.05,
            this.y * Block.width + Block.width * 0.1,
            Block.width * 0.4,
            Block.width * 0.1)

        ctx.fillRect(this.x * Block.width + Block.width * 0.55,
            this.y * Block.width + Block.width * 0.1,
            Block.width * 0.4,
            Block.width * 0.1)


        //middle
        ctx.fillRect(this.x * Block.width,
            this.y * Block.width + Block.width * 0.2,
            Block.width,
            Block.width * 0.7)


        //bottom
        ctx.fillRect(this.x * Block.width + Block.width * 0.15,
            this.y * Block.width + Block.width * 0.9,
            Block.width * 0.3,
            Block.width * 0.1)

        ctx.fillRect(this.x * Block.width + Block.width * 0.55,
            this.y * Block.width + Block.width * 0.9,
            Block.width * 0.3,
            Block.width * 0.1)

    }
}