Works on PC and Mobile. 🎮 Click here to Play!
Last active
February 11, 2026 03:36
-
-
Save HibikiHata/760afd490375f8c95f15ffa06dd7b10f to your computer and use it in GitHub Desktop.
README.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Gist Snake Game</title> | |
| <style> | |
| body { | |
| background-color: #0d1117; /* GitHub Dark Dimmed */ | |
| color: #c9d1d9; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| canvas { | |
| border: 2px solid #30363d; | |
| background-color: #010409; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.5); | |
| } | |
| h2 { margin-bottom: 10px; } | |
| p { color: #8b949e; font-size: 14px; } | |
| #score { color: #2ea043; font-weight: bold; } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>🐍 Gist Snake</h2> | |
| <canvas id="game" width="400" height="400"></canvas> | |
| <p>Score: <span id="score">0</span> | Use ⬆️⬇️⬅️➡️ to move</p> | |
| <script> | |
| const canvas = document.getElementById('game'); | |
| const ctx = canvas.getContext('2d'); | |
| let speed = 7; | |
| let tileCount = 20; | |
| let tileSize = canvas.width / tileCount - 2; | |
| let headX = 10; | |
| let headY = 10; | |
| let appleX = 5; | |
| let appleY = 5; | |
| let xVelocity = 0; | |
| let yVelocity = 0; | |
| let snakeParts = []; | |
| let tailLength = 2; | |
| let score = 0; | |
| function drawGame() { | |
| changeSnakePosition(); | |
| let result = isGameOver(); | |
| if (result) return; | |
| clearScreen(); | |
| checkAppleCollision(); | |
| drawApple(); | |
| drawSnake(); | |
| drawScore(); | |
| setTimeout(drawGame, 1000 / speed); | |
| } | |
| function isGameOver() { | |
| let gameOver = false; | |
| if (yVelocity === 0 && xVelocity === 0) return false; | |
| // Walls | |
| if (headX < 0 || headX === tileCount || headY < 0 || headY === tileCount) gameOver = true; | |
| // Self | |
| for (let i = 0; i < snakeParts.length; i++) { | |
| let part = snakeParts[i]; | |
| if (part.x === headX && part.y === headY) gameOver = true; | |
| } | |
| if (gameOver) { | |
| ctx.fillStyle = "white"; | |
| ctx.font = "50px Verdana"; | |
| ctx.fillText("Game Over!", canvas.width / 6.5, canvas.height / 2); | |
| ctx.font = "20px Verdana"; | |
| ctx.fillText("Press Space to Restart", canvas.width / 4.5, canvas.height / 1.8); | |
| document.body.onkeydown = function(e) { | |
| if(e.keyCode == 32) location.reload(); | |
| } | |
| } | |
| return gameOver; | |
| } | |
| function drawScore() { | |
| document.getElementById('score').innerText = score; | |
| } | |
| function clearScreen() { | |
| ctx.fillStyle = '#010409'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| } | |
| function drawSnake() { | |
| ctx.fillStyle = '#2ea043'; // GitHub Green | |
| for (let i = 0; i < snakeParts.length; i++) { | |
| let part = snakeParts[i]; | |
| ctx.fillRect(part.x * tileCount, part.y * tileCount, tileSize, tileSize); | |
| } | |
| snakeParts.push({ x: headX, y: headY }); | |
| while (snakeParts.length > tailLength) { | |
| snakeParts.shift(); | |
| } | |
| ctx.fillStyle = '#3fb950'; // Head Color | |
| ctx.fillRect(headX * tileCount, headY * tileCount, tileSize, tileSize); | |
| } | |
| function changeSnakePosition() { | |
| headX = headX + xVelocity; | |
| headY = headY + yVelocity; | |
| } | |
| function drawApple() { | |
| ctx.fillStyle = '#f85149'; // Red | |
| ctx.fillRect(appleX * tileCount, appleY * tileCount, tileSize, tileSize); | |
| } | |
| function checkAppleCollision() { | |
| if (appleX === headX && appleY === headY) { | |
| appleX = Math.floor(Math.random() * tileCount); | |
| appleY = Math.floor(Math.random() * tileCount); | |
| tailLength++; | |
| score++; | |
| speed += 0.2; // Increase speed slightly | |
| } | |
| } | |
| document.body.addEventListener('keydown', keyDown); | |
| function keyDown(event) { | |
| // Up | |
| if (event.keyCode == 38) { | |
| if (yVelocity == 1) return; | |
| yVelocity = -1; | |
| xVelocity = 0; | |
| } | |
| // Down | |
| if (event.keyCode == 40) { | |
| if (yVelocity == -1) return; | |
| yVelocity = 1; | |
| xVelocity = 0; | |
| } | |
| // Left | |
| if (event.keyCode == 37) { | |
| if (xVelocity == 1) return; | |
| yVelocity = 0; | |
| xVelocity = -1; | |
| } | |
| // Right | |
| if (event.keyCode == 39) { | |
| if (xVelocity == -1) return; | |
| yVelocity = 0; | |
| xVelocity = 1; | |
| } | |
| } | |
| drawGame(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment