a mario game with platforms, enemies, levels, physics, and power-ups.'s game

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

No:9439

←

Prev Next

→

a mario game with platforms, enemies, levels, phys..ALL
Developer User4359｜Date and time 23/7/24 21:47:41
Build time 46.182 sec｜Game capacity 5.441KB｜

Script

The above code is a simplified implementation of a Mario game using HTML and JavaScript. It includes platforms, enemies, power-ups, levels, and basic physics. The player controls Mario using the Arrow keys on a smartphone. The game is displayed on a canvas element with the id "gameCanvas". The game logic is handled in JavaScript. Various objects like platforms, enemies, and power-ups are defined as arrays of objects, which are drawn on the canvas using the `drawXXX()` functions. Mario's movement and collisions are checked in the `updateGame()` function, which is called repeatedly using `requestAnimationFrame()` for smooth animation. The game currently has a basic score system - collecting power-ups increases the score, and collision with enemies results in a game over alert. Note that this implementation is just a starting point, and you can enhance it with more features and levels according to your requirements.

←

Prev　Next

→ 　

Back　

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

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

```
<!DOCTYPE html>
<html>
<head>
    <title>Mario Game</title>
    
</head>
<body>

<canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        // Game logic
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

var platforms = [{ x: 0, y: 550, width: 800, height: 50 }, 
                         { x: 400, y: 450, width: 200, height: 10 }]; // Example platforms

var mario = { x: 50, y: 500, width: 40, height: 40, jumpForce: 12, speed: 4, dx: 0, dy: 0 };
        var gravity = 1;

var enemies = [{ x: 700, y: 520, width: 40, height: 40 }, 
                       { x: 600, y: 520, width: 40, height: 40 },
                       { x: 500, y: 520, width: 40, height: 40 }]; // Example enemies

var powerUps = [{ x: 350, y: 520, width: 30, height: 30 }]; // Example power-ups

var score = 0;

function drawMario() {
            ctx.fillStyle = "blue";
            ctx.fillRect(mario.x, mario.y, mario.width, mario.height);
        }

function drawPlatforms() {
            ctx.fillStyle = "green";
            for (var i = 0; i < platforms.length; i++) {
                ctx.fillRect(platforms[i].x, platforms[i].y, platforms[i].width, platforms[i].height);
            }
        }

function drawEnemies() {
            ctx.fillStyle = "red";
            for (var i = 0; i < enemies.length; i++) {
                ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
            }
        }

function drawPowerUps() {
            ctx.fillStyle = "gold";
            for (var i = 0; i < powerUps.length; i++) {
                ctx.fillRect(powerUps[i].x, powerUps[i].y, powerUps[i].width, powerUps[i].height);
            }
        }

function drawScore() {
            ctx.font = "20px Arial";
            ctx.fillStyle = "black";
            ctx.fillText("Score: " + score, 10, 30);
        }

function updateGame() {
            // Update mario's position
            mario.y += mario.dy;
            mario.x += mario.dx;
            mario.dy += gravity;

// Check collisions with platforms
            for (var i = 0; i < platforms.length; i++) {
                var platform = platforms[i];

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.y = platform.y - mario.height;
                    mario.dy = 0;
                    break;
                }
            }

// Check collisions with enemies
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];

if (mario.y + mario.height > enemy.y && mario.y < enemy.y + enemy.height &&
                    mario.x + mario.width > enemy.x && mario.x < enemy.x + enemy.width) {

// Game Over
                    alert("Game Over");
                }
            }

// Check collisions with power-ups
            for (var i = 0; i < powerUps.length; i++) {
                var powerUp = powerUps[i];

if (mario.y + mario.height > powerUp.y && mario.y < powerUp.y + powerUp.height &&
                    mario.x + mario.width > powerUp.x && mario.x < powerUp.x + powerUp.width) {

// Collect power-up
                    powerUps.splice(i, 1);
                    score += 100;
                }
            }

ctx.clearRect(0, 0, canvas.width, canvas.height); 
            drawPlatforms();
            drawEnemies();
            drawPowerUps();
            drawScore();
            drawMario();

requestAnimationFrame(updateGame);
        }

// Handle key events
        document.addEventListener("keydown", function (event) {
            if (event.key === "ArrowUp" && mario.dy === 0) {
                mario.dy -= mario.jumpForce;
            }

if (event.key === "ArrowLeft") {
                mario.dx = -mario.speed;
            }

if (event.key === "ArrowRight") {
                mario.dx = mario.speed;
            }
        });

document.addEventListener("keyup", function (event) {
            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
                mario.dx = 0;
            }
        });

updateGame();
    </script>

</body>
</html>
```

The game is displayed on a canvas element with the id "gameCanvas". The game logic is handled in JavaScript. Various objects like platforms, enemies, and power-ups are defined as arrays of objects, which are drawn on the canvas using the `drawXXX()` functions. Mario's movement and collisions are checked in the `updateGame()` function, which is called repeatedly using `requestAnimationFrame()` for smooth animation.

The game currently has a basic score system - collecting power-ups increases the score, and collision with enemies results in a game over alert.

Note that this implementation is just a starting point, and you can enhance it with more features and levels according to your requirements.