Рыбалка

Поймано: 0

Рекорд: 0 см

* { box-sizing: border-box; margin: 0; padding: 0; touch-action: manipulation; } body { font-family: Arial, sans-serif; overflow: hidden; height: 100vh; width: 100vw; } .game-container { position: relative; width: 100%; height: 100%; overflow: hidden; } .background { position: absolute; width: 100%; height: 100%; } .sky { position: absolute; width: 100%; height: 40%; background: linear-gradient(to bottom, #87CEEB, #1E90FF); } .shore { position: absolute; width: 100%; height: 20%; bottom: 40%; background: linear-gradient(to bottom, #8B4513, #A0522D); border-top: 3px solid #5D2906; } .water { position: absolute; width: 100%; height: 40%; bottom: 0; background: linear-gradient(to bottom, #1E90FF, #000080); } .fisherman { position: absolute; width: 80px; height: 120px; bottom: 40%; left: 50%; transform: translateX(-50%); background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; z-index: 10; } .fishing-rod { position: absolute; width: 150px; height: 10px; bottom: 40%; left: 50%; transform-origin: left center; transform: translateX(-50%) rotate(-30deg); background: linear-gradient(to right, #8B4513, #A0522D); z-index: 5; } .float { position: absolute; width: 15px; height: 15px; border-radius: 50%; background-color: red; bottom: 20%; left: 50%; transform: translateX(-50%); display: none; z-index: 8; } .fishing-line { position: absolute; width: 2px; background-color: white; bottom: 40%; left: 50%; transform-origin: top; display: none; z-index: 7; } .fish { position: absolute; width: 40px; height: 20px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; z-index: 6; } .bubbles { position: absolute; width: 100%; height: 40%; bottom: 0; pointer-events: none; } .bubble { position: absolute; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; animation: bubble-float 3s linear infinite; } @keyframes bubble-float { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { transform: translateY(-100px); opacity: 0; } } .splash { position: absolute; width: 40px; height: 40px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; z-index: 9; display: none; } .ui { position: absolute; width: 100%; height: 100%; pointer-events: none; z-index: 20; } .ui > * { pointer-events: auto; } .stats { position: absolute; top: 10px; left: 10px; background-color: rgba(255, 255, 255, 0.7); padding: 10px; border-radius: 5px; font-size: 16px; } .stats div { margin-bottom: 5px; } .stats span { font-weight: bold; } .controls { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 20px; } .btn { padding: 15px 30px; font-size: 18px; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .btn:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } .btn:active { transform: translateY(1px); } .catch-btn { display: none; background: linear-gradient(45deg, #FF4500, #FF8C00); color: white; font-weight: bold; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .progress-container { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 80%; display: none; } .progress-bar { width: 100%; height: 20px; background-color: #333; border-radius: 10px; overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(to right, #4CAF50, #8BC34A); transition: width 0.1s; } class FishingGame { constructor() { this.fishCount = 0; this.recordSize = 0; this.isFishing = false; this.isBiting = false; this.currentFishSize = 0; this.progress = 0; this.progressInterval = null; this.biteTimeout = null; this.catchTimeout = null; this.clickCount = 0; this.requiredClicks = 0; // DOM elements this.castBtn = document.getElementById('cast-btn'); this.catchBtn = document.getElementById('catch-btn'); this.progressFill = document.querySelector('.progress-fill'); this.fishCountEl = document.querySelector('.fish-count span'); this.recordEl = document.querySelector('.record span'); this.float = document.querySelector('.float'); this.fishingLine = document.querySelector('.fishing-line'); this.fishingRod = document.querySelector('.fishing-rod'); this.fish = document.querySelector('.fish'); this.bubbles = document.querySelector('.bubbles'); this.progressContainer = document.querySelector('.progress-container'); this.splash = document.querySelector('.splash'); this.initEvents(); } initEvents() { this.castBtn.addEventListener('click', () => this.startFishing()); this.catchBtn.addEventListener('click', () => this.handleCatchClick()); } startFishing() { if (this.isFishing) return; this.isFishing = true; this.castBtn.disabled = true; // Animate casting this.fishingRod.style.transform = 'translateX(-50%) rotate(-30deg)'; setTimeout(() => { this.float.style.display = 'block'; this.fishingLine.style.display = 'block'; this.fishingLine.style.height = '30%'; this.float.style.bottom = '20%'; // Wait for bite this.biteTimeout = setTimeout(() => { this.bite(); }, 2000 + Math.random() * 5000); }, 500); } bite() { this.isBiting = true; this.currentFishSize = Math.floor(Math.random() * 100) + 10; this.requiredClicks = Math.floor(this.currentFishSize / 10) + 3; this.clickCount = 0; this.catchBtn.style.display = 'block'; this.progressContainer.style.display = 'block'; this.float.style.backgroundColor = 'yellow'; this.fish.style.display = 'block'; this.fish.style.left = '50%'; this.fish.style.bottom = '20%'; this.fish.style.transform = 'translateX(-50%)'; // Bite animation const biteInterval = setInterval(() => { const move = Math.random() * 20 - 10; this.float.style.left = `calc(50% + ${move}px)`; this.fishingLine.style.transform = `translateX(-50%) rotate(${move * 0.5}deg)`; this.fish.style.left = `calc(50% + ${move}px)`; }, 200); // Create splash this.createSplash(); // Create bubbles this.createBubbles(); // If not caught, fish escapes this.catchTimeout = setTimeout(() => { clearInterval(biteInterval); this.fishEscaped(); }, 5000); } handleCatchClick() { if (!this.isBiting) return; this.clickCount++; this.progress = Math.min(100, this.clickCount / this.requiredClicks * 100); this.progressFill.style.width = `${this.progress}%`; // Fish caught animation if (this.progress >= 100) { this.catchFish(); } } catchFish() { clearTimeout(this.catchTimeout); this.isBiting = false; this.isFishing = false; this.fishCount++; this.recordSize = Math.max(this.recordSize, this.currentFishSize); // Update UI this.updateStats(); this.float.style.backgroundColor = 'green'; this.fish.style.display = 'none'; this.createSplash(); setTimeout(() => { this.resetFishing(); }, 1500); } fishEscaped() { this.isBiting = false; this.isFishing = false; this.float.style.backgroundColor = 'red'; this.fish.style.display = 'none'; this.createSplash(); setTimeout(() => { this.resetFishing(); }, 1500); } resetFishing() { this.progress = 0; this.progressFill.style.width = '0%'; this.catchBtn.style.display = 'none'; this.progressContainer.style.display = 'none'; this.float.style.display = 'none'; this.fishingLine.style.display = 'none'; this.castBtn.disabled = false; this.fishingRod.style.transform = 'translateX(-50%) rotate(-30deg)'; } updateStats() { this.fishCountEl.textContent = this.fishCount; this.recordEl.textContent = `${this.recordSize} см`; } createBubbles() { for (let i = 0; i < 15; i++) { setTimeout(() => { const bubble = document.createElement('div'); bubble.className = 'bubble'; bubble.style.left = `${Math.random() * 100}%`; bubble.style.bottom = `${Math.random() * 20}%`; bubble.style.width = `${Math.random() * 15 + 5}px`; bubble.style.height = bubble.style.width; bubble.style.animationDuration = `${Math.random() * 3 + 2}s`; this.bubbles.appendChild(bubble); setTimeout(() => { bubble.remove(); }, 3000); }, i * 200); } } createSplash() { this.splash.style.display = 'block'; this.splash.style.left = `${50 + (Math.random() * 20 - 10)}%`; this.splash.style.bottom = '20%'; setTimeout(() => { this.splash.style.display = 'none'; }, 1000); } } // Initialize game document.addEventListener('DOMContentLoaded', () => { new FishingGame(); });