HTML Platformer Game: Code & Tutorial - Build Your Own - 常规

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Platformer Game: Code & Tutorial</title>
    <style>
      #game {
        width: 500px;
        height: 280px;
        background-color: #ccc;
        position: relative;
      }
      #player {
        width: 20px;
        height: 20px;
        background-color: #000;
        position: absolute;
        left: 0px;
        top: 260px;
      }
      #platform {
        width: 500px;
        height: 20px;
        background-color: #00f;
        position: absolute;
        left: 0px;
        top: 240px;
      }
    </style>
  </head>
  <body>
    <div id='game'>
      <div id='player'></div>
      <div id='platform'></div>
    </div>
    <script>
      // Get the game element
      var game = document.getElementById('game');
<pre><code>  // Get the player element
  var player = document.getElementById('player');

  // Get the platform element
  var platform = document.getElementById('platform');

  // Set the initial position of the player
  var playerX = 0;
  var playerY = 260;

  // Listen for keydown events
  document.onkeydown = function(e) {
    // Move the player left
    if (e.keyCode === 37) {
      playerX -= 10;
    }

    // Move the player right
    if (e.keyCode === 39) {
      playerX += 10;
    }

    // Move the player up
    if (e.keyCode === 38) {
      playerY -= 10;
    }

    // Move the player down
    if (e.keyCode === 40) {
      playerY += 10;
    }

    // Check if the player is over the platform
    if (playerY === 240) {
      // If so, make sure the player is within the bounds of the platform
      if (playerX &gt; platform.offsetLeft &amp;&amp; playerX &lt; platform.offsetLeft + platform.offsetWidth) {
        playerY = 260;
      }
    }

    // Update the player's position
    player.style.left = playerX + 'px';
    player.style.top = playerY + 'px';
  };
&lt;/script&gt;
</code></pre>
  </body>
</html>