you have a cat that you move around with your arrow keys you try to collect as many fish as possible by moving your character into the fish's game

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

No:51926

←

Prev Next

→

you have a cat that you move around with your arro..ALL
Developer User16528｜Date and time 24/3/17 0:31:18
Build time 9.756 sec｜Game capacity 2.953KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Fish Game</title>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f2f2f2;
    }
    #cat {
        position: absolute;
        width: 50px;
        height: 50px;
        background-image: url('cat.png');
        background-size: cover;
    }
    .fish {
        width: 30px;
        height: 30px;
        position: absolute;
        background-image: url('fish.png');
        background-size: cover;
    }
</style>
</head>
<body>
    <div id="cat"></div>
    
    <script>
        const cat = document.getElementById('cat');
        const fishes = document.getElementsByClassName('fish');
        let score = 0;

function getRandomPosition() {
            return {
                x: Math.floor(Math.random() * window.innerWidth),
                y: Math.floor(Math.random() * window.innerHeight)
            };
        }

function updateScore() {
            score++;
            document.title = `Score: ${score}`;
        }

function checkCollision(catRect, fishRect) {
            return catRect.left < fishRect.right &&
                   catRect.right > fishRect.left &&
                   catRect.top < fishRect.bottom &&
                   catRect.bottom > fishRect.top;
        }

function moveCat(event) {
            const catRect = cat.getBoundingClientRect();

if (event.key === 'ArrowUp') {
                if (catRect.top - 10 > 0) {
                    cat.style.top = catRect.top - 10 + 'px';
                }
            } else if (event.key === 'ArrowDown') {
                if (catRect.bottom + 10 < window.innerHeight) {
                    cat.style.top = catRect.top + 10 + 'px';
                }
            } else if (event.key === 'ArrowLeft') {
                if (catRect.left - 10 > 0) {
                    cat.style.left = catRect.left - 10 + 'px';
                }
            } else if (event.key === 'ArrowRight') {
                if (catRect.right + 10 < window.innerWidth) {
                    cat.style.left = catRect.left + 10 + 'px';
                }
            }

for (let fish of fishes) {
                const fishRect = fish.getBoundingClientRect();
                if (checkCollision(catRect, fishRect)) {
                    updateScore();
                    fish.remove();
                }
            }
        }

for (let i = 0; i < 10; i++) {
            const fish = document.createElement('div');
            fish.className = 'fish';
            const position = getRandomPosition();
            fish.style.top = position.y + 'px';
            fish.style.left = position.x + 'px';
            document.body.appendChild(fish);
        }

window.addEventListener('keydown', moveCat);
    </script>
</body>
</html>