2D Platformer Game HTML Code - Create a Jumping Character - 常规

<!DOCTYPE html>
<html>
<head>
  <title>2D Platformer</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
<pre><code>#canvas {
  border: 1px solid #000;
  position: absolute;
  top: 0;
  left: 0;
}
</code></pre>
  </style>
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;

    // Variables for the game
    var player = {
      x: width / 2,
      y: height - 5,
      width: 5,
      height: 5,
      speed: 3,
      velX: 0,
      velY: 0,
      jumping: false
    };
    var blocks = [];
    var gravity = 0.3;

    // Create the blocks
    blocks.push({
      x: 0,
      y: 0,
      width: 10,
      height: height
    });
    blocks.push({
      x: 0,
      y: height - 2,
      width: width,
      height: 50
    });
    blocks.push({
      x: width - 10,
      y: 0,
      width: 50,
      height: height
    });

    // The update function, which is called every frame
    function update() {
      // Update the player's position
      player.velX *= 0.8;
      player.velY += gravity;

      player.x += player.velX;
      player.y += player.velY;

      // Check for collision detection
      checkCollision();

      // Draw the game
      draw();

      // Call the update function again
      requestAnimationFrame(update);
    }

    // Draw the game
    function draw() {
      // Clear the canvas
      context.clearRect(0, 0, width, height);

      // Draw the blocks
      context.fillStyle = 'black';
      for (var i = 0; i < blocks.length; i++) {
        context.fillRect(blocks[i].x, blocks[i].y, blocks[i].width, blocks[i].height);
      }

      // Draw the player
      context.fillStyle = 'blue';
      context.fillRect(player.x, player.y, player.width, player.height);
    }

    // Check for collision
    function checkCollision() {
      for (var i = 0; i < blocks.length; i++) {
        var direction = colCheck(player, blocks[i]);

        if (direction === 'l' || direction === 'r') {
          player.velX = 0;
          player.jumping = false;
        } else if (direction === 'b') {
          player.jumping = false;
        } else if (direction === 't') {
          player.velY *= -1;
        }
      }
    }

    // Collision detection function
    function colCheck(shapeA, shapeB) {
      // Get the vectors to check against
      var vX = shapeA.x + (shapeA.width / 2) - (shapeB.x + (shapeB.width / 2));
      var vY = shapeA.y + (shapeA.height / 2) - (shapeB.y + (shapeB.height / 2));

      // Add the half widths and half heights of the objects
      var hWidths = (shapeA.width / 2) + (shapeB.width / 2);
      var hHeights = (shapeA.height / 2) + (shapeB.height / 2);

      var colDir = null;

      // If the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision
      if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {
        // figures out on which side we are colliding (top, bottom, left, or right)
        var oX = hWidths - Math.abs(vX);
        var oY = hHeights - Math.abs(vY);
        if (oX >= oY) {
          if (vY > 0) {
            colDir = 't';
            shapeA.y += oY;
          } else {
            colDir = 'b';
            shapeA.y -= oY;
          }
        } else {
          if (vX > 0) {
            colDir = 'l';
            shapeA.x += oX;
          } else {
            colDir = 'r';
            shapeA.x -= oX;
          }
        }
      }
      return colDir;
    }

    // Key events
    document.body.addEventListener('keydown', function(e) {
      if (e.keyCode === 37) {
        player.velX = -player.speed;
      } else if (e.keyCode === 38) {
        if (!player.jumping) {
          player.jumping = true;
          player.velY = -player.speed * 2;
        }
      } else if (e.keyCode === 39) {
        player.velX = player.speed;
      }
    });

    // Start the game
    update();
  </script>
</body>
</html>