Introduction:
Snake game, a classic arcade favorite, is an excellent project for aspiring game developers. In this theoretical guide, we'll walk through the process of building a simple snake game using HTML, CSS, and JavaScript. Each step will be explained in detail, providing insight into the underlying logic of the game.
Step 1: Setting Up the HTML Structure
Begin by creating an HTML file and setting up the basic structure. Include a canvas element where the game will be drawn. This canvas serves as the game board.
Step 2: Styling with CSS
Apply basic styles to the canvas and other elements to enhance the visual appeal of the game. You can customize colors, borders, and fonts to match your desired aesthetic.
Step 3: Drawing the Snake
In JavaScript, write code to draw the snake on the canvas. Define the initial position and size of the snake. The snake will consist of segments, which are represented by rectangles on the canvas.
Step 4: Generating Food
Implement a function to randomly generate food on the game board. Food items should appear at random positions and be distinct from the snake. This function ensures that the snake has something to eat as it moves around the board.
Step 5: Controlling the Snake
Enable user input to control the movement of the snake. Use event listeners to detect key presses (e.g., arrow keys) and update the snake's direction accordingly. Ensure that the snake moves smoothly and responsively to user commands.
Step 6: Handling Collisions
Implement collision detection to determine when the snake interacts with obstacles or itself. Check for collisions with the game board boundaries and the snake's own body. When a collision occurs, the game should end, and the player's score should be displayed.
Step 7: Growing the Snake
When the snake consumes food, it grows longer. Update the snake's length and position accordingly. Be sure to prevent the food from spawning on top of the snake to avoid unintended collisions.
Step 8: Updating the Score
Track the player's score by counting the number of food items eaten by the snake. Display the score on the game screen, allowing the player to track their progress throughout the game.
Step 9: Game Over
Implement logic to end the game when the snake collides with a wall or itself. Display a game over message along with the final score. Provide an option to restart the game, allowing the player to play again and improve their score.
You can use the below code to do so
<!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>
body {
font-family: Cambria, serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.game-container {
text-align: center;
}
canvas {
border: 4px solid #00ff00; /* Bold green border */
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); /* More intense glow effect */
}
#score {
margin-top: 10px;
font-size: 24px;
}
#startButton {
margin-top: 20px;
padding: 15px 30px;
font-size: 20px;
background-color: #4CAF50; /* Green */
border: none;
color: white;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}
#startButton:hover {
background-color: #45a049; /* Darker green */
}
label, span {
font-size: 20px;
}
</style>
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas"></canvas>
<div id="score">Score: <span id="scoreValue">0</span> | Highest Score: <span id="highestScore">0</span></div>
<button id="startButton">Start Game</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startButton = document.getElementById('startButton');
const scoreValue = document.getElementById('scoreValue');
const highestScoreValue = document.getElementById('highestScore');
const boxSize = Math.min(window.innerWidth, window.innerHeight) * 0.9 / 20;
canvas.width = canvas.height = boxSize * 20;
let score = 0;
let highestScore = localStorage.getItem('highestScore') || 0;
let snake = [];
let food = { x: 10, y: 10 };
let dx = 0;
let dy = 0;
let isPlaying = false;
let speed = 200; // Initial speed
function drawSnake() {
ctx.fillStyle = 'green';
snake.forEach(segment => {
ctx.fillRect(segment.x * boxSize, segment.y * boxSize, boxSize, boxSize);
});
}
function drawFood() {
ctx.fillStyle = 'purple';
ctx.fillRect(food.x * boxSize, food.y * boxSize, boxSize, boxSize);
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
score++;
scoreValue.textContent = score;
if (score > highestScore) {
highestScore = score;
highestScoreValue.textContent = highestScore;
localStorage.setItem('highestScore', highestScore);
}
generateFood();
// Increase speed after every 10 score
if (score % 10 === 0) {
speed -= 10;
}
} else {
snake.pop();
}
}
function generateFood() {
food.x = Math.floor(Math.random() * 20);
food.y = Math.floor(Math.random() * 20);
}
function checkCollision() {
const head = snake[0];
if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20) {
return true;
}
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
return true;
}
}
return false;
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (checkCollision()) {
alert('Game Over! Your Score: ' + score);
isPlaying = false;
return;
}
drawSnake();
drawFood();
moveSnake();
if (isPlaying) {
setTimeout(gameLoop, speed);
}
}
startButton.addEventListener('click', () => {
if (!isPlaying) {
snake = [{ x: 10, y: 10 }];
dx = 1;
dy = 0;
score = 0;
scoreValue.textContent = score;
speed = 200; // Reset speed
isPlaying = true;
gameLoop();
}
});
document.addEventListener('keydown', event => {
const key = event.key;
if (key === 'ArrowUp' && dy === 0) {
dx = 0;
dy = -1;
} else if (key === 'ArrowDown' && dy === 0) {
dx = 0;
dy = 1;
} else if (key === 'ArrowLeft' && dx === 0) {
dx = -1;
dy = 0;
} else if (key === 'ArrowRight' && dx === 0) {
dx = 1;
dy = 0;
}
});
});
</script>
</body>
</html>
Just pase this code and your game will be ready.If you have any doubt feel free to ask . Hope you enjoy it .
Thanks.
Comments
Post a Comment
Feel free to share your love or query