A game in which a cat catches fish falling from above's game | AI game creator

Click here for free DL of the app version that can save data.

No:8624

120

A game in which a cat catches fish falling from ab..ALL
Developer User4223｜Date and time 23/7/17 14:37:23
Build time 25.137 sec｜Game capacity 3.035KB｜

🐱

→ 　

1　

0　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fish Catching Game</title>
    <style>
        #game-container {
            position: relative;
            width: 400px;
            height: 600px;
            overflow: hidden;
            border: 1px solid black;
        }
        
        #cat {
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            font-size: 50px;
        }
        
        .fish {
            position: absolute;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="cat">🐱</div>
    </div>

<script>
        // ページが読み込まれた後に処理を実行するためのイベントリスナーを追加
        window.addEventListener('DOMContentLoaded', function() {
            // HTML要素を取得
            const gameContainer = document.getElementById('game-container');
            const cat = document.getElementById('cat');
            
            // キャットの初期位置
            let catX = gameContainer.offsetWidth / 2;
            
            // 魚を作成する関数
            function createFish() {
                const fish = document.createElement('div');
                fish.classList.add('fish');
                fish.innerText = '🐟';
                fish.style.left = Math.random() * (gameContainer.offsetWidth - 40) + 'px';
                gameContainer.appendChild(fish);
                
                // 魚が下に移動するアニメーション
                let position = 0;
                setInterval(function() {
                    position += 5;
                    fish.style.top = position + 'px';
                    
                    // キャッチ判定
                    if (position >= gameContainer.offsetHeight - 60 &&
                        Math.abs(fish.offsetLeft + 30 - catX - 20) < 50) {
                        fish.remove();
                    }
                    
                    // キャッチ失敗判定
                    if (position >= gameContainer.offsetHeight - 60 && 
                        Math.abs(fish.offsetLeft + 30 - catX - 20) >= 50) {
                        gameOver();
                    }
                }, 50);
            }
            
            // キャッチ失敗時の処理
            function gameOver() {
                alert('Game Over');
                window.location.reload();
            }
            
            // キャットの移動処理
            function moveCat(event) {
                catX = event.touches[0].clientX;
                cat.style.left = catX - (cat.offsetWidth / 2) + 'px';
            }
            
            // イベントリスナーを追加
            gameContainer.addEventListener('touchmove', moveCat);

// 魚を作成する関数を一定間隔で実行
            setInterval(createFish, 1000);
        });
    </script>
</body>
</html>