arcade_snake/script.js at master · sameer-manek/arcade_snake · 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
// game code

// todo: make arrow keys clickable on phones

var grid = document.getElementById('grid');
var snake = [];
var fruit = [];
var strokes = [[0,0]];
var move = false;
var score = 0;
var game_ended = false;

const grid_size = 24;

function update_score() {
    document.getElementById('score').innerHTML = score;
}

function render_grid() {
    let html_block = "";
    for(let i = 0; i < grid_size; i++) {
        html_block += '<div class="row">';
        for(let c = 0; c < grid_size; c++) {
            html_block += '<div class="cell"></div>';
        }
        html_block += '</div>';
    }

    grid.innerHTML = html_block;
}

function add_snake() {
    snake.push([
        random(0, grid_size),
        random(0, grid_size)
    ]);

    toggle_cell(snake[0], "red");
}

function add_fruit() {
    fruit = [
        random(0, grid_size),
        random(0, grid_size)
    ];

    snake.forEach(cell => {
        if (compare_matx(cell, fruit)) {
            fruit = [
                random(0, grid_size),
                random(0, grid_size)
            ];
        }
    })

    toggle_cell(fruit, "green");
}

function move_snake(key) {
    let v = [0, 0]; // velocity
    let tail = [...snake[snake.length-1]];
    let move = false;

    if (key === "ArrowLeft" && snake[0][1] > 0 && (snake.length === 1 || strokes[0][1] != 1)) {
        v = [0, -1];
        move = true;
    }

    if (key === "ArrowRight" && snake[0][1] < grid_size-1 && (snake.length === 1 || strokes[0][1] != -1)) {
        v = [0, 1];
        move = true;
    }

    if (key === "ArrowUp" && snake[0][0] > 0 && (snake.length === 1 || strokes[0][0] != 1)) {
        v = [-1, 0];
        move = true;
    }

    if (key === "ArrowDown" && snake[0][0] < grid_size-1 && (snake.length === 1 || strokes[0][0] != -1)) {
        v = [1, 0];
        move = true;
    }

    if (move) {
        strokes.unshift(v);
        strokes = strokes.splice(0, snake.length+2);

        // update snake pos
        for(let i = 0; i < snake.length; i++) {
            toggle_cell(snake[i], "transparent");
            add_matx(snake[i], strokes[i]);
            toggle_cell(snake[i], "red");
        }

        // check if snake bit itself
        for (i = 1; i < snake.length; i++) {
            if (compare_matx(snake[0], snake[i])) {
                move = false;
                game_ended = true;

                document.getElementById("message").innerHTML = "<b>GAME ENDED - You bit yourself! Hit refresh to start new game</b>";
                break;
            }
        }

        if (compare_matx(snake[0], fruit)) {
            score += 1;
            add_fruit();
            update_score();

            snake.push(tail);
            toggle_cell(tail, "red");
        }
    }
}

function register_stroke () {}

function Init() {
    update_score();
    render_grid();
    add_snake();
    add_fruit();

    document.addEventListener("keydown", e => {
        if (!game_ended) move_snake(e.key)
    });
}

Init();