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

No:42905

a game where you can jump over puddles it's a rhyt..ALL
Developer User16101｜Date and time 24/2/13 10:58:32
Build time 9.653 sec｜Game capacity 3.01KB｜

Script

Sure, here's a simple rhythm game where you can jump over puddles on a smartphone via pictograms. It's implemented as a single HTML file enclosed in script tags:

Puddle Jump

Make sure to save this code in a file with a .html extension and include an image file named `emozi_cat.png` in the same directory as the HTML file. The `emozi_rabbit.png` image should be a pictogram representing a character jumping.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

Sure, here's a simple rhythm game where you can jump over puddles on a smartphone via pictograms. It's implemented as a single HTML file enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Puddle Jump - Rhythm Game</title>
    <style>
        body {
            text-align: center;
            background-color: #f2f2f2;
        }
        #game {
            width: 300px;
            height: 400px;
            background-color: #fff;
            margin: 0 auto;
            border: 1px solid #ccc;
            position: relative;
        }
        #player {
            width: 80px;
            height: 80px;
            background-image: url('jump.png');
            background-size: cover;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: bottom 0.2s linear;
        }
        .puddle {
            width: 50px;
            height: 20px;
            background-color: blue;
            position: absolute;
            bottom: 0;
            transition: left 2s linear;
        }
    </style>
</head>
<body>
    <h1>Puddle Jump</h1>
    <div id="game">
        <div id="player"></div>
    </div>

function createPuddle() {
            const puddle = document.createElement('div');
            puddle.className = 'puddle';
            game.appendChild(puddle);

const randomPos = Math.floor(Math.random() * (game.offsetWidth - 50));
            puddle.style.left = randomPos + 'px';

puddle.addEventListener('animationend', () => {
                puddle.remove();
                score++;
            });

puddle.addEventListener('transitionend', () => {
                if (puddle.style.bottom === '80px') {
                    if (player.style.bottom === '0px') {
                        gameOver();
                    }
                }
            });

setTimeout(createPuddle, 2000);
        }

function jump() {
            player.style.bottom = '80px';
            setTimeout(() => {
                player.style.bottom = '0px';
            }, 200);
        }

function handleKeyDown(event) {
            if (event.key === ' ') {
                jump();
            }
        }

function gameOver() {
            game.removeEventListener('keydown', handleKeyDown);
            alert(`Game Over! Your score is ${score}`);
            score = 0;
            game.addEventListener('keydown', handleKeyDown);
        }

game.addEventListener('keydown', handleKeyDown);
        createPuddle();
    </script>
</body>
</html>
```

Make sure to save this code in a file with a .html extension and include an image file named `jump.png` in the same directory as the HTML file. The `jump.png` image should be a pictogram representing a character jumping.