HTML code for snake game
Creating a simple Snake game using HTML and JavaScript involves handling keyboard input and updating the game state. Below is a basic example of HTML and JavaScript code for a simple Snake game:
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>
<style>
#game-board {
display: grid;
grid-template-columns: repeat(20, 20px);
}
.cell {
width: 20px;
height: 20px;
border: 1px solid #ccc;
}
#snake {
background-color: green;
}
#food {
background-color: red;
}
</style>
</head>
<body>
<div id="game-board"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const gridSize = 20;
let snake = [{ x: 5, y: 5 }];
let direction = 'right';
let food = { x: 10, y: 10 };
function drawGameBoard() {
const gameBoard = document.getElementById('game-board');
gameBoard.innerHTML = '';
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.id = `cell-${row}-${col}`;
gameBoard.appendChild(cell);
}
}
}
function drawSnake() {
snake.forEach(segment => {
const snakeCell = document.getElementById(`cell-${segment.y}-${segment.x}`);
snakeCell.style.backgroundColor = 'green';
});
}
function drawFood() {
const foodCell = document.getElementById(`cell-${food.y}-${food.x}`);
foodCell.style.backgroundColor = 'red';
}
function update() {
const head = Object.assign({}, snake[0]);
switch (direction) {
case 'up':
head.y--;
break;
case 'down':
head.y++;
break;
case 'left':
head.x--;
break;
case 'right':
head.x++;
break;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
// Snake ate the food
generateFood();
} else {
// Remove the tail
const tail = snake.pop();
const tailCell = document.getElementById(`cell-${tail.y}-${tail.x}`);
tailCell.style.backgroundColor = '';
}
// Check for collisions
if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize || checkCollision()) {
alert('Game Over!');
resetGame();
}
drawSnake();
drawFood();
}
function generateFood() {
food.x = Math.floor(Math.random() * gridSize);
food.y = Math.floor(Math.random() * gridSize);
}
function checkCollision() {
const head = snake[0];
return snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y);
}
function resetGame() {
snake = [{ x: 5, y: 5 }];
direction = 'right';
generateFood();
}
function handleKeyPress(event) {
switch (event.key) {
case 'ArrowUp':
direction = 'up';
break;
case 'ArrowDown':
direction = 'down';
break;
case 'ArrowLeft':
direction = 'left';
break;
case 'ArrowRight':
direction = 'right';
break;
}
}
document.addEventListener('keydown', handleKeyPress);
function gameLoop() {
update();
}
drawGameBoard();
generateFood();
setInterval(gameLoop, 200);
});
</script>
</body>
</html>
This code sets up a simple grid-based game board, draws a snake that moves in response to arrow key inputs, and generates food for the snake to eat. The game loop updates the game state periodically. Note that this is a basic example, and you can customize and enhance it further based on your preferences.
Post a Comment