A flappy bird but it has cats instead of birds and the pipes are dogs's game

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

No:13976

149

←

Prev Next

→

A flappy bird but it has cats instead of birds and..ALL
Developer User6053｜Date and time 23/8/30 20:02:08
Build time 20.056 sec｜Game capacity 3.148KB｜

Script

Sure! Below is an example implementation of the game you described, called "Flappy Cats vs Dogs":

In this implementation, there are two pictograms: a cat for the player's character and a dog for the pipes. The player taps/clicks on the screen to make the cat "flap" and avoid colliding with the dogs (pipes). If the cat hits a dog or touches the top/bottom of the screen, the game ends with a game over alert. Please note that you'll need to provide the actual image files for the cat and dog icons (cat.png and dog.png) in the same directory as the HTML file for the game to display properly. Feel free to modify the styling and enhance the game mechanics as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Below is an example implementation of the game you described, called "Flappy Cats vs Dogs":

```html
<!DOCTYPE html>
<html>
<head>
    <title>Flappy Cats vs Dogs</title>
    <style>
        #game-container {
            position: relative;
            width: 320px;
            height: 480px;
            margin: 0 auto;
            border: 2px solid #000;
        }

.sprite {
            position: absolute;
            width: 64px;
            height: 64px;
            background-repeat: no-repeat;
            background-size: contain;
        }

#cat {
            top: 50%;
            left: 50px;
            transform: translateY(-50%);
            background-image: url('cat.png');
        }

.dog {
            bottom: 0;
            width: 80px;
        }

#dog-top {
            height: 200px;
            background-image: url('dog.png');
        }

#dog-bottom {
            height: 280px;
            background-image: url('dog.png');
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="cat" class="sprite"></div>
        <div id="dog-top" class="dog sprite"></div>
        <div id="dog-bottom" class="dog sprite"></div>
    </div>

document.addEventListener('click', function () {
                flap();
            });

function flap() {
                catTop -= 60;
                cat.style.top = catTop + 'px';
            }

function gameLoop() {
                const catRect = cat.getBoundingClientRect();
                const dogTopRect = dogTop.getBoundingClientRect();
                const dogBottomRect = dogBottom.getBoundingClientRect();

if (catRect.top <= dogTopRect.bottom || catRect.bottom >= dogBottomRect.top) {
                    endGame();
                    return;
                }

if (catTop + catRect.height >= window.innerHeight || catTop <= 0) {
                    endGame();
                    return;
                }

requestAnimationFrame(gameLoop);
            }

function endGame() {
                alert('Game Over!');
            }

gameLoop();
        });
    </script>
</body>
</html>
```

Please note that you'll need to provide the actual image files for the cat and dog icons (cat.png and dog.png) in the same directory as the HTML file for the game to display properly.

Feel free to modify the styling and enhance the game mechanics as per your requirements.