planning/snake.html at main · FAC-community/planning · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Snake Game</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        #gameCanvas {
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        const gridSize = 20;
        const tileCount = canvas.width / gridSize;

        let snake, food, dx, dy, score, gameRunning;

        function initGame() {
            snake = [
                {x: 10, y: 10},
            ];
            food = {x: 15, y: 15};
            dx = 0;
            dy = 0;
            score = 0;
            gameRunning = true;
        }

        initGame();

        document.addEventListener('keydown', handleKeyPress);

        function handleKeyPress(event) {
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const UP_KEY = 38;
            const DOWN_KEY = 40;
            const SPACE_KEY = 32;

            const keyPressed = event.keyCode;

            if (keyPressed === SPACE_KEY && !gameRunning) {
                initGame();
                return;
            }

            if (!gameRunning) return;

            const goingUp = dy === -1;
            const goingDown = dy === 1;
            const goingRight = dx === 1;
            const goingLeft = dx === -1;

            if (keyPressed === LEFT_KEY && !goingRight) {
                dx = -1;
                dy = 0;
            }
            if (keyPressed === UP_KEY && !goingDown) {
                dx = 0;
                dy = -1;
            }
            if (keyPressed === RIGHT_KEY && !goingLeft) {
                dx = 1;
                dy = 0;
            }
            if (keyPressed === DOWN_KEY && !goingUp) {
                dx = 0;
                dy = 1;
            }
        }

        function drawGame() {
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            if (!gameRunning) {
                ctx.fillStyle = 'black';
                ctx.font = '30px Arial';
                ctx.fillText('Game Over!', canvas.width / 3.5, canvas.height / 2 - 30);
                ctx.font = '20px Arial';
                ctx.fillText('Press Space to Restart', canvas.width / 3.5, canvas.height / 2 + 20);
                ctx.fillText('Final Score: ' + score, canvas.width / 3.5, canvas.height / 2 + 50);
                return;
            }

            moveSnake();

            ctx.fillStyle = 'green';
            for (let i = 0; i < snake.length; i++) {
                ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize - 2, gridSize - 2);
            }

            ctx.fillStyle = 'red';
            ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);

            ctx.fillStyle = 'black';
            ctx.font = '20px Arial';
            ctx.fillText('Score: ' + score, 10, 25);
        }

        function moveSnake() {
            const head = {x: snake[0].x + dx, y: snake[0].y + dy};
            snake.unshift(head);

            if (head.x === food.x && head.y === food.y) {
                score++;
                generateFood();
            } else {
                snake.pop();
            }

            if (gameOver()) {
                gameRunning = false;
            }
        }

        function generateFood() {
            food.x = Math.floor(Math.random() * tileCount);
            food.y = Math.floor(Math.random() * tileCount);
        }

        function gameOver() {
            for (let i = 4; i < snake.length; i++) {
                if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;
            }
            const hitLeftWall = snake[0].x < 0;
            const hitRightWall = snake[0].x > tileCount - 1;
            const hitTopWall = snake[0].y < 0;
            const hitBottomWall = snake[0].y > tileCount - 1;
            return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
        }

        function gameLoop() {
            drawGame();
            setTimeout(gameLoop, 150); // Increased from 100 to 150 to slow down the snake
        }

        gameLoop();
    </script>
</body>
</html>