js超级玛丽小游戏代码

以下是一个简单的 JavaScript 超级玛丽小游戏的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超级玛丽小游戏</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            background-color: #f0f8ff;
        }
    </style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    // 玛丽角色
    const mary = {
        x: 50,
        y: 500,
        width: 30,
        height: 30,
        speed: 5,
        jumpStrength: -10,
        gravity: 0.5,
        jumping: false,
        image: new Image(),
    };
    mary.image.src = 'mary.png'; // 假设有玛丽的图片

    // 地板
    const floor = {
        y: 570,
        width: canvas.width,
        height: 30,
        image: new Image(),
    };
    floor.image.src = 'floor.png'; // 假设有地板的图片

    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);

    let keysPressed = {};

    function handleKeyDown(event) {
        keysPressed[event.key] = true;
    }

    function handleKeyUp(event) {
        delete keysPressed[event.key];
    }

    function update() {
        if (keysPressed['ArrowLeft']) {
            mary.x -= mary.speed;
        }
        if (keysPressed['ArrowRight']) {
            mary.x += mary.speed;
        }
        if (keysPressed['ArrowUp'] && !mary.jumping) {
            mary.velocityY = mary.jumpStrength;
            mary.jumping = true;
        }

        mary.velocityY += mary.gravity;
        mary.y += mary.velocityY;

        if (mary.y + mary.height >= floor.y) {
            mary.y = floor.y - mary.height;
            mary.jumping = false;
        }
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(mary.image, mary.x, mary.y);
        ctx.drawImage(floor.image, 0, floor.y);
    }

    function gameLoop() {
        update();
        draw();
        requestAnimationFrame(gameLoop);
    }

    gameLoop();
</script>
</body>
</html>

基础概念：