Spaces:

engerl
/

neonsanke

Running

App Files Files Community

neonsanke / index.html

engerl

Add 2 files

feb3e3e verified about 1 year ago

raw

history blame contribute delete

25.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Neon Snake - Ultimate Snake Game</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700&display=swap');

	:root {
	--neon-green: #39ff14;
	--neon-pink: #ff2ced;
	--neon-blue: #00e5ff;
	--neon-purple: #9d00ff;
	--dark-bg: #0f0f1a;
	}

	body {
	font-family: 'Orbitron', sans-serif;
	background-color: var(--dark-bg);
	color: white;
	overflow: hidden;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	.game-container {
	position: relative;
	width: 90vmin;
	height: 90vmin;
	max-width: 600px;
	max-height: 600px;
	border: 4px solid var(--neon-purple);
	border-radius: 8px;
	box-shadow: 0 0 20px var(--neon-purple),
	inset 0 0 20px var(--neon-purple);
	overflow: hidden;
	}

	#game-canvas {
	width: 100%;
	height: 100%;
	background-color: rgba(15, 15, 26, 0.8);
	}

	.snake-segment {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: var(--neon-green);
	border-radius: 4px;
	box-shadow: 0 0 10px var(--neon-green);
	transition: transform 0.1s ease-out;
	}

	.snake-head {
	background-color: var(--neon-blue);
	box-shadow: 0 0 15px var(--neon-blue);
	z-index: 10;
	}

	.food {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: var(--neon-pink);
	border-radius: 50%;
	box-shadow: 0 0 15px var(--neon-pink);
	animation: pulse 1.5s infinite alternate;
	}

	@keyframes pulse {
	0% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.2); opacity: 0.8; }
	}

	.score-display {
	font-family: 'Press Start 2P', cursive;
	font-size: 1.5rem;
	color: var(--neon-green);
	text-shadow: 0 0 10px var(--neon-green);
	margin-bottom: 1rem;
	}

	.controls {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
	}

	.btn {
	background: transparent;
	color: white;
	border: 2px solid var(--neon-blue);
	padding: 0.5rem 1rem;
	border-radius: 4px;
	font-family: 'Orbitron', sans-serif;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 0 10px var(--neon-blue);
	}

	.btn:hover {
	background: var(--neon-blue);
	color: black;
	transform: translateY(-2px);
	box-shadow: 0 0 20px var(--neon-blue);
	}

	.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	}

	.modal.active {
	opacity: 1;
	pointer-events: all;
	}

	.modal-content {
	background-color: var(--dark-bg);
	border: 3px solid var(--neon-purple);
	border-radius: 8px;
	padding: 2rem;
	max-width: 500px;
	width: 90%;
	text-align: center;
	box-shadow: 0 0 30px var(--neon-purple);
	transform: scale(0.9);
	transition: transform 0.3s;
	}

	.modal.active .modal-content {
	transform: scale(1);
	}

	.modal-title {
	color: var(--neon-green);
	font-size: 2rem;
	margin-bottom: 1rem;
	text-shadow: 0 0 10px var(--neon-green);
	}

	.game-over {
	color: var(--neon-pink);
	font-size: 3rem;
	margin-bottom: 1rem;
	text-shadow: 0 0 15px var(--neon-pink);
	animation: blink 0.5s infinite alternate;
	}

	@keyframes blink {
	0% { opacity: 1; }
	100% { opacity: 0.5; }
	}

	.grid-lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
	linear-gradient(rgba(57, 255, 20, 0.05) 1px, transparent 1px),
	linear-gradient(90deg, rgba(57, 255, 20, 0.05) 1px, transparent 1px);
	background-size: 20px 20px;
	pointer-events: none;
	}

	.particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background-color: var(--neon-blue);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	}

	@media (max-width: 768px) {
	.controls {
	flex-direction: column;
	gap: 0.5rem;
	}

	.score-display {
	font-size: 1rem;
	}
	}
	</style>
	</head>
	<body>
	<div class="grid-lines"></div>

	<h1 class="text-4xl mb-4 font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-500">
	NEON SNAKE
	</h1>

	<div class="score-display">
	SCORE: <span id="score">0</span> \| HIGH: <span id="high-score">0</span>
	</div>

	<div class="game-container">
	<canvas id="game-canvas"></canvas>
	<div id="game-elements"></div>
	</div>

	<div class="controls mt-6">
	<button id="start-btn" class="btn">
	<i class="fas fa-play mr-2"></i> START
	</button>
	<button id="pause-btn" class="btn" disabled>
	<i class="fas fa-pause mr-2"></i> PAUSE
	</button>
	<button id="restart-btn" class="btn">
	<i class="fas fa-redo mr-2"></i> RESTART
	</button>
	</div>

	<div class="modal" id="game-over-modal">
	<div class="modal-content">
	<div class="game-over">GAME OVER!</div>
	<h2 class="modal-title">Your Score: <span id="final-score">0</span></h2>
	<p class="text-white mb-4">Try again to beat your high score!</p>
	<button id="play-again-btn" class="btn">
	<i class="fas fa-gamepad mr-2"></i> PLAY AGAIN
	</button>
	</div>
	</div>

	<div class="absolute bottom-4 right-4 text-xs text-gray-500">
	Use arrow keys or swipe to control
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', () => {
	// Game elements
	const canvas = document.getElementById('game-canvas');
	const ctx = canvas.getContext('2d');
	const gameElements = document.getElementById('game-elements');
	const scoreDisplay = document.getElementById('score');
	const highScoreDisplay = document.getElementById('high-score');
	const finalScoreDisplay = document.getElementById('final-score');

	// Buttons
	const startBtn = document.getElementById('start-btn');
	const pauseBtn = document.getElementById('pause-btn');
	const restartBtn = document.getElementById('restart-btn');
	const playAgainBtn = document.getElementById('play-again-btn');

	// Modal
	const gameOverModal = document.getElementById('game-over-modal');

	// Game settings
	const gridSize = 20;
	let canvasSize = Math.min(600, window.innerWidth - 40, window.innerHeight - 200);
	canvas.width = canvasSize;
	canvas.height = canvasSize;

	// Game state
	let snake = [];
	let food = {};
	let direction = 'right';
	let nextDirection = 'right';
	let gameSpeed = 150;
	let score = 0;
	let highScore = localStorage.getItem('snakeHighScore') \|\| 0;
	let gameInterval;
	let isPaused = false;
	let isGameOver = false;
	let isGameRunning = false;

	// Initialize game
	function initGame() {
	// Clear any existing game elements
	gameElements.innerHTML = '';

	// Reset snake
	snake = [
	{x: 5, y: 10},
	{x: 4, y: 10},
	{x: 3, y: 10}
	];

	// Reset direction
	direction = 'right';
	nextDirection = 'right';

	// Reset score
	score = 0;
	scoreDisplay.textContent = score;
	highScoreDisplay.textContent = highScore;

	// Generate food
	generateFood();

	// Reset game state
	isGameOver = false;
	isPaused = false;

	// Hide modal if visible
	gameOverModal.classList.remove('active');

	// Render initial state
	render();
	}

	// Start game
	function startGame() {
	if (!isGameRunning) {
	isGameRunning = true;
	startBtn.disabled = true;
	pauseBtn.disabled = false;
	gameInterval = setInterval(gameLoop, gameSpeed);
	}
	}

	// Pause game
	function pauseGame() {
	if (isGameRunning && !isPaused) {
	isPaused = true;
	clearInterval(gameInterval);
	pauseBtn.innerHTML = '<i class="fas fa-play mr-2"></i> RESUME';
	} else if (isGameRunning && isPaused) {
	isPaused = false;
	gameInterval = setInterval(gameLoop, gameSpeed);
	pauseBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> PAUSE';
	}
	}

	// Game over
	function gameOver() {
	isGameOver = true;
	isGameRunning = false;
	clearInterval(gameInterval);
	startBtn.disabled = false;
	pauseBtn.disabled = true;

	// Update high score
	if (score > highScore) {
	highScore = score;
	localStorage.setItem('snakeHighScore', highScore);
	highScoreDisplay.textContent = highScore;
	}

	// Show game over modal
	finalScoreDisplay.textContent = score;
	gameOverModal.classList.add('active');

	// Create explosion effect
	createExplosion(snake[0].x * gridSize, snake[0].y * gridSize);
	}

	// Game loop
	function gameLoop() {
	if (isPaused \|\| isGameOver) return;

	// Update direction
	direction = nextDirection;

	// Move snake
	const head = {...snake[0]};

	switch (direction) {
	case 'up':
	head.y -= 1;
	break;
	case 'down':
	head.y += 1;
	break;
	case 'left':
	head.x -= 1;
	break;
	case 'right':
	head.x += 1;
	break;
	}

	// Check collisions
	if (
	head.x < 0 \|\|
	head.x >= canvas.width / gridSize \|\|
	head.y < 0 \|\|
	head.y >= canvas.height / gridSize \|\|
	snake.some(segment => segment.x === head.x && segment.y === head.y)
	) {
	gameOver();
	return;
	}

	// Add new head
	snake.unshift(head);

	// Check if snake ate food
	if (head.x === food.x && head.y === food.y) {
	// Increase score
	score += 10;
	scoreDisplay.textContent = score;

	// Increase speed slightly
	if (gameSpeed > 50 && score % 50 === 0) {
	gameSpeed -= 5;
	clearInterval(gameInterval);
	gameInterval = setInterval(gameLoop, gameSpeed);
	}

	// Generate new food
	generateFood();

	// Create particle effect
	createParticles(food.x * gridSize + gridSize/2, food.y * gridSize + gridSize/2);
	} else {
	// Remove tail if no food was eaten
	snake.pop();
	}

	// Render game
	render();
	}

	// Generate food at random position
	function generateFood() {
	let newFood;
	do {
	newFood = {
	x: Math.floor(Math.random() * (canvas.width / gridSize)),
	y: Math.floor(Math.random() * (canvas.height / gridSize))
	};
	} while (snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));

	food = newFood;

	// Create food element
	const foodElement = document.createElement('div');
	foodElement.className = 'food';
	foodElement.style.left = `${food.x * gridSize}px`;
	foodElement.style.top = `${food.y * gridSize}px`;
	foodElement.style.width = `${gridSize}px`;
	foodElement.style.height = `${gridSize}px`;
	foodElement.id = 'food';
	gameElements.appendChild(foodElement);
	}

	// Render game
	function render() {
	// Clear canvas
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// Draw snake
	snake.forEach((segment, index) => {
	const segmentElement = document.createElement('div');
	segmentElement.className = index === 0 ? 'snake-segment snake-head' : 'snake-segment';
	segmentElement.style.left = `${segment.x * gridSize}px`;
	segmentElement.style.top = `${segment.y * gridSize}px`;
	segmentElement.style.width = `${gridSize}px`;
	segmentElement.style.height = `${gridSize}px`;
	segmentElement.id = `segment-${index}`;

	// Update or create element
	const existingElement = document.getElementById(`segment-${index}`);
	if (existingElement) {
	existingElement.style.left = `${segment.x * gridSize}px`;
	existingElement.style.top = `${segment.y * gridSize}px`;
	} else {
	gameElements.appendChild(segmentElement);
	}
	});

	// Remove extra segments if snake got shorter
	const segmentElements = document.querySelectorAll('.snake-segment');
	if (segmentElements.length > snake.length) {
	for (let i = snake.length; i < segmentElements.length; i++) {
	segmentElements[i].remove();
	}
	}

	// Update food position
	const foodElement = document.getElementById('food');
	if (foodElement) {
	foodElement.style.left = `${food.x * gridSize}px`;
	foodElement.style.top = `${food.y * gridSize}px`;
	}
	}

	// Create particles
	function createParticles(x, y) {
	for (let i = 0; i < 15; i++) {
	const particle = document.createElement('div');
	particle.className = 'particle';
	particle.style.left = `${x}px`;
	particle.style.top = `${y}px`;

	// Random direction and speed
	const angle = Math.random() * Math.PI * 2;
	const speed = Math.random() * 3 + 1;
	const vx = Math.cos(angle) * speed;
	const vy = Math.sin(angle) * speed;

	document.body.appendChild(particle);

	// Animate particle
	let opacity = 1;
	let size = 4;
	let posX = x;
	let posY = y;

	const animate = () => {
	opacity -= 0.02;
	size -= 0.1;
	posX += vx;
	posY += vy;

	if (opacity <= 0 \|\| size <= 0) {
	particle.remove();
	return;
	}

	particle.style.opacity = opacity;
	particle.style.width = `${size}px`;
	particle.style.height = `${size}px`;
	particle.style.left = `${posX}px`;
	particle.style.top = `${posY}px`;

	requestAnimationFrame(animate);
	};

	requestAnimationFrame(animate);
	}
	}

	// Create explosion effect
	function createExplosion(x, y) {
	for (let i = 0; i < 30; i++) {
	const particle = document.createElement('div');
	particle.className = 'particle';
	particle.style.backgroundColor = i % 2 === 0 ? 'var(--neon-pink)' : 'var(--neon-blue)';
	particle.style.left = `${x + gridSize/2}px`;
	particle.style.top = `${y + gridSize/2}px`;

	// Random direction and speed
	const angle = Math.random() * Math.PI * 2;
	const speed = Math.random() * 5 + 2;
	const vx = Math.cos(angle) * speed;
	const vy = Math.sin(angle) * speed;

	document.body.appendChild(particle);

	// Animate particle
	let opacity = 1;
	let size = Math.random() * 6 + 2;
	let posX = x + gridSize/2;
	let posY = y + gridSize/2;

	const animate = () => {
	opacity -= 0.02;
	size -= 0.1;
	posX += vx;
	posY += vy;

	if (opacity <= 0 \|\| size <= 0) {
	particle.remove();
	return;
	}

	particle.style.opacity = opacity;
	particle.style.width = `${size}px`;
	particle.style.height = `${size}px`;
	particle.style.left = `${posX}px`;
	particle.style.top = `${posY}px`;

	requestAnimationFrame(animate);
	};

	requestAnimationFrame(animate);
	}
	}

	// Handle keyboard input
	function handleKeyDown(e) {
	if (!isGameRunning \|\| isPaused) return;

	switch (e.key) {
	case 'ArrowUp':
	if (direction !== 'down') nextDirection = 'up';
	break;
	case 'ArrowDown':
	if (direction !== 'up') nextDirection = 'down';
	break;
	case 'ArrowLeft':
	if (direction !== 'right') nextDirection = 'left';
	break;
	case 'ArrowRight':
	if (direction !== 'left') nextDirection = 'right';
	break;
	}
	}

	// Handle touch events for mobile
	let touchStartX = 0;
	let touchStartY = 0;

	function handleTouchStart(e) {
	touchStartX = e.touches[0].clientX;
	touchStartY = e.touches[0].clientY;
	}

	function handleTouchEnd(e) {
	if (!isGameRunning \|\| isPaused) return;

	const touchEndX = e.changedTouches[0].clientX;
	const touchEndY = e.changedTouches[0].clientY;

	const dx = touchEndX - touchStartX;
	const dy = touchEndY - touchStartY;

	// Determine swipe direction
	if (Math.abs(dx) > Math.abs(dy)) {
	// Horizontal swipe
	if (dx > 0 && direction !== 'left') {
	nextDirection = 'right';
	} else if (dx < 0 && direction !== 'right') {
	nextDirection = 'left';
	}
	} else {
	// Vertical swipe
	if (dy > 0 && direction !== 'up') {
	nextDirection = 'down';
	} else if (dy < 0 && direction !== 'down') {
	nextDirection = 'up';
	}
	}
	}

	// Event listeners
	startBtn.addEventListener('click', startGame);
	pauseBtn.addEventListener('click', pauseGame);
	restartBtn.addEventListener('click', initGame);
	playAgainBtn.addEventListener('click', () => {
	gameOverModal.classList.remove('active');
	initGame();
	startGame();
	});

	document.addEventListener('keydown', handleKeyDown);
	document.addEventListener('touchstart', handleTouchStart);
	document.addEventListener('touchend', handleTouchEnd);

	// Handle window resize
	window.addEventListener('resize', () => {
	canvasSize = Math.min(600, window.innerWidth - 40, window.innerHeight - 200);
	canvas.width = canvasSize;
	canvas.height = canvasSize;
	render();
	});

	// Initialize game
	initGame();
	});
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=engerl/neonsanke" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
	</html>