Simple Minecraft HTML Game - Play Now - 常规

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Minecraft HTML Game - Play Now</title>
    <style>
      #game-area {
        width: 500px;
        height: 500px;
        border: 1px solid black;
      }
      #player {
        width: 32px;
        height: 32px;
        background-color: blue;
        position: absolute;
      }
      #block {
        width: 32px;
        height: 32px;
        background-color: green;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="game-area">
      <div id="player"></div>
      <div id="block"></div>
    </div>
    <script>
      let playerX = 0;
      let playerY = 0;
      let blockX = 250;
      let blockY = 250;
      document.getElementById('player').style.left = playerX + 'px';
      document.getElementById('player').style.top = playerY + 'px';
      document.getElementById('block').style.left = blockX + 'px';
      document.getElementById('block').style.top = blockY + 'px';
      document.onkeydown = checkKey;
      function checkKey(e) {
        e = e || window.event;
        if (e.keyCode == '38') {
          // up arrow
          playerY -= 32;
        } else if (e.keyCode == '40') {
          // down arrow
          playerY += 32;
        } else if (e.keyCode == '37') {
           // left arrow
           playerX -= 32;
        } else if (e.keyCode == '39') {
           // right arrow
           playerX += 32;
        }
        document.getElementById('player').style.left = playerX + 'px';
        document.getElementById('player').style.top = playerY + 'px';
        if (playerX == blockX && playerY == blockY) {
          alert('You win!');
        }
      }
    </script>
  </body>
</html>