56 lines
2.8 KiB
PHP
56 lines
2.8 KiB
PHP
<!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>
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body class="dark-theme">
|
|
|
|
<div class="game-container">
|
|
<div id="hud">
|
|
<div id="score-container">
|
|
<span>Score: <span id="score">0</span></span>
|
|
<span>Best: <span id="best-score">0</span></span>
|
|
</div>
|
|
<button id="settings-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24px" height="24px">
|
|
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.25C14.34,2.01,14.13,1.8,13.88,1.8 h-3.76c-0.25,0-0.46,0.21-0.52,0.45L9.21,4.65c-0.59,0.24-1.12,0.56-1.62,0.94l-2.39-0.96c-0.22-0.08-0.47,0-0.59,0.22 L2.7,8.17c-0.11,0.2-0.06,0.47,0.12,0.61l2.03,1.58C4.82,10.69,4.8,11.01,4.8,11.33c0,0.32,0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.39,2.4 c0.06,0.24,0.27,0.45,0.52,0.45h3.76c0.25,0,0.46-0.21,0.52-0.45l0.39-2.4c0.59-0.24,1.12-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.11-0.2,0.06-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<canvas id="gameCanvas"></canvas>
|
|
|
|
<div id="start-screen">
|
|
<h1>SNAKE</h1>
|
|
<button id="play-btn">Play</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="settings-backdrop" class="hidden">
|
|
<div id="settings-panel">
|
|
<h2>Settings</h2>
|
|
<div class="settings-group">
|
|
<label>Difficulty</label>
|
|
<div id="difficulty-btns">
|
|
<button class="difficulty-btn" data-difficulty="easy">Easy</button>
|
|
<button class="difficulty-btn active" data-difficulty="normal">Normal</button>
|
|
<button class="difficulty-btn" data-difficulty="hard">Hard</button>
|
|
</div>
|
|
</div>
|
|
<div class="settings-group">
|
|
<label>Theme</label>
|
|
<label class="theme-switch">
|
|
<input type="checkbox" id="theme-toggle">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
<button id="close-settings-btn">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html> |