base game as mario - Posts

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Mario Game with Trees</title> <style> body { margin: 0; overflow: hidden; } #gameCanvas { background: skyblue; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="400"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d');

    let player = { x: 50, y: 200, width: 40, height: 40, dy: 0, gravity: 0.8, jumpPower: -15, grounded: false };
    let keys = {};
    let platforms = [
        { x: 0, y: 350, width: 800, height: 50 },
        { x: 200, y: 250, width: 100, height: 20 },
        { x: 400, y: 150, width: 100, height: 20 }
    ];
    let trees = [
        { x: 100, y: 300, width: 20, height: 50 },
        { x: 500, y: 300, width: 20, height: 50 },
        { x: 700, y: 300, width: 20, height: 50 }
    ];

    function drawPlayer() {
        ctx.fillStyle = 'red';
        ctx.fillRect(player.x, player.y, player.width, player.height);
    }

    function drawPlatforms() {
        ctx.fillStyle = 'green';
        platforms.forEach(platform => {
            ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
        });
    }

    function drawTrees() {
        ctx.fillStyle = 'brown';
        trees.forEach(tree => {
            ctx.fillRect(tree.x, tree.y, tree.width, tree.height);
            ctx.beginPath();
            ctx.moveTo(tree.x - 10, tree.y);
            ctx.lineTo(tree.x + 10, tree.y - 30);
            ctx.lineTo(tree.x + 30, tree.y);
            ctx.fillStyle = 'darkgreen';
            ctx.fill();
        });
    }

    function updatePlayer() {
        player.dy += player.gravity;
        player.y += player.dy;

        if (player.y + player.height > canvas.height) {
            player.y = canvas.height - player.height;
            player.dy = 0;
            player.grounded = true;
        }

        platforms.forEach(platform => {
            if (player.x < platform.x + platform.width &&
                player.x + player.width > platform.x &&
                player.y < platform.y + platform.height &&
                player.y + player.height > platform.y) {
                player.y = platform.y - player.height;
                player.dy = 0;
                player.grounded = true;
            }
        });

        if (keys['ArrowLeft']) player.x -= 5;
        if (keys['ArrowRight']) player.x += 5;
        if (keys['Space'] && player.grounded) {
            player.dy = player.jumpPower;
            player.grounded = false;
        }
    }

    function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawTrees();
        drawPlayer();
        drawPlatforms();
        updatePlayer();
        requestAnimationFrame(gameLoop);
    }

    document.addEventListener('keydown', (e) => { keys[e.code] = true; });
    document.addEventListener('keyup', (e) => { keys[e.code] = false; });

    gameLoop();
</script>

</body> </html>