Compare commits
No commits in common. "ai-dev" and "master" have entirely different histories.
@ -1,303 +0,0 @@
|
||||
/* General Styles & Themes */
|
||||
:root {
|
||||
--font-retro: 'Courier New', Courier, monospace;
|
||||
--radius-m: 8px;
|
||||
--shadow-m: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
--shadow-l: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
--transition-speed: 0.3s;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-retro);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
transition: background-color var(--transition-speed), color var(--transition-speed);
|
||||
}
|
||||
|
||||
/* --- Theme Definitions --- */
|
||||
body.dark-theme {
|
||||
--bg-color: #1a1a1a;
|
||||
--surface-color: #2a2a2a;
|
||||
--text-color: #f0f0f0;
|
||||
--primary-color: #00ff00;
|
||||
--accent-color: #ff00ff;
|
||||
--border-color: #444;
|
||||
--canvas-bg: #000;
|
||||
}
|
||||
|
||||
body.light-theme {
|
||||
--bg-color: #f0f0f0;
|
||||
--surface-color: #ffffff;
|
||||
--text-color: #1a1a1a;
|
||||
--primary-color: #008000;
|
||||
--accent-color: #d900d9;
|
||||
--border-color: #ccc;
|
||||
--canvas-bg: #e0e0e0;
|
||||
}
|
||||
/* --- End Theme Definitions --- */
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Game Container & Canvas */
|
||||
.game-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--surface-color);
|
||||
border-radius: var(--radius-m);
|
||||
box-shadow: var(--shadow-l);
|
||||
padding: 24px; /* Increased padding for a larger canvas */
|
||||
}
|
||||
|
||||
canvas {
|
||||
background-color: var(--canvas-bg);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* HUD (Heads-Up Display) */
|
||||
#hud {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#score-container {
|
||||
font-size: 1.8em;
|
||||
font-weight: bold;
|
||||
color: var(--text-color);
|
||||
background: rgba(0,0,0,0.3);
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
body.light-theme #score-container {
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
#settings-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color var(--transition-speed);
|
||||
}
|
||||
|
||||
#settings-btn svg {
|
||||
fill: var(--text-color);
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
#settings-btn:hover {
|
||||
background-color: rgba(128, 128, 128, 0.2);
|
||||
}
|
||||
#settings-btn:hover svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
||||
/* Start Screen */
|
||||
#start-screen {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 20;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
body.light-theme #start-screen {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
#start-screen h1 {
|
||||
font-size: 5em;
|
||||
color: var(--primary-color);
|
||||
text-shadow: 0 0 10px var(--primary-color);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
#play-btn, .difficulty-btn, #close-settings-btn {
|
||||
font-family: var(--font-retro);
|
||||
font-size: 1.2em;
|
||||
padding: 12px 24px;
|
||||
border: 2px solid var(--primary-color);
|
||||
background-color: transparent;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-m);
|
||||
transition: background-color var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#play-btn:hover, .difficulty-btn:hover, #close-settings-btn:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--surface-color);
|
||||
box-shadow: 0 0 15px var(--primary-color);
|
||||
}
|
||||
|
||||
.difficulty-btn.active {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--surface-color);
|
||||
box-shadow: 0 0 15px var(--primary-color);
|
||||
}
|
||||
|
||||
/* Settings Modal */
|
||||
#settings-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
opacity: 1;
|
||||
transition: opacity var(--transition-speed);
|
||||
}
|
||||
|
||||
#settings-backdrop.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#settings-panel {
|
||||
background-color: var(--surface-color);
|
||||
padding: 24px 32px;
|
||||
border-radius: var(--radius-m);
|
||||
box-shadow: var(--shadow-l);
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
#settings-panel h2 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.settings-group label {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#difficulty-btns {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.difficulty-btn {
|
||||
font-size: 0.9em;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
#close-settings-btn {
|
||||
margin-top: 16px;
|
||||
border-color: var(--accent-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
#close-settings-btn:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--surface-color);
|
||||
box-shadow: 0 0 15px var(--accent-color);
|
||||
}
|
||||
|
||||
|
||||
/* Theme Switch */
|
||||
.theme-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.theme-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #444;
|
||||
transition: var(--transition-speed);
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: var(--transition-speed);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
body.light-theme input:checked + .slider {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
body.light-theme .slider {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
body.light-theme input:checked + .slider {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@ -1,242 +0,0 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const canvas = document.getElementById('gameCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const scoreEl = document.getElementById('score');
|
||||
const bestScoreEl = document.getElementById('best-score');
|
||||
const playBtn = document.getElementById('play-btn');
|
||||
const startScreen = document.getElementById('start-screen');
|
||||
|
||||
const settingsBtn = document.getElementById('settings-btn');
|
||||
const closeSettingsBtn = document.getElementById('close-settings-btn');
|
||||
const settingsBackdrop = document.getElementById('settings-backdrop');
|
||||
const difficultyBtns = document.getElementById('difficulty-btns');
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
|
||||
const gridSize = 20;
|
||||
canvas.width = 600;
|
||||
canvas.height = 600;
|
||||
|
||||
let snake = [{ x: 15, y: 15 }];
|
||||
let food = {};
|
||||
let direction = 'right';
|
||||
let score = 0;
|
||||
let bestScore = 0;
|
||||
let speed = 200;
|
||||
let gameInterval;
|
||||
let levelThreshold = 5;
|
||||
let gameRunning = false;
|
||||
let isGamePausedBySettings = false;
|
||||
|
||||
// --- Settings ---
|
||||
function openSettings() {
|
||||
if (gameRunning) {
|
||||
clearInterval(gameInterval);
|
||||
isGamePausedBySettings = true;
|
||||
}
|
||||
settingsBackdrop.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeSettings() {
|
||||
if (isGamePausedBySettings) {
|
||||
gameInterval = setInterval(update, speed);
|
||||
isGamePausedBySettings = false;
|
||||
}
|
||||
settingsBackdrop.classList.add('hidden');
|
||||
}
|
||||
|
||||
function setDifficulty(difficulty) {
|
||||
switch (difficulty) {
|
||||
case 'easy':
|
||||
speed = 250;
|
||||
break;
|
||||
case 'normal':
|
||||
speed = 150;
|
||||
break;
|
||||
case 'hard':
|
||||
speed = 75;
|
||||
break;
|
||||
}
|
||||
document.querySelectorAll('.difficulty-btn').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.dataset.difficulty === difficulty);
|
||||
});
|
||||
localStorage.setItem('snakeDifficulty', difficulty);
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
document.body.classList.toggle('light-theme', theme === 'light');
|
||||
document.body.classList.toggle('dark-theme', theme === 'dark');
|
||||
themeToggle.checked = theme === 'dark';
|
||||
localStorage.setItem('snakeTheme', theme);
|
||||
}
|
||||
|
||||
settingsBtn.addEventListener('click', openSettings);
|
||||
closeSettingsBtn.addEventListener('click', closeSettings);
|
||||
settingsBackdrop.addEventListener('click', (e) => {
|
||||
if (e.target === settingsBackdrop) {
|
||||
closeSettings();
|
||||
}
|
||||
});
|
||||
|
||||
difficultyBtns.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('difficulty-btn')) {
|
||||
setDifficulty(e.target.dataset.difficulty);
|
||||
}
|
||||
});
|
||||
|
||||
themeToggle.addEventListener('change', () => {
|
||||
applyTheme(themeToggle.checked ? 'dark' : 'light');
|
||||
});
|
||||
|
||||
const savedDifficulty = localStorage.getItem('snakeDifficulty') || 'normal';
|
||||
setDifficulty(savedDifficulty);
|
||||
|
||||
const savedTheme = localStorage.getItem('snakeTheme') || 'dark';
|
||||
applyTheme(savedTheme);
|
||||
|
||||
bestScore = localStorage.getItem('snakeBestScore') || 0;
|
||||
bestScoreEl.textContent = bestScore;
|
||||
|
||||
|
||||
// --- Game Logic ---
|
||||
function placeFood() {
|
||||
food = {
|
||||
x: Math.floor(Math.random() * (canvas.width / gridSize)),
|
||||
y: Math.floor(Math.random() * (canvas.height / gridSize))
|
||||
};
|
||||
for (let segment of snake) {
|
||||
if (segment.x === food.x && segment.y === food.y) {
|
||||
placeFood();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const canvasBg = getComputedStyle(document.body).getPropertyValue('--canvas-bg').trim();
|
||||
|
||||
ctx.fillStyle = canvasBg;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
snake.forEach((segment, index) => {
|
||||
const hue = (segment.x * 5 + segment.y * 5) % 360;
|
||||
ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
|
||||
if (index === 0) {
|
||||
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
|
||||
} else {
|
||||
ctx.fillRect(segment.x * gridSize + 1, segment.y * gridSize + 1, gridSize - 2, gridSize - 2);
|
||||
}
|
||||
});
|
||||
|
||||
const foodX = food.x * gridSize;
|
||||
const foodY = food.y * gridSize;
|
||||
const foodRadius = gridSize / 2.5;
|
||||
|
||||
ctx.save();
|
||||
|
||||
ctx.shadowColor = '#A020F0';
|
||||
ctx.shadowBlur = 20;
|
||||
|
||||
const gradient = ctx.createRadialGradient(
|
||||
foodX + foodRadius, foodY + foodRadius, foodRadius * 0.1,
|
||||
foodX + foodRadius, foodY + foodRadius, foodRadius
|
||||
);
|
||||
gradient.addColorStop(0, '#E0B0FF');
|
||||
gradient.addColorStop(1, '#8A2BE2');
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.beginPath();
|
||||
ctx.arc(foodX + gridSize / 2, foodY + gridSize / 2, foodRadius, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function update() {
|
||||
if (!gameRunning) return;
|
||||
|
||||
const head = { ...snake[0] };
|
||||
switch (direction) {
|
||||
case 'up': head.y--; break;
|
||||
case 'down': head.y++; break;
|
||||
case 'left': head.x--; break;
|
||||
case 'right': head.x++; break;
|
||||
}
|
||||
|
||||
if (head.x < 0 || head.x >= canvas.width / gridSize || head.y < 0 || head.y >= canvas.height / gridSize) {
|
||||
return gameOver();
|
||||
}
|
||||
|
||||
for (let i = 1; i < snake.length; i++) {
|
||||
if (head.x === snake[i].x && head.y === snake[i].y) {
|
||||
return gameOver();
|
||||
}
|
||||
}
|
||||
|
||||
snake.unshift(head);
|
||||
|
||||
if (head.x === food.x && head.y === food.y) {
|
||||
score++;
|
||||
scoreEl.textContent = score;
|
||||
placeFood();
|
||||
if (score % levelThreshold === 0) {
|
||||
increaseSpeed();
|
||||
}
|
||||
} else {
|
||||
snake.pop();
|
||||
}
|
||||
|
||||
draw();
|
||||
}
|
||||
|
||||
function increaseSpeed() {
|
||||
clearInterval(gameInterval);
|
||||
speed = Math.max(50, speed * 0.9);
|
||||
gameInterval = setInterval(update, speed);
|
||||
}
|
||||
|
||||
function gameOver() {
|
||||
clearInterval(gameInterval);
|
||||
isGamePausedBySettings = false;
|
||||
|
||||
if (score > bestScore) {
|
||||
bestScore = score;
|
||||
localStorage.setItem('snakeBestScore', bestScore);
|
||||
bestScoreEl.textContent = bestScore;
|
||||
}
|
||||
|
||||
startScreen.style.display = 'flex';
|
||||
startScreen.querySelector('h1').textContent = 'Game Over';
|
||||
playBtn.textContent = 'Play Again';
|
||||
gameRunning = false;
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
snake = [{ x: 15, y: 15 }];
|
||||
direction = 'right';
|
||||
score = 0;
|
||||
scoreEl.textContent = score;
|
||||
gameRunning = true;
|
||||
isGamePausedBySettings = false;
|
||||
startScreen.style.display = 'none';
|
||||
|
||||
const currentDifficulty = localStorage.getItem('snakeDifficulty') || 'normal';
|
||||
setDifficulty(currentDifficulty);
|
||||
|
||||
placeFood();
|
||||
clearInterval(gameInterval);
|
||||
gameInterval = setInterval(update, speed);
|
||||
}
|
||||
|
||||
playBtn.addEventListener('click', startGame);
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
const key = e.key;
|
||||
if ((key === 'ArrowUp' || key.toLowerCase() === 'w') && direction !== 'down') direction = 'up';
|
||||
if ((key === 'ArrowDown' || key.toLowerCase() === 's') && direction !== 'up') direction = 'down';
|
||||
if ((key === 'ArrowLeft' || key.toLowerCase() === 'a') && direction !== 'right') direction = 'left';
|
||||
if ((key === 'ArrowRight' || key.toLowerCase() === 'd') && direction !== 'left') direction = 'right';
|
||||
});
|
||||
|
||||
placeFood();
|
||||
draw();
|
||||
});
|
||||
177
index.php
177
index.php
@ -1,56 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
@ini_set('display_errors', '1');
|
||||
@error_reporting(E_ALL);
|
||||
@date_default_timezone_set('UTC');
|
||||
|
||||
$phpVersion = PHP_VERSION;
|
||||
$now = date('Y-m-d H:i:s');
|
||||
?>
|
||||
<!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(); ?>">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>New Style</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-color-start: #6a11cb;
|
||||
--bg-color-end: #2575fc;
|
||||
--text-color: #ffffff;
|
||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
||||
animation: bg-pan 20s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
@keyframes bg-pan {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 100% 100%; }
|
||||
}
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--card-bg-color);
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.loader {
|
||||
margin: 1.25rem auto 1.25rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.hint {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
padding: 0; margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap; border: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
code {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<h1>Analyzing your requirements and generating your website…</h1>
|
||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||
<span class="sr-only">Loading…</span>
|
||||
</div>
|
||||
<p class="hint">Flatlogic AI is collecting your requirements and applying the first changes.</p>
|
||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
||||
</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>
|
||||
</main>
|
||||
<footer>
|
||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user