CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #fdf6e3;
font-family: Arial, sans-serif;
}
.SnakeGame1482-container {
display: flex;
flex-direction: column;
align-items: center;
}
.SnakeGame1482-title {
font-size: 2em;
color: #657b83;
margin-bottom: 0.5em;
}
.SnakeGame1482-description,
.SnakeGame1482-instructions {
margin: 0.5em 0;
color: #657b83;
text-align: center;
}
.SnakeGame1482-instructions {
list-style: none;
padding: 0;
}
.SnakeGame1482-instructions li {
margin-bottom: 0.5em;
}
.SnakeGame1482-buttons {
margin: 1em 0;
}
.SnakeGame1482-button {
background-color: #268bd2;
color: #fdf6e3;
border: none;
padding: 0.5em 1em;
margin: 0.5em;
cursor: pointer;
font-size: 1em;
border-radius: 5px;
transition: background-color 0.3s;
}
.SnakeGame1482-button:hover {
background-color: #2aa198;
}
.SnakeGame1482-button:disabled {
background-color: #93a1a1;
cursor: not-allowed;
}
.SnakeGame1482-canvas-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.SnakeGame1482-canvas {
background-color: #eee8d5;
border: 1px solid #93a1a1;
}
.SnakeGame1482-score {
font-size: 1.2em;
color: #657b83;
margin-top: 1em;
}
@media (max-width: 600px) {
.SnakeGame1482-canvas {
width: 300px;
height: 300px;
}
}
</style>
</head>
<body>
<div class="SnakeGame1482-container">
<h1 class="SnakeGame1482-title">Snake Game</h1>
<p class="SnakeGame1482-description">Control the snake to eat food and grow longer!</p>
<ul class="SnakeGame1482-instructions">
<li>Use arrow keys to control the snake.</li>
<li>Press Start to begin the game.</li>
<li>Press Pause/Resume to pause or resume the game.</li>
<li>Press New Game to restart the game.</li>
</ul>
<div class="SnakeGame1482-buttons">
<button class="SnakeGame1482-button" id="startButton">Start</button>
<button class="SnakeGame1482-button" id="pauseButton" disabled>Pause</button>
<button class="SnakeGame1482-button" id="newGameButton">New Game</button>
</div>
<div class="SnakeGame1482-canvas-container">
<canvas class="SnakeGame1482-canvas" id="gameCanvas" width="400" height="400"></canvas>
</div>
<div class="SnakeGame1482-score">Score: <span id="scoreDisplay">0</span></div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startButton = document.getElementById('startButton');
const pauseButton = document.getElementById('pauseButton');
const newGameButton = document.getElementById('newGameButton');
const scoreDisplay = document.getElementById('scoreDisplay');
let snake = [{ x: 10, y: 10 }];
let direction = { x: 0, y: 0 };
let food = { x: 15, y: 15 };
let score = 0;
let gameInterval;
let isPaused = false;
let isGameOver = false;
function drawSnake() {
ctx.fillStyle = '#cb4b16';
snake.forEach(part => {
ctx.fillRect(part.x * 20, part.y * 20, 20, 20);
});
}
function moveSnake() {
const newHead = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
// Check for collision with walls or self
if (
newHead.x < 0 || newHead.x >= canvas.width / 20 ||
newHead.y < 0 || newHead.y >= canvas.height / 20 ||
snake.some(part => part.x === newHead.x && part.y === newHead.y)
) {
gameOver();
return;
}
snake.unshift(newHead);
if (newHead.x === food.x && newHead.y === food.y) {
score++;
scoreDisplay.textContent = score;
placeFood();
} else {
snake.pop();
}
}
function placeFood() {
food.x = Math.floor(Math.random() * (canvas.width / 20));
food.y = Math.floor(Math.random() * (canvas.height / 20));
}
function drawFood() {
ctx.fillStyle = '#859900';
ctx.fillRect(food.x * 20, food.y * 20, 20, 20);
}
function updateGame() {
if (isPaused || isGameOver) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveSnake();
drawSnake();
drawFood();
}
function handleKeyPress(event) {
if (isGameOver) return;
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 startGame() {
if (gameInterval) clearInterval(gameInterval);
isGameOver = false;
isPaused = false;
direction = { x: 1, y: 0 };
gameInterval = setInterval(updateGame, 200);
startButton.disabled = true;
pauseButton.disabled = false;
}
function pauseGame() {
isPaused = !isPaused;
pauseButton.textContent = isPaused ? 'Resume' : 'Pause';
}
function newGame() {
if (gameInterval) clearInterval(gameInterval);
snake = [{ x: 10, y: 10 }];
direction = { x: 0, y: 0 };
score = 0;
scoreDisplay.textContent = score;
placeFood();
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
isGameOver = false;
isPaused = false;
startButton.disabled = false;
pauseButton.disabled = true;
pauseButton.textContent = 'Pause';
}
function gameOver() {
isGameOver = true;
clearInterval(gameInterval);
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fdf6e3';
ctx.font = '30px Arial';
ctx.textAlign = 'center';
ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2);
startButton.disabled = false;
pauseButton.disabled = true;
}
startButton.addEventListener('click', startGame);
pauseButton.addEventListener('click', pauseGame);
newGameButton.addEventListener('click', newGame);
window.addEventListener('keydown', handleKeyPress);
// Initial setup
newGame();
</script>
</body>
</html>