123 lines
4.5 KiB
PHP
123 lines
4.5 KiB
PHP
<?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');
|
|
|
|
// SEO Meta Tags
|
|
$title = "Auto-Snake: The Infinite Loop";
|
|
$description = "Watch an AI-powered snake navigate mazes and eat apples in an infinite, perfect loop. A mesmerizing demonstration of pathfinding.";
|
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
|
<title><?= htmlspecialchars($title) ?></title>
|
|
<meta name="description" content="<?= htmlspecialchars($description) ?>" />
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="<?= htmlspecialchars($title) ?>" />
|
|
<meta property="og:description" content="<?= htmlspecialchars($description) ?>" />
|
|
<?php if ($projectImageUrl): ?>
|
|
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<?php endif; ?>
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
<meta property="twitter:title" content="<?= htmlspecialchars($title) ?>" />
|
|
<meta property="twitter:description" content="<?= htmlspecialchars($description) ?>" />
|
|
<?php if ($projectImageUrl): ?>
|
|
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
|
<?php endif; ?>
|
|
|
|
<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;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
<div class="background-mesh"></div>
|
|
|
|
<header class="main-header">
|
|
<div class="container">
|
|
<h1>Auto-Snake <span class="badge">AI Bot</span></h1>
|
|
<p class="subtitle">Smart, smooth, and never-ending.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container main-layout">
|
|
<div class="game-column">
|
|
<div class="canvas-wrapper">
|
|
<canvas id="gameCanvas"></canvas>
|
|
<div id="gameOverlay" class="overlay hidden">
|
|
<div class="overlay-content">
|
|
<h2 id="overlayTitle">VICTORY!</h2>
|
|
<p id="overlayMessage">The grid is full. Restarting...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="sidebar">
|
|
<div class="stats-card card">
|
|
<h3>Live Stats</h3>
|
|
<div class="stats-grid">
|
|
<div class="stat-item">
|
|
<span class="label">Wins</span>
|
|
<span id="winCount" class="value">0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="label">Time Since Win</span>
|
|
<span id="timer" class="value">00:00</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="label">Score</span>
|
|
<span id="currentScore" class="value">0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="label">Best Score</span>
|
|
<span id="bestScore" class="value">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls-card card">
|
|
<h3>Simulation Controls</h3>
|
|
<div class="control-group">
|
|
<label for="speedRange">Simulation Speed</label>
|
|
<input type="range" id="speedRange" min="1" max="60" value="45">
|
|
<div class="range-labels">
|
|
<span>Slow</span>
|
|
<span>Fast</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="resetBtn" class="btn btn-secondary">Reset Data</button>
|
|
<button id="toggleMazeBtn" class="btn btn-primary">Toggle Maze</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-card card">
|
|
<h3>How it works</h3>
|
|
<p>This AI uses <strong>Breadth-First Search (BFS)</strong> for pathfinding. To avoid loops, it employs a <strong>Longest Path approximation</strong> when following its tail, ensuring it consumes the most space possible to wait for a safe opening to the apple.</p>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
<footer class="main-footer">
|
|
<div class="container">
|
|
<p>© <?= date('Y') ?> Auto-Snake AI. Built with PHP <?= $phpVersion ?>.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|