HTML 超级玛丽游戏代码 - 简单实现 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>超级玛丽</title>
    <style>
        #game {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        #mario {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="mario"></div>
    </div>
<pre><code>&lt;script&gt;
    document.addEventListener('keydown', function(event) {
        var mario = document.getElementById('mario');
        var leftPosition = parseInt(mario.style.left) || 0;
        var bottomPosition = parseInt(mario.style.bottom) || 0;

        if (event.key === 'ArrowRight') {
            mario.style.left = (leftPosition + 10) + 'px';
        } else if (event.key === 'ArrowLeft') {
            mario.style.left = (leftPosition - 10) + 'px';
        } else if (event.key === 'ArrowUp') {
            mario.style.bottom = (bottomPosition + 10) + 'px';
        } else if (event.key === 'ArrowDown') {
            mario.style.bottom = (bottomPosition - 10) + 'px';
        }
    });
&lt;/script&gt;
</code></pre>
</body>
</html>
这是一个简单的超级玛丽游戏代码，玩家可以使用键盘的箭头键来控制玛丽的移动。游戏界面是一个 600x400 像素的矩形框，玛丽是一个红色的 50x50 像素的方块。玩家按下箭头键时，根据按键的不同，玛丽的位置会相应地改变。