Javascript Snake Game
- With Code Example
- December 14, 2023
Creating a JavaScript Snake Game involves using HTML for the structure, CSS for styling, and JavaScript for the game logic. Here’s a simple example of a Snake Game:
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game-board"></div>
<script src="script.js"></script>
</body>
</html>
CSS (style.css):
#game-board {
display: grid;
grid-template-columns: repeat(20, 20px);
grid-template-rows: repeat(20, 20px);
}
.snake, .food {
width: 20px;
height: 20px;
}
.snake {
background-color: green;
}
.food {
background-color: red;
}
JavaScript (script.js):
document.addEventListener('DOMContentLoaded', () => {
const board = document.getElementById('game-board');
const gridSize = 20;
let snake = [{ x: 10, y: 10 }];
let food = getRandomPosition();
function draw() {
board.innerHTML = '';
drawSnake();
drawFood();
}
function drawSnake() {
snake.forEach(segment => {
const snakeElement = createGameElement('div', 'snake');
snakeElement.style.gridRowStart = segment.y;
snakeElement.style.gridColumnStart = segment.x;
board.appendChild(snakeElement);
});
}
function drawFood() {
const foodElement = createGameElement('div', 'food');
foodElement.style.gridRowStart = food.y;
foodElement.style.gridColumnStart = food.x;
board.appendChild(foodElement);
}
function createGameElement(tagName, className) {
const element = document.createElement(tagName);
element.className = className;
return element;
}
function getRandomPosition() {
return {
x: Math.floor(Math.random() * gridSize) + 1,
y: Math.floor(Math.random() * gridSize) + 1
};
}
function move() {
const head = { ...snake[0] };
switch (direction) {
case 'UP':
head.y--;
break;
case 'DOWN':
head.y++;
break;
case 'LEFT':
head.x--;
break;
case 'RIGHT':
head.x++;
break;
}
if (head.x === food.x && head.y === food.y) {
snake.push({});
food = getRandomPosition();
}
snake.unshift(head);
snake.pop();
}
function checkCollision() {
const head = snake[0];
return (
head.x < 1 || head.x > gridSize ||
head.y < 1 || head.y > gridSize ||
snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
);
}
let direction = 'RIGHT';
window.addEventListener('keydown', event => {
switch (event.key) {
case 'ArrowUp':
direction = 'UP';
break;
case 'ArrowDown':
direction = 'DOWN';
break;
case 'ArrowLeft':
direction = 'LEFT';
break;
case 'ArrowRight':
direction = 'RIGHT';
break;
}
});
function gameLoop() {
move();
if (checkCollision()) {
alert('Game Over!');
snake = [{ x: 10, y: 10 }];
direction = 'RIGHT';
}
draw();
}
setInterval(gameLoop, 200);
});
This is a basic implementation, and you can enhance it further by adding features such as score tracking, increasing difficulty, or adding sound effects.
