README.md
Changed around line 1
+ # aimspark.scroll.pub
+ Website generated from prompt: a game to improve aim for shooting games
index.html
Changed around line 1
+
+
+
+
+
+
+
+ AimSpark - Improve Your Gaming Aim
+
+
+
+
+
+
AimSpark
+
+ Score: 0
+ Accuracy: 0%
+ Time: 30s
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
How to Play
+
+ Click the Start button to begin
+ Click on the targets as quickly as possible
+ Try to achieve the highest accuracy
+ Game ends after 30 seconds
+
+
+
+
+
+
Made with ❤️ by AimSpark
+
+
+
+
+
script.js
Changed around line 1
+ 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();
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }