Mario Pixelated!

18 0 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HTML5 Mario Clone</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        canvas {
            background: #5c94fc; /* Classic Mario Sky Blue */
            border: 4px solid #fff;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>

// Game Configuration & Physics
        const gravity = 0.6;
        let keys = { right: false, left: false, up: false };

// Player (Mario) Object
        const mario = {
            x: 100,
            y: 200,
            width: 30,
            height: 40,
            speed: 5,
            jumpForce: 12,
            velocityX: 0,
            velocityY: 0,
            isGrounded: false,
            color: '#e60012' // Mario Red
        };

// Environment Platforms
        const platforms = [
            { x: 0, y: 360, width: 800, height: 40, color: '#fcb444' }, // Ground floor
            { x: 200, y: 260, width: 120, height: 20, color: '#9c4a00' }, // Higher brick block
            { x: 450, y: 200, width: 150, height: 20, color: '#9c4a00' }  // Upper brick block
        ];

// Track user input
        window.addEventListener('keydown', (e) => {
            if (e.code === 'ArrowRight' || e.code === 'KeyD') keys.right = true;
            if (e.code === 'ArrowLeft' || e.code === 'KeyA') keys.left = true;
            if (e.code === 'ArrowUp' || e.code === 'KeyW' || e.code === 'Space') keys.up = true;
        });

window.addEventListener('keyup', (e) => {
            if (e.code === 'ArrowRight' || e.code === 'KeyD') keys.right = false;
            if (e.code === 'ArrowLeft' || e.code === 'KeyA') keys.left = false;
            if (e.code === 'ArrowUp' || e.code === 'KeyW' || e.code === 'Space') keys.up = false;
        });

// Main Game Loop
        function update() {
            // 1. Handle Horizontal Movement
            if (keys.right) {
                mario.velocityX = mario.speed;
            } else if (keys.left) {
                mario.velocityX = -mario.speed;
            } else {
                mario.velocityX = 0;
            }

// 2. Handle Jumping
            if (keys.up && mario.isGrounded) {
                mario.velocityY = -mario.jumpForce;
                mario.isGrounded = false;
            }

// 3. Apply Gravity
            mario.velocityY += gravity;

// Update Positions
            mario.x += mario.velocityX;
            mario.y += mario.velocityY;

// 4. Collision Detection with Platforms
            mario.isGrounded = false;

for (let plat of platforms) {
                // Check if Mario is within the bounding box horizontally
                if (mario.x < plat.x + plat.width &&
                    mario.x + mario.width > plat.x &&
                    mario.y + mario.height <= plat.y + 10 && // Check top threshold
                    mario.y + mario.height + mario.velocityY >= plat.y) { // Moving downward onto platform
                    
                    mario.y = plat.y - mario.height; // Snap Mario onto the top of the platform
                    mario.velocityY = 0;
                    mario.isGrounded = true;
                }
            }

// Screen boundary locks
            if (mario.x < 0) mario.x = 0;
            if (mario.x + mario.width > canvas.width) mario.x = canvas.width - mario.width;

// Clear Canvas and Draw Frame
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Platforms
            platforms.forEach(plat => {
                ctx.fillStyle = plat.color;
                ctx.fillRect(plat.x, plat.y, plat.width, plat.height);
            });

// Draw Mario
            ctx.fillStyle = mario.color;
            ctx.fillRect(mario.x, mario.y, mario.width, mario.height);
            // Keep the loop running seamlessly
            requestAnimationFrame(update);
        }

// Start the engine
        update();
    </script>
</body>
</html>

CSS

Comments 0

…

Mario Pixelated!

Recommended

Comments 0