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

No:23418

Make a Mario Wonder game
Developer User10854｜Date and time 23/10/30 13:03:42
Build time 85.814 sec｜Game capacity 3.51KB｜

Script

Certainly! Here's an example of a simple Mario game implementation using JavaScript and pictograms:

Mario Wonder Game

Your goal is to avoid the obstacles and reach the finish line!

Controls: Tap on the screen to make Mario jump.

Score: 0

The code above sets up a simple game where you control Mario to navigate through obstacles and reach the finish line. Mario will jump when you tap the screen, and the goal is to avoid colliding with the obstacles (represented by pictograms) while collecting points until reaching the finish line. Note: This is a simplified example and does not include movement or advanced game mechanics.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Certainly! Here's an example of a simple Mario game implementation using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Mario Wonder Game</title>
    <style>
        #game {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        .player {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .obstacle {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 0;
        }
        #score {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Mario Wonder Game</h1>
    <div>
        <h3>Your goal is to avoid the obstacles and reach the finish line!</h3>
        <h3>Controls: Tap on the screen to make Mario jump.</h3>
    </div>
    <div id="game">
        <div id="player" class="player"><img src="mario.png" width="50" height="50"></div>
        <div id="obstacle1" class="obstacle" style="left: 200px;"><img src="mushroom.png" width="50" height="50"></div>
        <div id="obstacle2" class="obstacle" style="left: 300px;"><img src="turtle.png" width="50" height="50"></div>
        <div id="finish" class="obstacle" style="left: 400px;"><img src="flag.png" width="50" height="50"></div>
    </div>
    <h2 id="score">Score: 0</h2>

function handleClick() {
            player.style.bottom = "150px"; // Jump height
            setTimeout(function () {
                player.style.bottom = "0";
            }, 300); // Jump duration
        }

document.getElementById("game").addEventListener("click", handleClick);

function checkCollision() {
            var playerRect = player.getBoundingClientRect();
            var obstacle1 = document.getElementById("obstacle1").getBoundingClientRect();
            var obstacle2 = document.getElementById("obstacle2").getBoundingClientRect();
            var finish = document.getElementById("finish").getBoundingClientRect();

if (
                (playerRect.left < obstacle1.right && playerRect.right > obstacle1.left && playerRect.bottom > obstacle1.top) ||
                (playerRect.left < obstacle2.right && playerRect.right > obstacle2.left && playerRect.bottom > obstacle2.top)
            ) {
                clearInterval(gameInterval);
                alert("Game over! Your score: " + score);
            }

if (playerRect.left > finish.left) {
                clearInterval(gameInterval);
                alert("Congratulations! You finished the game with a score of: " + score);
            }
        }

function updateScore() {
            score += 1;
            document.getElementById("score").innerHTML = "Score: " + score;
        }

var gameInterval = setInterval(function () {
            checkCollision();
            updateScore();
        }, 1000); // Score update interval
    </script>
</body>
</html>
```

Note: This is a simplified example and does not include movement or advanced game mechanics.