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

No:51163

182

←

Prev Next

→

Make a game where a plumber has to save his prince..ALL
Developer User21399｜Date and time 24/3/11 3:20:21
Build time 13.916 sec｜Game capacity 4.264KB｜

Script

Plumber Rescue Game

This game has a plumber character that can be moved left and right using the arrow keys. The aim of the game is to save the princess from the dragon. The plumber must collect mushrooms to power up before it can save the princess or defeat the dragon. If the plumber collides with the dragon without power-up, it's game over. If the plumber collides with the dragon with power-up, the player wins. Similarly, if the plumber saves the princess without power-up, it will give a message to power up first. Once the princess is saved with power-up, the player wins.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Plumber Rescue Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #gameboard {
            width: 300px;
            height: 400px;
            border: 1px solid black;
            margin: auto;
            position: relative;
        }
        #plumber {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background: url('plumber.png') no-repeat center;
            background-size: cover;
        }
        #princess {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background: url('princess.png') no-repeat center;
            background-size: cover;
        }
        .mushroom {
            width: 30px;
            height: 30px;
            background: url('mushroom.png') no-repeat center;
            background-size: cover;
            position: absolute;
        }
        #dragon {
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 100px;
            background: url('dragon.png') no-repeat center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <h1>Plumber Rescue Game</h1>
    <div id="gameboard">
        <div id="plumber"></div>
        <div id="princess"></div>
        <div class="mushroom" style="top: 200px; left: 50%; transform: translateX(-50%);"></div>
        <div id="dragon"></div>
    </div>

let isPowerUp = false;

function movePlumber(direction) {
            const plumberLeft = plumber.offsetLeft;

if (direction === 'left' && plumberLeft > 0) {
                plumber.style.left = plumberLeft - 10 + 'px';
            } else if (direction === 'right' && plumberLeft < 250) {
                plumber.style.left = plumberLeft + 10 + 'px';
            }

checkCollision();
        }

function checkCollision() {
            if (plumber.offsetLeft === mushroom.offsetLeft && plumber.offsetTop === mushroom.offsetTop) {
                isPowerUp = true;
                mushroom.style.display = 'none';
            }

if (plumber.offsetLeft === princess.offsetLeft && plumber.offsetTop === princess.offsetTop) {
                if (isPowerUp) {
                    alert('Congratulations! You saved the princess with power-up!');
                } else {
                    alert('Sorry, you need power-up to save the princess!');
                }
            }

if (plumber.offsetLeft === dragon.offsetLeft && plumber.offsetTop === dragon.offsetTop) {
                if (isPowerUp) {
                    alert('You defeated the dragon and saved the princess!');
                } else {
                    alert('You were defeated by the dragon! Game over.');
                }
            }
        }
    </script>
</body>
</html>
```