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

No:43298

Super Mario bros 3 game with Mario, goomba, and bl..ALL
Developer User19162｜Date and time 24/2/15 5:41:09
Build time 19.37 sec｜Game capacity 7.773KB｜

Script

Here is a sample implementation of a simplified version of Super Mario Bros 3 game using JavaScript within a single HTML file, with basic interactions and pictograms. Please note that this is a simplified version and not a complete game. You can copy-paste the code into an HTML file and open it in a browser to play the game:

Super Mario Bros 3 Game

Coins: 0

Please note that the code assumes the existence of image files `emozi_all/mario.png`, `emozi_dog.png`, and `emozi_all/block.png` in the same directory as the HTML file. You can replace these image URLs with your own image files. This implementation provides basic movement controls for Mario (Arrow keys to move left/right, Arrow Up to jump) and collision detection between Mario, blocks, and goombas. Coins are collected when hitting blocks, and goombas are killed by jumping on their heads.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Super Mario Bros 3 Game</title>
    <style>
        #game-area {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            position: relative;
            overflow: hidden;
        }
        .mario, .goomba, .block {
            position: absolute;
            width: 50px;
            height: 50px;
            background-size: cover;
        }
        .mario {
            background-image: url('mario.png');
        }
        .goomba {
            background-image: url('goomba.png');
        }
        .block {
            background-image: url('block.png');
        }
        #coin-count {
            float: right;
            margin-right: 20px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1>Super Mario Bros 3 Game</h1>
    
    <div id="game-area">
        <div id="coin-count">Coins: 0</div>
    </div>
    
    <script>
        // Game variables
        var coins = 0;
        var marioSpeedX = 4;
        var marioSpeedY = 0;
        var marioJumping = false;
        var goombas = [];
        
        // Create Mario
        var mario = document.createElement("div");
        mario.className = "mario";
        mario.style.top = "250px";
        mario.style.left = "0px";
        document.getElementById("game-area").appendChild(mario);
        
        // Create Blocks
        var blocks = [];
        
        function createBlock(x, y) {
            var block = document.createElement("div");
            block.className = "block";
            block.style.top = y + "px";
            block.style.left = x + "px";
            document.getElementById("game-area").appendChild(block);
            blocks.push(block);
        }
        
        createBlock(100, 200);
        createBlock(200, 150);
        createBlock(300, 100);
        
        // Create Goombas
        function createGoomba(x, y) {
            var goomba = document.createElement("div");
            goomba.className = "goomba";
            goomba.style.top = y + "px";
            goomba.style.left = x + "px";
            document.getElementById("game-area").appendChild(goomba);
            goombas.push(goomba);
        }
        
        createGoomba(250, 250);
        
        // Game loop
        setInterval(function() {
            // Check collisions
            checkCollisions();
            
            // Update Mario position
            var marioX = parseInt(mario.style.left);
            var marioY = parseInt(mario.style.top);
            
            if (marioJumping) {
                marioSpeedY += 1; // Gravity effect
                marioY += marioSpeedY;
                
                if (marioY >= 250) {
                    marioY = 250;
                    marioJumping = false;
                    marioSpeedY = 0;
                }
            }
            
            marioX += marioSpeedX;
            mario.style.left = marioX + "px";
            mario.style.top = marioY + "px";
            
            // Update Goombas position
            for (var i = 0; i < goombas.length; i++) {
                var goombaX = parseInt(goombas[i].style.left);
                
                // Move goombas left
                goombaX -= 1;
                
                if (goombaX < -50) {
                    // Respawn goomba outside the game area
                    goombaX = 550;
                }
                
                goombas[i].style.left = goombaX + "px";
            }
        }, 10);
        
        // Event listeners for controls
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowUp" && !marioJumping) {
                marioSpeedY = -12; // Jump velocity
                marioJumping = true;
            }
            
            if (event.key === "ArrowRight") {
                marioSpeedX = 4;
            }
            
            if (event.key === "ArrowLeft") {
                marioSpeedX = -4;
            }
        });
        
        document.addEventListener("keyup", function(event) {
            if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
                marioSpeedX = 0;
            }
        });
        
        // Check collisions with blocks and goombas
        function checkCollisions() {
            var marioRect = mario.getBoundingClientRect();
            
            // Check collision with blocks
            for (var i = 0; i < blocks.length; i++) {
                var blockRect = blocks[i].getBoundingClientRect();
                
                if (isColliding(marioRect, blockRect)) {
                    // Increment coin count
                    coins++;
                    document.getElementById("coin-count").textContent = "Coins: " + coins;
                    
                    // Change block to transparent background
                    blocks[i].style.background = "none";
                    
                    // Remove block from game area
                    blocks[i].parentNode.removeChild(blocks[i]);
                    blocks.splice(i, 1);
                    
                    break; // Stop checking collision for other blocks
                }
            }
            
            // Check collision with goombas
            for (var j = 0; j < goombas.length; j++) {
                var goombaRect = goombas[j].getBoundingClientRect();
                
                if (isColliding(marioRect, goombaRect)) {
                    // Game over
                    alert("Game over! Goomba killed Mario.");
                    
                    // Reload the game
                    location.reload();
                    
                    break; // Stop checking collision for other goombas
                }
                
                // Check collision from the top to kill goombas
                if (marioRect.bottom >= goombaRect.top &&
                    marioRect.left < goombaRect.right &&
                    marioRect.right > goombaRect.left &&
                    marioSpeedY > 0) {
                    
                    // Remove goomba from game area
                    goombas[j].parentNode.removeChild(goombas[j]);
                    goombas.splice(j, 1);
                    
                    // Increment coin count
                    coins++;
                    document.getElementById("coin-count").textContent = "Coins: " + coins;
                    
                    break; // Stop checking collision for other goombas
                }
            }
        }
        
        // Helper function to check collision between two rectangles
        function isColliding(rect1, rect2) {
            return rect1.bottom >= rect2.top &&
                rect1.top <= rect2.bottom &&
                rect1.right >= rect2.left &&
                rect1.left <= rect2.right;
        }
    </script>
</body>
</html>
```

Please note that the code assumes the existence of image files `mario.png`, `goomba.png`, and `block.png` in the same directory as the HTML file. You can replace these image URLs with your own image files.

This implementation provides basic movement controls for Mario (Arrow keys to move left/right, Arrow Up to jump) and collision detection between Mario, blocks, and goombas. Coins are collected when hitting blocks, and goombas are killed by jumping on their heads.