“Play Snake Game online for free! Enjoy the classic arcade fun with a modern twist. No downloads required – play instantly on any device. Challenge yourself and relive the nostalgia today!” Tic Tac Toe Game Script
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”description” content=”Play Snake Game online with 3 difficulty levels: Easy, Medium, and Hard. Enjoy a responsive design for mobile and desktop devices.”>
<title>Snake Game – Play Online</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
color: #333;
}
.container {
text-align: center;
max-width: 600px;
margin: auto;
}
.btn {
display: inline-block;
padding: 10px 20px;
margin: 10px;
font-size: 18px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
#gameCanvas {
background-color: #000;
display: block;
margin: 20px auto;
border: 2px solid #007BFF;
}
/* Responsive Design */
@media (max-width: 768px) {
.btn {
font-size: 16px;
}
#gameCanvas {
width: 90%;
height: auto;
}
}
</style>
</head>
<body>
<div class=”container” id=”homePage”>
<h1>Snake Game</h1>
<p>Choose your difficulty level and start playing!</p>
<button class=”btn” onclick=”startGame(‘easy’)”>Easy</button>
<button class=”btn” onclick=”startGame(‘medium’)”>Medium</button>
<button class=”btn” onclick=”startGame(‘hard’)”>Hard</button>
</div>
<canvas id=”gameCanvas” width=”400″ height=”400″ style=”display: none;”></canvas>
<script>
// Global Variables
const canvas = document.getElementById(‘gameCanvas’);
const ctx = canvas.getContext(‘2d’);
const homePage = document.getElementById(‘homePage’);
let snake = [{ x: 200, y: 200 }];
let direction = { x: 0, y: 0 };
let food = { x: 0, y: 0 };
let score = 0;
let gameInterval;
let speed = 200;
// Game Initialization
function startGame(level) {
// Set speed based on difficulty
if (level === ‘easy’) speed = 200;
if (level === ‘medium’) speed = 150;
if (level === ‘hard’) speed = 100;
// Hide homepage and show canvas
homePage.style.display = ‘none’;
canvas.style.display = ‘block’;
// Reset game state
snake = [{ x: 200, y: 200 }];
direction = { x: 0, y: 0 };
score = 0;
placeFood();
// Start the game loop
clearInterval(gameInterval);
gameInterval = setInterval(gameLoop, speed);
}
// Place Food Randomly
function placeFood() {
food.x = Math.floor((Math.random() * canvas.width) / 20) * 20;
food.y = Math.floor((Math.random() * canvas.height) / 20) * 20;
}
// Game Loop
function gameLoop() {
update();
draw();
}
// Update Game State
function update() {
// Move snake
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
snake.unshift(head);
// Check collision with food
if (head.x === food.x && head.y === food.y) {
score++;
placeFood();
} else {
snake.pop();
}
// Check collisions
if (
head.x < 0 ||
head.x >= canvas.width ||
head.y < 0 ||
head.y >= canvas.height ||
snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
) {
clearInterval(gameInterval);
alert(`Game Over! Your score: ${score}`);
homePage.style.display = ‘block’;
canvas.style.display = ‘none’;
}
}
// Draw Game
function draw() {
// Clear canvas
ctx.fillStyle = ‘black’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw snake
ctx.fillStyle = ‘lime’;
snake.forEach(segment => {
ctx.fillRect(segment.x, segment.y, 20, 20);
});
// Draw food
ctx.fillStyle = ‘red’;
ctx.fillRect(food.x, food.y, 20, 20);
// Draw score
ctx.fillStyle = ‘white’;
ctx.font = ’20px Arial’;
ctx.fillText(`Score: ${score}`, 10, 20);
}
// Handle Keyboard Input
document.addEventListener(‘keydown’, e => {
switch (e.key) {
case ‘ArrowUp’:
if (direction.y === 0) direction = { x: 0, y: -20 };
break;
case ‘ArrowDown’:
if (direction.y === 0) direction = { x: 0, y: 20 };
break;
case ‘ArrowLeft’:
if (direction.x === 0) direction = { x: -20, y: 0 };
break;
case ‘ArrowRight’:
if (direction.x === 0) direction = { x: 20, y: 0 };
break;
}
});
</script>
</body>
</html>
snake.html Run any web browser Host to Local and public इस पेज को आप किसी भी जगह लोकल या public पर host Kare.
जैसे कि Hostinger पर hosting लेकर Page Ko Upload करके website बनाकर पैसे कमाएं. साथ में tic tac toe का App भी बना दिया उसे आप Downlod करें।
4 thoughts on “Play Snake Game Online Free – Classic Arcade Fun Anytime”