Super Mario on mobile's game

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

No:8289

709

←

Prev Next

→

Super Mario on mobile
Developer User4165｜Date and time 23/7/14 21:28:42
Build time 18.684 sec｜Game capacity 2.681KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        canvas {
            border: 1px solid black;
            background-color: #f3f3f3;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Define pictograms for Mario, enemies, and obstacles
        const marioImage = "👲";
        const enemyImage = "👾";
        const obstacleImage = "🚧";

// Define game canvas size
        const canvasWidth = 480;
        const canvasHeight = 320;

// Define Mario's initial position
        let marioXPosition = 50;
        let marioYPosition = canvasHeight - 40;

// Define enemy's initial position
        let enemyXPosition = canvasWidth - 50;
        let enemyYPosition = canvasHeight - 40;

// Define obstacle's position
        const obstacleXPosition = canvasWidth / 2;
        const obstacleYPosition = canvasHeight - 40;

// Define enemy's speed
        const enemySpeed = 5;

// Set up game canvas
        const canvas = document.getElementById("gameCanvas");
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

// Get the 2D rendering context
        const context = canvas.getContext("2d");

// Update game logic
        function update() {
            // Clear canvas
            context.clearRect(0, 0, canvasWidth, canvasHeight);

// Update enemy position
            enemyXPosition -= enemySpeed;

// Draw enemy and obstacle
            context.fillText(enemyImage, enemyXPosition, enemyYPosition);
            context.fillText(obstacleImage, obstacleXPosition, obstacleYPosition);

// Draw Mario
            context.fillText(marioImage, marioXPosition, marioYPosition);

// Collision detection
            if (Math.abs(marioXPosition - enemyXPosition) < 20 && Math.abs(marioYPosition - enemyYPosition) < 20) {
                alert("Game Over!");
                // Reset enemy position
                enemyXPosition = canvasWidth - 50;
            }

// Request next frame update
            requestAnimationFrame(update);
        }

// Capture touch events
        canvas.addEventListener("touchstart", function (event) {
            // Move Mario up
            marioYPosition -= 10;
        });

canvas.addEventListener("touchend", function (event) {
            // Move Mario down
            marioYPosition += 10;
        });

// Start game
        update();
    </script>
</body>
</html>