Mind Codespaces — Solid Git Bridge

// loadingdecoding pod stream
Source
5.9 KB · main
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Snake Game</title>
7    <style>
8        * {
9            margin: 0;
10            padding: 0;
11            box-sizing: border-box;
12        }
13        body {
14            background: #1a1a2e;
15            min-height: 100vh;
16            display: flex;
17            flex-direction: column;
18            align-items: center;
19            justify-content: center;
20            font-family: 'Courier New', monospace;
21            color: #eee;
22        }
23        h1 {
24            margin-bottom: 20px;
25            text-shadow: 0 0 10px #00ff88;
26        }
27        #gameContainer {
28            position: relative;
29        }
30        canvas {
31            border: 3px solid #00ff88;
32            box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
33            background: #0f0f1a;
34        }
35        #score {
36            margin-top: 15px;
37            font-size: 24px;
38        }
39        #instructions {
40            margin-top: 10px;
41            font-size: 14px;
42            color: #888;
43        }
44        #gameOver {
45            position: absolute;
46            top: 50%;
47            left: 50%;
48            transform: translate(-50%, -50%);
49            background: rgba(0, 0, 0, 0.9);
50            padding: 30px 50px;
51            border: 2px solid #ff4444;
52            text-align: center;
53            display: none;
54        }
55        #gameOver h2 {
56            color: #ff4444;
57            margin-bottom: 15px;
58        }
59        #gameOver button {
60            background: #00ff88;
61            color: #1a1a2e;
62            border: none;
63            padding: 10px 25px;
64            font-size: 16px;
65            cursor: pointer;
66            font-family: inherit;
67            font-weight: bold;
68        }
69        #gameOver button:hover {
70            background: #00cc6a;
71        }
72    </style>
73</head>
74<body>
75    <h1>SNAKE</h1>
76    <div id="gameContainer">
77        <canvas id="game" width="400" height="400"></canvas>
78        <div id="gameOver">
79            <h2>GAME OVER</h2>
80            <p>Final Score: <span id="finalScore">0</span></p>
81            <br>
82            <button onclick="resetGame()">Play Again</button>
83        </div>
84    </div>
85    <div id="score">Score: <span id="scoreValue">0</span></div>
86    <div id="instructions">Use Arrow Keys to Move</div>
87 
88    <script>
89        const canvas = document.getElementById('game');
90        const ctx = canvas.getContext('2d');
91        const gridSize = 20;
92        const tileCount = canvas.width / gridSize;
93 
94        let snake = [];
95        let food = { x: 10, y: 10 };
96        let dx = 0;
97        let dy = 0;
98        let score = 0;
99        let gameLoop = null;
100        let isGameOver = false;
101 
102        function init() {
103            snake = [{ x: 10, y: 10 }];
104            dx = 1;
105            dy = 0;
106            score = 0;
107            isGameOver = false;
108            document.getElementById('scoreValue').textContent = '0';
109            document.getElementById('gameOver').style.display = 'none';
110            spawnFood();
111            if (gameLoop) clearInterval(gameLoop);
112            gameLoop = setInterval(update, 100);
113        }
114 
115        function spawnFood() {
116            food = {
117                x: Math.floor(Math.random() * tileCount),
118                y: Math.floor(Math.random() * tileCount)
119            };
120            // Don't spawn on snake
121            for (let segment of snake) {
122                if (segment.x === food.x && segment.y === food.y) {
123                    spawnFood();
124                    break;
125                }
126            }
127        }
128 
129        function update() {
130            if (isGameOver) return;
131 
132            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
133 
134            // Wall collision
135            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
136                gameOver();
137                return;
138            }
139 
140            // Self collision
141            for (let segment of snake) {
142                if (head.x === segment.x && head.y === segment.y) {
143                    gameOver();
144                    return;
145                }
146            }
147 
148            snake.unshift(head);
149 
150            // Eat food
151            if (head.x === food.x && head.y === food.y) {
152                score += 10;
153                document.getElementById('scoreValue').textContent = score;
154                spawnFood();
155            } else {
156                snake.pop();
157            }
158 
159            draw();
160        }
161 
162        function draw() {
163            // Clear
164            ctx.fillStyle = '#0f0f1a';
165            ctx.fillRect(0, 0, canvas.width, canvas.height);
166 
167            // Draw snake
168            snake.forEach((segment, i) => {
169                ctx.fillStyle = i === 0 ? '#00ff88' : '#00cc6a';
170                ctx.fillRect(segment.x * gridSize + 1, segment.y * gridSize + 1, gridSize - 2, gridSize - 2);
171            });
172 
173            // Draw food
174            ctx.fillStyle = '#ff4444';
175            ctx.fillRect(food.x * gridSize + 2, food.y * gridSize + 2, gridSize - 4, gridSize - 4);
176        }
177 
178        function gameOver() {
179            isGameOver = true;
180            clearInterval(gameLoop);
181            document.getElementById('finalScore').textContent = score;
182            document.getElementById('gameOver').style.display = 'block';
183        }
184 
185        function resetGame() {
186            init();
187        }
188 
189        document.addEventListener('keydown', (e) => {
190            if (isGameOver) return;
191            
192            switch (e.key) {
193                case 'ArrowUp':
194                    if (dy !== 1) { dx = 0; dy = -1; }
195                    break;
196                case 'ArrowDown':
197                    if (dy !== -1) { dx = 0; dy = 1; }
198                    break;
199                case 'ArrowLeft':
200                    if (dx !== 1) { dx = -1; dy = 0; }
201                    break;
202                case 'ArrowRight':
203                    if (dx !== -1) { dx = 1; dy = 0; }
204                    break;
205            }
206        });
207 
208        init();
209    </script>
210</body>
211</html>