Snake Game
About this app
Play the classic Snake game
Snake Game 0
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Snake Game</title>
<meta name="description" content="Play the classic Snake game">
<meta name="keywords" content="snake,game,classic,fun,arcade">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
// Constants
const GRID_SIZE = 20;
const GAME_SPEED = 150;
// Variables
let snake = [{ x: 10, y: 10 }];
let apple = { x: 5, y: 5 };
let score = 0;
let direction = { x: 0, y: 0 };
let gameInterval;
// Functions
function createGrid() {
for (let row = 0; row < GRID_SIZE; row++) {
for (let col = 0; col < GRID_SIZE; col++) {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.id = `cell-${row}-${col}`;
document.getElementById("grid").appendChild(cell);
}
}
}
function drawSnake() {
snake.forEach((segment, index) => {
const snakeSegment = document.getElementById(`cell-${segment.x}-${segment.y}`);
snakeSegment.classList.add("snake");
if (index === 0) {
snakeSegment.classList.add("snake-head");
}
});
}
function clearSnake() {
snake.forEach((segment) => {
const snakeSegment = document.getElementById(`cell-${segment.x}-${segment.y}`);
snakeSegment.classList.remove("snake", "snake-head");
});
}
function drawApple() {
const appleCell = document.getElementById(`cell-${apple.x}-${apple.y}`);
appleCell.classList.add("apple");
}
function clearApple() {
const appleCell = document.getElementById(`cell-${apple.x}-${apple.y}`);
appleCell.classList.remove("apple");
}
function updateScore() {
document.getElementById("score").innerText = score;
}
function updateDirection(event) {
const key = event.keyCode;
switch (key) {
case 37: // left
direction = { x: -1, y: 0 };
break;
case 38: // up
direction = { x: 0, y: -1 };
break;
case 39: // right
direction = { x: 1, y: 0 };
break;
case 40: // down
direction = { x: 0, y: 1 };
break;
}
}
function moveSnake() {
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
snake.unshift(head);
const isAppleEaten = head.x === apple.x && head.y === apple.y;
if (isAppleEaten) {
score++;
generateApple();
} else {
snake.pop();
}
}
function generateApple() {
apple = {
x: Math.floor(Math.random() * GRID_SIZE),
y: Math.floor(Math.random() * GRID_SIZE),
};
}
function checkCollision() {
const head = snake[0];
const isSnakeOutOfBounds =
head.x < 0 ||
head.x >= GRID_SIZE ||
head.y < 0 ||
head.y >= GRID_SIZE;
const isSnakeColliding =
snake.slice(1).some((segment) => segment.x === head.x && segment.y === head.y);
if (isSnakeOutOfBounds || isSnakeColliding) {
endGame();
}
}
function endGame() {
clearInterval(gameInterval);
alert(`Game Over! Your Score: ${score}`);
resetGame();
}
function resetGame() {
snake = [{ x: 10, y: 10 }];
score = 0;
direction = { x: 0, y: 0 };
clearSnake();
clearApple();
updateScore();
generateApple();
drawSnake();
}
function startGame() {
createGrid();
drawSnake();
generateApple();
updateScore();
gameInterval = setInterval(() => {
clearSnake();
moveSnake();
drawSnake();
checkCollision();
}, GAME_SPEED);
}
// Event Listeners
document.addEventListener("keydown", updateDirection);
// Start the game
startGame();
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
body {
background-color: #f7f7f7;
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
#grid {
display: grid;
grid-template-columns: repeat(20, 1fr);
grid-template-rows: repeat(20, 1fr);
gap: 1px;
border: 1px solid #ccc;
background-color: #fff;
}
.cell {
background-color: #eee;
}
.snake {
background-color: #00bcd4;
}
.snake-head {
background-color: #0097a7;
}
.apple {
background-color: #f44336;
}
#score {
text-align: center;
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div id="grid"></div>
<div id="score">0</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!