snake.js/script.js at master · sokoloowski/snake.js · 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
const gameboard = document.getElementById("gameboard");
const gameboardCtx = gameboard.getContext("2d");
let direction = "right";
let lost = false
let paused = true;
let movement;
let moved = false;

color = {
    yellow: "#f0db4f",
    black: "#323330",
    red: "#f44336",
    green: "#4caf50",
};

let board = {
    width: 400,
    height: 400,
};

let snake = [
    { x: 200, y: 200 },
    { x: 190, y: 200 },
    { x: 180, y: 200 },
    { x: 170, y: 200 },
    { x: 160, y: 200 },
];

let apple = {
    x: -10,
    y: -10,
};

function clearCanvas() {
    gameboardCtx.fillStyle = color.black;
    gameboardCtx.strokeStyle = color.yellow;
    gameboardCtx.fillRect(0, 0, board.width, board.height);
    gameboardCtx.strokeRect(0, 0, board.width, board.height);

    gameboardCtx.strokeStyle = color.red;
    gameboardCtx.strokeRect(apple.x, apple.y, 10, 10);
}

function drawSnake() {
    snake.forEach((snakePart) => {
        gameboardCtx.strokeStyle = color.green;
        gameboardCtx.strokeRect(snakePart.x, snakePart.y, 10, 10);
    });
}

function moveSnake() {
    dx = direction == "right" ? 10 : direction == "left" ? -10 : 0;
    dy = direction == "down" ? 10 : direction == "up" ? -10 : 0;
    const head = {
        x: (snake[0].x + dx + board.width) % board.width,
        y: (snake[0].y + dy + board.height) % board.height,
    };
    if (inSnake(head.x, head.y)) {
        gameOver();
    }
    if (head.x == apple.x && head.y == apple.y) {
        placeApple();
        let points = document.getElementById("score").innerText;
        document.getElementById("score").innerText = ++points;
    } else {
        snake.pop();
    }
    snake.unshift(head);
    moved = true;
}

function placeApple() {
    do {
        apple.x = Math.floor(Math.random() * (board.width / 10)) * 10;
        apple.y = Math.floor(Math.random() * (board.height / 10)) * 10;
    } while (inSnake(apple.x, apple.y));
}

function inSnake(x, y) {
    res = false
    snake.forEach((snakePart) => {
        if (snakePart.x == x && snakePart.y == y) {
            res = true;
            return;
        }
    });
    return res;
}

document.addEventListener("keydown", (event) => {
    if (!paused && moved) {
        if (event.key == "ArrowRight" && direction != "left") {
            direction = "right";
        }
        if (event.key == "ArrowLeft" && direction != "right") {
            direction = "left";
        }
        if (event.key == "ArrowDown" && direction != "up") {
            direction = "down";
        }
        if (event.key == "ArrowUp" && direction != "down") {
            direction = "up";
        }
        moved = false;
    }
    if (event.key == "Escape" && !lost) {
        if (paused) {
            placeApple();
            movement = setInterval(() => {
                clearCanvas();
                moveSnake();
                drawSnake();
            }, 100);
        } else {
            clearInterval(movement);
        }

        paused = !paused;
    }
});

function gameOver() {
    clearInterval(movement);
    lost = true;
    gameboardCtx.fillStyle = color.red;
    gameboardCtx.font = "30px Arial";
    gameboardCtx.textAlign = "center";
    gameboardCtx.fillText("Game over!", board.width / 2, 50);
    gameboardCtx.font = "20px Arial";
    gameboardCtx.fillText("Reload page to try again", board.width / 2, 80);
}

clearCanvas();
gameboardCtx.fillStyle = color.yellow;
gameboardCtx.font = "30px Arial";
gameboardCtx.textAlign = "center";
gameboardCtx.fillText("Press Esc to start", board.width / 2, 50);
drawSnake();