-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (109 loc) · 6.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ultimate Tailwind Snake Game</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom extra CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body class="bg-gray-900 text-gray-200 flex flex-col items-center min-h-screen">
<!-- Header -->
<header class="w-full bg-gradient-to-r from-gray-800 to-gray-700 shadow-xl py-4">
<h1 class="text-center text-4xl font-extrabold tracking-wide">Ultimate Tailwind Snake Game</h1>
</header>
<!-- Main Content -->
<main class="flex flex-col items-center flex-1 p-4 w-full max-w-5xl">
<!-- Game Container -->
<div id="gameContainer" class="relative border-4 border-indigo-500 rounded-lg overflow-hidden shadow-2xl w-full max-w-xl my-6">
<canvas id="gameCanvas" class="block"></canvas>
<!-- UI Overlay: Scoreboard -->
<div id="uiOverlay" class="absolute top-4 left-4 right-4 flex justify-between items-center pointer-events-none transition-all duration-300">
<div id="scoreBoard" class="text-xl font-semibold">
<span id="score">Score: 0</span>
<span id="highScore" class="ml-4">High Score: 0</span>
</div>
</div>
<!-- Control Buttons -->
<div id="controlButtons" class="absolute bottom-4 left-0 right-0 flex justify-center space-x-4 pointer-events-auto">
<button id="startButton" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg shadow-lg transition-colors">Start Game</button>
<button id="pauseButton" class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg shadow-lg transition-colors" disabled>Pause</button>
<!-- Restart overlay button inside game over overlay -->
<button id="restartOverlayButton" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg shadow-lg transition-colors hidden">Restart</button>
<button id="settingsToggle" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg shadow-lg transition-colors">Settings</button>
</div>
<!-- Game Over Overlay -->
<div id="gameOverOverlay" class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center hidden animate-fadeIn">
<div id="gameOverMessage" class="bg-gray-800 p-8 rounded-lg text-center shadow-2xl transform transition-transform duration-300 hover:scale-105">
<h2 class="text-4xl font-bold mb-4">Game Over!</h2>
<p id="finalScore" class="text-xl mb-6"></p>
<button id="restartButton" class="px-6 py-3 bg-red-500 hover:bg-red-600 rounded-lg shadow-lg transition-colors">Restart Game</button>
</div>
</div>
</div>
<!-- Settings Panel -->
<section id="settingsPanel" class="mt-8 bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md hidden">
<h2 class="text-2xl font-bold mb-4 text-center">Game Settings</h2>
<form id="settingsForm" class="space-y-4">
<div>
<label for="snakeColor" class="block font-medium">Snake Color:</label>
<input type="color" id="snakeColor" name="snakeColor" value="#00FF00" class="w-full p-1 rounded bg-gray-700 border-gray-600">
</div>
<div>
<label for="foodColor" class="block font-medium">Food Color:</label>
<input type="color" id="foodColor" name="foodColor" value="#FF0000" class="w-full p-1 rounded bg-gray-700 border-gray-600">
</div>
<div>
<label for="bgColor" class="block font-medium">Background Color:</label>
<input type="color" id="bgColor" name="bgColor" value="#000000" class="w-full p-1 rounded bg-gray-700 border-gray-600">
</div>
<div>
<label for="canvasWidth" class="block font-medium">Canvas Width (px):</label>
<input type="number" id="canvasWidth" name="canvasWidth" value="600" min="300" max="1200" class="w-full p-2 rounded bg-gray-700 border-gray-600">
</div>
<div>
<label for="canvasHeight" class="block font-medium">Canvas Height (px):</label>
<input type="number" id="canvasHeight" name="canvasHeight" value="600" min="300" max="1200" class="w-full p-2 rounded bg-gray-700 border-gray-600">
</div>
<div>
<label for="gridSize" class="block font-medium">Grid Size (px):</label>
<input type="number" id="gridSize" name="gridSize" value="20" min="10" max="50" class="w-full p-2 rounded bg-gray-700 border-gray-600">
</div>
<div>
<label for="gameSpeed" class="block font-medium">Game Speed (ms per update):</label>
<input type="number" id="gameSpeed" name="gameSpeed" value="100" min="30" max="500" class="w-full p-2 rounded bg-gray-700 border-gray-600">
</div>
<div>
<label for="musicVolume" class="block font-medium">Music Volume (0-1):</label>
<input type="number" id="musicVolume" name="musicVolume" value="0.3" step="0.1" min="0" max="1" class="w-full p-2 rounded bg-gray-700 border-gray-600">
</div>
<div>
<label for="sfxVolume" class="block font-medium">SFX Volume (0-1):</label>
<input type="number" id="sfxVolume" name="sfxVolume" value="1" step="0.1" min="0" max="1" class="w-full p-2 rounded bg-gray-700 border-gray-600">
</div>
<div class="flex justify-center">
<button type="button" id="applySettings" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg shadow-lg transition-colors">Apply Settings</button>
</div>
</form>
</section>
</main>
<!-- Footer -->
<footer class="w-full bg-gray-800 text-center py-4">
<p class="text-sm">© 2025 Ultimate Tailwind Snake Game</p>
</footer>
<!-- Include JavaScript Files -->
<script src="script.js"></script>
<script src="audio.js"></script>
<script src="touch.js"></script>
<script>
// Register service worker for offline caching
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(reg => console.log('Service Worker registered with scope:', reg.scope))
.catch(err => console.error('Service Worker registration failed:', err));
}
</script>
</body>
</html>