Snake Game : Javascript

The Snake Game implemented using HTML, CSS, and JavaScript. The game runs inside an HTML5 <canvas> element and features smooth animations, image-based graphics, and interactive gameplay.

Features of the Game:

Graphical Interface:

The game has a visually appealing background with a semi-transparent, forest-themed design.
The snake and food are represented with images instead of plain blocks, making it look more engaging.
The snake's head rotates dynamically based on its movement direction.
Smooth Gameplay & Animations:
The game runs continuously using a game loop that updates the snake’s movement and renders the graphics.
The food briefly glows when eaten, adding an animated effect.
The snake increases in length as it consumes food.

Game Controls:

Players control the snake using the arrow keys (Up, Down, Left, Right).
The game prevents the snake from reversing direction immediately (avoiding self-collision issues).

Game Mechanics:

The game ends when the snake collides with the walls or its own body.
A game over screen displays the final score, along with a restart button.
The game speeds up every 10 points, making it more challenging over time.
Scoring System & Restart Option:
The score is displayed at the top of the game area.
After the game ends, players can restart and play again with a fresh game state.

Play Game:

Score: 0

Game Over! Your Score: 0

Snake Game Source Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Snake Game</title> <style> body { text-align: center; font-family: 'Arial', sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } #gameContainer { background-color: rgba(255, 255, 255, 0.8); padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } canvas { border: 5px solid rgba(0, 0, 0, 0.3); /* Interactive Border */ border-radius: 5px; background-color: rgba(224, 224, 224, 0.4); /* Transparent Glass Effect */ background-image: url('write-image-url'); background-size: cover; opacity: 0.9; } #scoreDisplay { font-size: 1.5em; margin-bottom: 10px; color: #333; } #gameOverMessage { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 10px; font-size: 1.2em; } #restartButton { padding: 10px 20px; font-size: 1em; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px; } </style> </head> <body> <div id="gameContainer"> <h2 id="scoreDisplay">Score: 0</h2> <canvas id="gameCanvas" width="600" height="600"></canvas> </div> <div id="gameOverMessage"> Game Over! Your Score: <span id="finalScore">0</span> <button id="restartButton">Restart</button> </div> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreDisplay = document.getElementById('scoreDisplay'); const gameOverMessage = document.getElementById('gameOverMessage'); const finalScore = document.getElementById('finalScore'); const restartButton = document.getElementById('restartButton'); const gridSize = 20; let snake = [{ x: 10, y: 10 }]; let direction = { x: 1, y: 0 }; let food = { x: Math.floor(Math.random() * (canvas.width / gridSize)), y: Math.floor(Math.random() * (canvas.height / gridSize)) }; let score = 0; let gameRunning = true; let gameSpeed = 100; let foodGlow = false; let glowTimer = 0; const snakeBodyImg = new Image(); snakeBodyImg.src = 'write-image-url'; const snakeHeadImg = new Image(); snakeHeadImg.src = 'write-image-url'; const foodImg = new Image(); foodImg.src = 'write-image-url'; function drawRotatedImage(image, x, y, width, height, angle) { ctx.save(); ctx.translate(x + width / 2, y + height / 2); ctx.rotate(angle); ctx.drawImage(image, -width / 2, -height / 2, width, height); ctx.restore(); } function drawRect(x, y, isHead = false) { if (isHead) { let angle = 0; if (direction.x === 1) angle = 0; else if (direction.x === -1) angle = Math.PI; else if (direction.y === 1) angle = Math.PI / 2; else if (direction.y === -1) angle = -Math.PI / 2; drawRotatedImage(snakeHeadImg, x * gridSize, y * gridSize, gridSize, gridSize, angle); } else { ctx.drawImage(snakeBodyImg, x * gridSize, y * gridSize, gridSize, gridSize); } } function updateSnake() { const newHead = { x: snake[0].x + direction.x, y: snake[0].y + direction.y }; if (newHead.x < 0 || newHead.y < 0 || newHead.x >= canvas.width / gridSize || newHead.y >= canvas.height / gridSize || snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) { gameRunning = false; finalScore.innerText = score; gameOverMessage.style.display = 'block'; return; } if (newHead.x === food.x && newHead.y === food.y) { score++; food = { x: Math.floor(Math.random() * (canvas.width / gridSize)), y: Math.floor(Math.random() * (canvas.height / gridSize)) }; if (score % 10 === 0 && gameSpeed > 20) { gameSpeed -= 10; } foodGlow = true; glowTimer = 0; } else { snake.pop(); } snake.unshift(newHead); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); if (foodGlow && glowTimer < 10) { ctx.fillStyle = `rgba(255, 255, 0, ${1 - glowTimer / 10})`; ctx.shadowColor = 'yellow'; ctx.shadowBlur = 15; ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize); ctx.shadowBlur = 0; glowTimer++; if (glowTimer === 10) { foodGlow = false; } } ctx.drawImage(foodImg, food.x * gridSize, food.y * gridSize, gridSize, gridSize); snake.forEach((segment, index) => drawRect(segment.x, segment.y, index === 0)); scoreDisplay.innerText = `Score: ${score}`; } window.addEventListener('keydown', (event) => { switch (event.key) { case 'ArrowUp': if (direction.y === 0) { direction = { x: 0, y: -1 }; } break; case 'ArrowDown': if (direction.y === 0) { direction = { x: 0, y: 1 }; } break; case 'ArrowLeft': if (direction.x === 0) { direction = { x: -1, y: 0 }; } break; case 'ArrowRight': if (direction.x === 0) { direction = { x: 1, y: 0 }; } break; } }); function gameLoop() { if (gameRunning) { updateSnake(); draw(); setTimeout(gameLoop, gameSpeed); } } gameLoop(); restartButton.addEventListener('click', () => { snake = [{ x: 10, y: 10 }]; direction = { x: 1, y: 0 }; food = { x: Math.floor(Math.random() * (canvas.width / gridSize)), y: Math.floor(Math.random() * (canvas.height / gridSize)) }; score = 0; gameRunning = true; gameSpeed = 100; gameOverMessage.style.display = 'none'; foodGlow = false; glowTimer = 0; gameLoop(); }); </script> </body> </html>

JustdoCodings

Pages

March 28, 2025

Snake Game : Javascript

Score: 0

No comments:

Post a Comment

Pages

March 28, 2025

Snake Game : Javascript

Score: 0

Related Posts

No comments:

Post a Comment