commit 5236766de8201225fda457b0adacc93b3a990520
Author: root <root@hub.scroll.pub>
Date: 2024-12-24 00:34:00 +0000
Subject: Initial commit
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7fff2e1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# aimspark.scroll.pub
+Website generated from prompt: a game to improve aim for shooting games
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3765a7a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="Improve your aim for FPS games with our interactive aim trainer">
+ <meta name="keywords" content="aim trainer, fps games, gaming, aim practice, shooting games">
+ <title>AimSpark - Improve Your Gaming Aim</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <header>
+ <nav>
+ <div class="logo">AimSpark</div>
+ <div class="stats">
+ <span>Score: <span id="score">0</span></span>
+ <span>Accuracy: <span id="accuracy">0</span>%</span>
+ <span>Time: <span id="timer">30</span>s</span>
+ </div>
+ </nav>
+ </header>
+
+ <main>
+ <div class="game-container">
+ <div id="target-area" class="target-area">
+ <div id="target" class="target"></div>
+ </div>
+ <div class="controls">
+ <button id="start-btn" class="btn">Start Game</button>
+ <select id="difficulty" class="btn">
+ <option value="easy">Easy</option>
+ <option value="medium">Medium</option>
+ <option value="hard">Hard</option>
+ </select>
+ </div>
+ </div>
+
+ <section class="instructions">
+ <h2>How to Play</h2>
+ <ul>
+ <li>Click the Start button to begin</li>
+ <li>Click on the targets as quickly as possible</li>
+ <li>Try to achieve the highest accuracy</li>
+ <li>Game ends after 30 seconds</li>
+ </ul>
+ </section>
+ </main>
+
+ <footer>
+ <p>Made with ❤️ by AimSpark</p>
+ </footer>
+
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..7558ab4
--- /dev/null
+++ b/script.js
@@ -0,0 +1,112 @@
+class AimTrainer {
+ constructor() {
+ this.score = 0;
+ this.shots = 0;
+ this.hits = 0;
+ this.isPlaying = false;
+ this.timeLeft = 30;
+ this.targetArea = document.getElementById('target-area');
+ this.target = document.getElementById('target');
+ this.scoreElement = document.getElementById('score');
+ this.accuracyElement = document.getElementById('accuracy');
+ this.timerElement = document.getElementById('timer');
+ this.startBtn = document.getElementById('start-btn');
+ this.difficultySelect = document.getElementById('difficulty');
+
+ this.initializeEventListeners();
+ }
+
+ initializeEventListeners() {
+ this.startBtn.addEventListener('click', () => this.startGame());
+ this.targetArea.addEventListener('click', (e) => this.handleShot(e));
+ this.target.addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.handleHit();
+ });
+ }
+
+ startGame() {
+ this.reset();
+ this.isPlaying = true;
+ this.startBtn.disabled = true;
+ this.moveTarget();
+ this.startTimer();
+ }
+
+ reset() {
+ this.score = 0;
+ this.shots = 0;
+ this.hits = 0;
+ this.timeLeft = 30;
+ this.updateUI();
+ }
+
+ handleShot(e) {
+ if (!this.isPlaying) return;
+ this.shots++;
+ this.updateAccuracy();
+ }
+
+ handleHit() {
+ if (!this.isPlaying) return;
+ this.hits++;
+ this.score += 100;
+ this.shots++;
+ this.updateUI();
+ this.moveTarget();
+
+ // Visual feedback
+ this.target.style.transform = 'translate(-50%, -50%) scale(0.8)';
+ setTimeout(() => {
+ this.target.style.transform = 'translate(-50%, -50%) scale(1)';
+ }, 100);
+ }
+
+ moveTarget() {
+ const targetArea = this.targetArea.getBoundingClientRect();
+ const targetSize = this.target.offsetWidth;
+
+ const padding = targetSize / 2;
+ const maxX = targetArea.width - padding;
+ const maxY = targetArea.height - padding;
+
+ const x = Math.random() * (maxX - padding) + padding;
+ const y = Math.random() * (maxY - padding) + padding;
+
+ this.target.style.left = `${x}px`;
+ this.target.style.top = `${y}px`;
+ }
+
+ updateUI() {
+ this.scoreElement.textContent = this.score;
+ this.updateAccuracy();
+ this.timerElement.textContent = this.timeLeft;
+ }
+
+ updateAccuracy() {
+ const accuracy = this.shots === 0 ? 0 : Math.round((this.hits / this.shots) * 100);
+ this.accuracyElement.textContent = accuracy;
+ }
+
+ startTimer() {
+ const timer = setInterval(() => {
+ this.timeLeft--;
+ this.timerElement.textContent = this.timeLeft;
+
+ if (this.timeLeft <= 0) {
+ clearInterval(timer);
+ this.endGame();
+ }
+ }, 1000);
+ }
+
+ endGame() {
+ this.isPlaying = false;
+ this.startBtn.disabled = false;
+ alert(`Game Over!\nFinal Score: ${this.score}\nAccuracy: ${this.accuracyElement.textContent}%`);
+ }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ const game = new AimTrainer();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e80ad54
--- /dev/null
+++ b/style.css
@@ -0,0 +1,153 @@
+:root {
+ --primary-color: #6c5ce7;
+ --secondary-color: #a8a4ff;
+ --background-color: #0f0f1a;
+ --text-color: #ffffff;
+ --accent-color: #00ff88;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ padding: 1rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 2rem;
+ font-weight: bold;
+ background: linear-gradient(to right, var(--text-color), var(--accent-color));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+.stats {
+ display: flex;
+ gap: 2rem;
+ font-size: 1.2rem;
+}
+
+main {
+ flex: 1;
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.game-container {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 1rem;
+ padding: 2rem;
+ margin-bottom: 2rem;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(4px);
+}
+
+.target-area {
+ aspect-ratio: 16/9;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 0.5rem;
+ position: relative;
+ cursor: crosshair;
+ overflow: hidden;
+ margin-bottom: 1rem;
+}
+
+.target {
+ width: 40px;
+ height: 40px;
+ background: radial-gradient(circle, var(--accent-color) 0%, var(--primary-color) 100%);
+ border-radius: 50%;
+ position: absolute;
+ transform: translate(-50%, -50%);
+ cursor: pointer;
+ transition: transform 0.1s;
+}
+
+.target:hover {
+ transform: translate(-50%, -50%) scale(1.1);
+}
+
+.controls {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+}
+
+.btn {
+ padding: 0.8rem 2rem;
+ border: none;
+ border-radius: 0.5rem;
+ background: var(--primary-color);
+ color: var(--text-color);
+ font-size: 1rem;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.btn:hover {
+ background: var(--secondary-color);
+ transform: translateY(-2px);
+}
+
+.instructions {
+ background: rgba(255, 255, 255, 0.05);
+ padding: 2rem;
+ border-radius: 1rem;
+}
+
+.instructions h2 {
+ margin-bottom: 1rem;
+ color: var(--accent-color);
+}
+
+.instructions ul {
+ list-style-position: inside;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: rgba(0, 0, 0, 0.2);
+}
+
+@media (max-width: 768px) {
+ .stats {
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ nav {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .controls {
+ flex-direction: column;
+ }
+}