Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fishing Game</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: linear-gradient(180deg, #87CEEB 0%, #1E90FF 100%); | |
| font-family: Arial, sans-serif; | |
| } | |
| .header { | |
| position: fixed; | |
| top: 20px; | |
| text-align: center; | |
| width: 100%; | |
| color: white; | |
| z-index: 1000; | |
| } | |
| .title { | |
| font-size: 24px; | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .subtitle { | |
| font-size: 16px; | |
| margin-bottom: 5px; | |
| } | |
| .link { | |
| font-size: 14px; | |
| color: white; | |
| } | |
| .game-container { | |
| width: 800px; | |
| height: 600px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hook { | |
| width: 20px; | |
| height: 20px; | |
| background: #FFD700; | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| cursor: pointer; | |
| z-index: 100; | |
| transition: all 0.3s ease; | |
| } | |
| .fish { | |
| width: 40px; | |
| height: 20px; | |
| background: #FF6B6B; | |
| border-radius: 20px; | |
| position: absolute; | |
| transition: all 0.5s linear; | |
| } | |
| .score-board { | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; | |
| background: rgba(255, 255, 255, 0.2); | |
| padding: 10px 20px; | |
| border-radius: 10px; | |
| color: white; | |
| } | |
| .line { | |
| position: absolute; | |
| width: 2px; | |
| background: #FFD700; | |
| top: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="title">MOUSE Autonomous 'Sticky Game'</div> | |
| <div class="subtitle">"One-minute creation by AI Coding Autonomous Agent MOUSE"</div> | |
| <a href="https://VIDraft-mouse1.hf.space" class="link">https://VIDraft-mouse1.hf.space</a> | |
| </div> | |
| <div class="game-container"> | |
| <div class="score-board">Score: <span id="score">0</span></div> | |
| <div class="line"></div> | |
| <div class="hook"></div> | |
| </div> | |
| <script> | |
| const gameContainer = document.querySelector('.game-container'); | |
| const hook = document.querySelector('.hook'); | |
| const line = document.querySelector('.line'); | |
| const scoreElement = document.getElementById('score'); | |
| let score = 0; | |
| let isHookDown = false; | |
| let hookPosition = 0; | |
| function createFish() { | |
| const fish = document.createElement('div'); | |
| fish.className = 'fish'; | |
| fish.style.top = Math.random() * (gameContainer.offsetHeight - 50) + 'px'; | |
| fish.style.left = '-50px'; | |
| gameContainer.appendChild(fish); | |
| const speed = 2 + Math.random() * 3; | |
| const movement = setInterval(() => { | |
| const currentLeft = parseInt(fish.style.left); | |
| if (currentLeft > gameContainer.offsetWidth) { | |
| clearInterval(movement); | |
| fish.remove(); | |
| } else { | |
| fish.style.left = currentLeft + speed + 'px'; | |
| if (isHookDown) { | |
| const hookRect = hook.getBoundingClientRect(); | |
| const fishRect = fish.getBoundingClientRect(); | |
| if ( | |
| hookRect.left < fishRect.right && | |
| hookRect.right > fishRect.left && | |
| hookRect.top < fishRect.bottom && | |
| hookRect.bottom > fishRect.top | |
| ) { | |
| score += 10; | |
| scoreElement.textContent = score; | |
| clearInterval(movement); | |
| fish.remove(); | |
| pullHook(); | |
| } | |
| } | |
| } | |
| }, 20); | |
| } | |
| function pullHook() { | |
| isHookDown = false; | |
| hook.style.top = '0px'; | |
| line.style.height = '0px'; | |
| } | |
| gameContainer.addEventListener('click', (e) => { | |
| if (!isHookDown) { | |
| isHookDown = true; | |
| const clickY = e.clientY - gameContainer.getBoundingClientRect().top; | |
| hook.style.top = clickY + 'px'; | |
| line.style.height = clickY + 'px'; | |
| } else { | |
| pullHook(); | |
| } | |
| }); | |
| setInterval(createFish, 2000); | |
| </script> | |
| </body> | |
| </html> |