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

No:50799

124

←

Prev Next

→

Fish food game with the fish reaching the food for..ALL
Developer User21395｜Date and time 24/3/9 17:22:57
Build time 8.439 sec｜Game capacity 2.336KB｜

Script

Fish Food Game

Help the fish reach the food!

This is a simple fish food game where the player controls a fish using the left and right arrow keys to reach the food at the top of the screen. Each time the fish reaches the food, the score is increased by 1. The game is implemented using HTML, CSS, and JavaScript with pictograms for the fish and food.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Fish Food Game</title>
    <style>
        body {
            background-color: #83C7F9;
            text-align: center;
            font-family: Arial, sans-serif;
        }
        #fish {
            width: 80px;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        #food {
            width: 40px;
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <h1>Fish Food Game</h1>
    <p>Help the fish reach the food!</p>
    <div id="fish"><img src="fish.png"></div>
    <div id="food"><img src="food.png"></div>

function moveFood() {
            const randomLeft = Math.floor(Math.random() * window.innerWidth);
            food.style.left = randomLeft + 'px';
        }

function checkCollision() {
            const fishRect = fish.getBoundingClientRect();
            const foodRect = food.getBoundingClientRect();

if (fishRect.left < foodRect.right &&
                fishRect.right > foodRect.left &&
                fishRect.top < foodRect.bottom &&
                fishRect.bottom > foodRect.top) {
                score++;
                moveFood();
            }
        }

function updateScore() {
            document.body.innerHTML += `<p>Score: ${score}</p>`;
        }

document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft') {
                fish.style.transform = 'translateX(-10px)';
            } else if (event.key === 'ArrowRight') {
                fish.style.transform = 'translateX(10px)';
            }

checkCollision();
            updateScore();
        });

moveFood();
    </script>
</body>
</html>
```
This is a simple fish food game where the player controls a fish using the left and right arrow keys to reach the food at the top of the screen. Each time the fish reaches the food, the score is increased by 1. The game is implemented using HTML, CSS, and JavaScript with pictograms for the fish and food.