HTML Pacman Game: Simple and Fun - Code Tutorial - 常规

<html>
    <head>
        <title>Pacman Game - HTML Tutorial</title>
        <style>
            body{
                background-color: black;
            }
            #pacman{
                position: absolute;
                left: 50%;
                top: 50%;
            }
        </style>
    </head>
    <body>
        <img src='pacman.png' id='pacman' height='100' width='100'>
<pre><code>    &lt;script&gt;
        var pacman = document.getElementById('pacman');
        var left = 0;
        var top = 0;
        document.onkeydown = function(e){
            if(e.keyCode == 37){ //left arrow key
                left-=10;
                pacman.style.left = left + '%';
            }
            else if(e.keyCode == 38){ //up arrow key
                top-=10;
                pacman.style.top = top + '%';
            }
            else if(e.keyCode == 39){ //right arrow key
                left+=10;
                pacman.style.left = left + '%';
            }
            else if(e.keyCode == 40){ //down arrow key
                top+=10;
                pacman.style.top = top + '%';
            }
        }
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
</html>