AI game creator

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

No:35935

←

Prev Next

→

Mario bros
Developer User16701｜Date and time 24/1/16 4:50:53
Build time 7.154 sec｜Game capacity 1.784KB｜

Script

// Enclosing the entire JavaScript code in

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mario Bros Game</title>
    <style>
        canvas {
            margin: 0 auto;
            display: block;
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        // Enclosing the entire JavaScript code in <script> tags

// Getting the game canvas
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// Mario character object
        const mario = {
            x: 50,
            y: canvas.height - 50,
            width: 50,
            height: 50,
            dx: 5,
            dy: 0
        };

// Key press event listener
        document.addEventListener("keydown", moveMario);

// Handle key press event
        function moveMario(event) {
            if (event.key === "ArrowUp" && mario.y === canvas.height - mario.height)
                mario.dy = -15;
        }

// Draw Mario character
        function drawMario() {
            ctx.fillStyle = "#FF0000";
            ctx.fillRect(mario.x, mario.y, mario.width, mario.height);
        }

// Update Mario's position
        function updateMario() {
            mario.y += mario.dy;
            mario.dy += 1;

if (mario.y > canvas.height - mario.height)
                mario.y = canvas.height - mario.height;
        }

// Game loop function
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawMario();
            updateMario();

requestAnimationFrame(gameLoop);
        }

// Start the game
        gameLoop();
    </script>
</body>
</html>