snake final

assets/css/custom.css

@@ -0,0 +1,303 @@
+/* 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;
+}

assets/js/main.js

@@ -0,0 +1,242 @@
+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();
+});

index.php

@@ -1,131 +1,56 @@
-<?php
+<!DOCTYPE html>
-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 charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>New Style</title>
+    <title>Snake Game</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
-  <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>
+<body class="dark-theme">
-  <main>
+
-    <div class="card">
+    <div class="game-container">
-      <h1>Analyzing your requirements and generating your website…</h1>
+        <div id="hud">
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
+            <div id="score-container">
-        <span class="sr-only">Loading…</span>
+                <span>Score: <span id="score">0</span></span>
+                <span>Best: <span id="best-score">0</span></span>
             </div>
-      <p class="hint">Flatlogic AI is collecting your requirements and applying the first changes.</p>
+            <button id="settings-btn">
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24px" height="24px">
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+                    <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>
-  </main>
+
-  <footer>
+        <canvas id="gameCanvas"></canvas>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+
-  </footer>
+        <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>