Simple HTML Platformer Game - Build Your First Game Now - 常规

<!DOCTYPE html>
<html>
<head>
    <title>Simple HTML Platformer Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
<pre><code>    #player {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 40px;
        background-color: blue;
    }

    #platform {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 40px;
        background-color: green;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <div id='player'></div>
    <div id='platform'></div>
    <script>
        window.addEventListener('keydown', move);
<pre><code>    function move(e) {
        var player = document.getElementById('player');
        switch (e.keyCode) {
            case 37:
                player.style.left = (player.offsetLeft - 10) + 'px';
                break;
            case 38:
                player.style.top = (player.offsetTop - 10) + 'px';
                break;
            case 39:
                player.style.left = (player.offsetLeft + 10) + 'px';
                break;
            case 40:
                player.style.top = (player.offsetTop + 10) + 'px';
                break;
        }
    }
&lt;/script&gt;
</code></pre>
</body>
</html>