[go: up one dir, main page]
Scribd
Upload
5 views4 pages

Index.html

This document contains the HTML and JavaScript code for a simple Snake game that prevents self-backtracking. The game features a score display, food spawning, and touch controls for mobile devices. It includes functionality for game over conditions and allows players to restart the game with a button click.

Uploaded by

9ykmdcm54r
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views4 pages

Index.html

This document contains the HTML and JavaScript code for a simple Snake game that prevents self-backtracking. The game features a score display, food spawning, and touch controls for mobile devices. It includes functionality for game over conditions and allows players to restart the game with a button click.

Uploaded by

9ykmdcm54r
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game with No Self-Backtrack</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#gameContainer {
position: relative;
width: 300px;
height: 300px;
background-color: #fff;
border: 2px solid #000;
overflow: hidden;
}
.snake-segment {
position: absolute;
width: 10px;
height: 10px;
background-color: green;
}
#food {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
}
#gameOver {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.hidden {
display: none;
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="score">Score: 0</div>
<div id="food"></div>
<div id="gameOver" class="hidden">
<h1>Game Over</h1>
<button id="resetBtn">Play Again</button>
</div>
</div>
<script>
const gameContainer = document.getElementById('gameContainer');
const food = document.getElementById('food');
const gameOverScreen = document.getElementById('gameOver');
const resetBtn = document.getElementById('resetBtn');
const scoreDisplay = document.getElementById('score');

let snakePosition = [
{ x: 150, y: 150 },
{ x: 140, y: 150 },
{ x: 130, y: 150 }
];
let direction = { x: 0, y: 0 };
let foodPosition = { x: 0, y: 0 };
let gameInterval;
let gameOver = false;
let firstAppleEaten = false;
let score = 0;

function startGame() {
resetGame();
gameInterval = setInterval(moveSnake, 100);
spawnFood();
}

function resetGame() {
snakePosition = [
{ x: 150, y: 150 },
{ x: 140, y: 150 },
{ x: 130, y: 150 }
];
direction = { x: 0, y: 0 };
gameOver = false;
firstAppleEaten = false;
score = 0;
scoreDisplay.textContent = `Score: ${score}`;
gameOverScreen.classList.add('hidden');
renderSnake();
}

function moveSnake() {
if (gameOver) return;

const head = { x: snakePosition[0].x + direction.x, y:


snakePosition[0].y + direction.y };

// Check for wall collisions


if (head.x < 0 || head.x >= 300 || head.y < 0 || head.y >= 300) {
gameOver = true;
clearInterval(gameInterval);
gameOverScreen.classList.remove('hidden');
return;
}

// Check for self-collision


if (firstAppleEaten && snakePosition.some(segment => segment.x ===
head.x && segment.y === head.y)) {
gameOver = true;
clearInterval(gameInterval);
gameOverScreen.classList.remove('hidden');
return;
}

// Prevent moving back into itself


if (direction.x === -10 && snakePosition[0].x - 10 ===
snakePosition[1].x) return;
if (direction.x === 10 && snakePosition[0].x + 10 ===
snakePosition[1].x) return;
if (direction.y === -10 && snakePosition[0].y - 10 ===
snakePosition[1].y) return;
if (direction.y === 10 && snakePosition[0].y + 10 ===
snakePosition[1].y) return;

// Add new head


snakePosition.unshift(head);
if (head.x === foodPosition.x && head.y === foodPosition.y) {
spawnFood();
firstAppleEaten = true; // Mark that the first apple has been
eaten
score++; // Increase score
scoreDisplay.textContent = `Score: ${score}`; // Update score
display
} else {
snakePosition.pop();
}

renderSnake();
}

function renderSnake() {
gameContainer.querySelectorAll('.snake-segment').forEach(segment =>
segment.remove());
snakePosition.forEach(segment => {
const segmentDiv = document.createElement('div');
segmentDiv.classList.add('snake-segment');
segmentDiv.style.transform = `translate(${segment.x}px, $
{segment.y}px)`;
gameContainer.appendChild(segmentDiv);
});
}

function spawnFood() {
foodPosition.x = Math.floor(Math.random() * 30) * 10;
foodPosition.y = Math.floor(Math.random() * 30) * 10;
food.style.transform = `translate(${foodPosition.x}px, $
{foodPosition.y}px)`;
}

let startX, startY;

function handleTouchStart(event) {
const touch = event.touches[0];
startX = touch.clientX;
startY = touch.clientY;
}

function handleTouchEnd(event) {
const touch = event.changedTouches[0];
const xDiff = touch.clientX - startX;
const yDiff = touch.clientY - startY;

if (Math.abs(xDiff) > Math.abs(yDiff)) {


direction = { x: xDiff > 0 ? 10 : -10, y: 0 };
} else {
direction = { x: 0, y: yDiff > 0 ? 10 : -10 };
}

// Prevent reversing direction


if (direction.x === -10 && snakePosition[0].x - 10 ===
snakePosition[1].x) {
direction.x = 10; // Change to moving right
} else if (direction.x === 10 && snakePosition[0].x + 10 ===
snakePosition[1].x) {
direction.x = -10; // Change to moving left
} else if (direction.y === -10 && snakePosition[0].y - 10 ===
snakePosition[1].y) {
direction.y = 10; // Change to moving down
} else if (direction.y === 10 && snakePosition[0].y + 10 ===
snakePosition[1].y) {
direction.y = -10; // Change to moving up
}
}

resetBtn.addEventListener('click', startGame);
window.addEventListener('touchstart', handleTouchStart);
window.addEventListener('touchend', handleTouchEnd);

startGame();
</script>
</body>
</html>

You might also like