Make a complete Game of mario's game

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

No:35947

709

←

Prev Next

→

Make a complete Game of mario
Developer User16701｜Date and time 24/1/16 5:13:41
Build time 17.03 sec｜Game capacity 5.017KB｜

Script

Sure, here's a complete example of a simple Mario game implemented as a single HTML file, including JavaScript and using pictograms for the visuals. Please keep in mind that this is a simplified version and may not have all the features of a full-fledged Mario game. You can copy this code into a new HTML file and run it in a browser to play the game.

En este código, se crea un juego simple de Mario en el cual controlas a Mario utilizando la barra espaciadora o la flecha hacia arriba para saltar. El objetivo es aterrizar sobre las plataformas sin caer al vacío. Puedes añadir tus propias imágenes para Mario y las plataformas, solo asegúrate de modificar las rutas de imagen en el código para que apunten a las imágenes correctas. Recuerda que este es solo un ejemplo básico y puedes continuar mejorando y expandiendo el juego según tus necesidades y habilidades en programación. ¡Diviértete!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Mario Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>

// Initialization function
            function init() {
                canvas = document.getElementById("gameCanvas");
                context = canvas.getContext("2d");

platformImage = new Image();
                platformImage.src = "platform.png";
                platformWidth = 80;
                platformHeight = 24;

marioImage = new Image();
                marioImage.src = "mario.png";
                mario = {
                    x: 50,
                    y: 0,
                    width: 32,
                    height: 32,
                    xSpeed: 0,
                    ySpeed: 0,
                    isJumping: false
                };

// Create platforms
                platforms.push({
                    x: 0,
                    y: canvas.height - platformHeight,
                    width: canvas.width,
                    height: platformHeight
                });

// Event listeners
                document.addEventListener("keydown", handleKeyDown);
                document.addEventListener("keyup", handleKeyUp);

// Start the game loop
                gameLoop = setInterval(update, 1000 / 60);
            }

// Event handlers for key presses
            function handleKeyDown(event) {
                if (event.keyCode === 32 || event.keyCode === 38) { // Spacebar or Up arrow
                    if (!mario.isJumping) {
                        mario.isJumping = true;
                        mario.ySpeed = -jumpForce;
                    }
                }
            }

function handleKeyUp(event) {
                if (event.keyCode === 32 || event.keyCode === 38) { // Spacebar or Up arrow
                    // Reset jump state when the key is released
                    mario.isJumping = false;
                }
            }

// Game update function
            function update() {
                // Clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);

// Apply gravity to Mario's vertical speed
                mario.ySpeed += gravity;

// Move Mario vertically
                mario.y += mario.ySpeed;

// Collision detection between Mario and platforms
                for (var i = 0; i < platforms.length; i++) {
                    var platform = platforms[i];

// If Mario is falling and intersects with a platform, stop his fall
                    if (mario.y + mario.height > platform.y && mario.y < platform.y + platform.height &&
                        mario.x + mario.width > platform.x && mario.x < platform.x + platform.width) {
                        mario.ySpeed = 0;
                        mario.y = platform.y - mario.height;
                        mario.isJumping = false;
                    }
                }

// Draw Mario
                context.drawImage(marioImage, mario.x, mario.y, mario.width, mario.height);

// Draw platforms
                platforms.forEach(function (platform) {
                    context.drawImage(platformImage, platform.x, platform.y, platform.width, platform.height);
                });
            }

// Call the initialization function once the window has loaded
            window.onload = init;
        })();
    </script>
</body>
</html>
```

Recuerda que este es solo un ejemplo básico y puedes continuar mejorando y expandiendo el juego según tus necesidades y habilidades en programación. ¡Diviértete!