Simple HTML Mario Game - Code & Tutorial - 常规

<html>
  <head>
    <title>Mario Game</title>
    <style>
      #mario {
        position: absolute;
        width: 64px;
        height: 64px;
        background-image: url('mario.png');
      }
    </style>
  </head>
  <body>
    <h1>Mario Game</h1>
    <div id='mario'></div>
    <script>
      let mario = document.getElementById('mario');
      let x = 0;
      let y = 0;
<pre><code>  document.onkeydown = function(e) {
    if (e.keyCode == 37)
      x -= 10;
    else if (e.keyCode == 38)
      y -= 10;
    else if (e.keyCode == 39)
      x += 10;
    else if (e.keyCode == 40)
      y += 10;

    mario.style.left = x + 'px';
    mario.style.top = y + 'px';
  }
&lt;/script&gt;
</code></pre>
  </body>
</html>