Simple HTML Mario Game - Build Your Own! - 常规

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Mario Game</title>
    <style>
      body {
        background-color: #f7f7f7;
      }
      #game {
        width: 400px;
        height: 600px;
        background-image: url(https://i.imgur.com/mU6GmvD.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      #mario {
        width: 30px;
        height: 30px;
        background-image: url(https://i.imgur.com/j1LZF6h.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        left: 50%;
        top:50%;
      }
    </style>
  </head>
  <body>
    <h1>Simple Mario Game</h1>
    <div id='game'>
      <div id='mario'></div>
    </div>
    <script>
      let mario = document.getElementById('mario');
      document.onkeydown = function(e) {
        if(e.keyCode == 37){
            mario.style.left = (mario.offsetLeft - 10) + 'px';
        }
        else if(e.keyCode == 39){
            mario.style.left = (mario.offsetLeft + 10) + 'px';
        }
        else if(e.keyCode == 38){
            mario.style.top = (mario.offsetTop - 10) + 'px';
        }
        else if(e.keyCode == 40){
            mario.style.top = (mario.offsetTop + 10) + 'px';
        }
      }
    </script>
  </body>
</html>