make a mario game that a new enemies and gimmicks's game

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

No:39309

←

Prev Next

→

make a mario game that a new enemies and gimmicks
Developer User17597｜Date and time 24/1/27 23:18:33
Build time 18.95 sec｜Game capacity 4.22KB｜

Script

Sure! Here's a simple implementation of a Mario game with new enemies and gimmicks using JavaScript and pictograms. Remember to save this code in an HTML file, and open it in a web browser to play the game.

This game has a game board with a player (Mario) represented by a pictogram. The player can be controlled using the right and left arrow keys. There are two enemies represented by different pictograms that move randomly up and down, and if the player collides with any enemy, the game ends and a "Game Over" message is shown. The player's position and game state are stored using the `style` property of the relevant HTML elements.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mario Game</title>
    <style>
        #gameBoard {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        
        #player {
            width: 40px;
            height: 40px;
            background-image: url('path/to/mario.png');
            background-size: cover;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        
        .enemy {
            width: 40px;
            height: 40px;
            position: absolute;
            background-image: url('path/to/enemy.png');
            background-size: cover;
        }
        
        .gimmick {
            width: 40px;
            height: 40px;
            position: absolute;
            background-image: url('path/to/gimmick.png');
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="gameBoard">
        <div id="player"></div>
        <div class="enemy" id="enemy1"></div>
        <div class="enemy" id="enemy2"></div>
        <div class="gimmick" id="gimmick1"></div>
        <div class="gimmick" id="gimmick2"></div>
    </div>

if (event.key === 'ArrowRight') {
                if (playerPosition < 560)
                    player.style.left = playerPosition + 40 + 'px';
            }
            else if (event.key === 'ArrowLeft') {
                if (playerPosition > 0)
                    player.style.left = playerPosition - 40 + 'px';
            }
        }

function startEnemies() {
            setInterval(moveEnemy, 1000);
        }

function moveEnemy() {
            var enemy1 = document.getElementById('enemy1');
            var enemy2 = document.getElementById('enemy2');
            
            moveDown(enemy1);
            moveDown(enemy2);

// Check for collision
            if (isColliding(enemy1) || isColliding(enemy2)) {
                alert("Game Over!");
                resetGame();
            }
        }

function moveDown(element) {
            var currentPosition = parseInt(element.style.bottom);
            if (!currentPosition)
                currentPosition = 0;

// Randomize movement
            var move = Math.random() > 0.5 ? 40 : -40;

// Set boundary for movement
            if (currentPosition >= 0 && currentPosition <= 360)
                element.style.bottom = currentPosition + move + 'px';
            else
                element.style.bottom = currentPosition - move + 'px';
        }
        
        function isColliding(element) {
            var player = document.getElementById('player');
            var enemyRect = element.getBoundingClientRect();
            var playerRect = player.getBoundingClientRect();
            
            return (
                enemyRect.left < playerRect.right &&
                enemyRect.right > playerRect.left &&
                enemyRect.top < playerRect.bottom &&
                enemyRect.bottom > playerRect.top
            );
        }

function resetGame() {
            var player = document.getElementById('player');
            player.style.left = '0';
        }

startEnemies();
    </script>
</body>
</html>
```