无Canvas的JavaScript平台游戏：如何实现流畅行走与跳跃？

Hey there! Let's tackle that janky movement issue you're having with your no-Canvas platformer—super common pitfall, but totally fixable once we break down the root causes. Here are the most likely culprits and actionable fixes:

1. Frame Rate Dependence (The #1 Culprit) #

If you're calculating movement based on raw frame counts or fixed intervals (like setInterval), your player's speed will jump around when the browser's frame rate drops. The fix is to use delta time to normalize movement to real-world seconds.

Example code snippet:

let lastTimestamp = 0;
const playerSpeed = 150; // 像素/秒 (fixed speed, regardless of frame rate)

function update(timestamp) {
  const delta = (timestamp - lastTimestamp) / 1000; // Convert to seconds
  lastTimestamp = timestamp;

  // Handle horizontal movement
  if (keys.right) {
    const currentX = parseFloat(playerElement.style.left) || 0;
    playerElement.style.left = `${currentX + playerSpeed * delta}px`;
  }
  if (keys.left) {
    const currentX = parseFloat(playerElement.style.left) || 0;
    playerElement.style.left = `${currentX - playerSpeed * delta}px`;
  }

  requestAnimationFrame(update);
}
requestAnimationFrame(update);

This ensures your player moves the same distance per second, even if frames stutter.

2. Integer Position Snapping #

Forcing player positions to whole integers (using Math.floor/Math.ceil) triggers browser pixel-alignment, which causes jerky movement. Let browsers handle sub-pixel rendering instead:

// Avoid this:
// playerElement.style.left = `${Math.floor(playerX)}px`;

// Do this instead:
playerElement.style.left = `${playerX}px`; // playerX can be a decimal like 123.67

Modern browsers render sub-pixels smoothly, eliminating that "stutter step" feel.

3. Layout Thrashing (DOM Read/Write Churn) #

If you're repeatedly reading DOM layout values (like getBoundingClientRect) and immediately modifying styles, you force the browser to recalculate layout every time—this kills performance. Fix it by:

• Batch all layout reads first, then do all style updates
• Use transform instead of left/top for movement (it skips layout entirely)

Example with transform:

// Way smoother than modifying left/top
playerElement.style.transform = `translate(${playerX}px, ${playerY}px)`;

4. Clunky Collision Detection #

If your collision check only runs once per frame and doesn't account for the player's movement path, you'll get sudden "stuck" or "穿墙" moments. Try:

• Axis-separated collision: Handle horizontal and vertical movement separately (check horizontal first, then vertical)
• Continuous collision: Instead of checking only the end position, test if the player's path intersects an obstacle and stop them early

Simplified horizontal collision example:

function checkHorizontalCollision(targetX) {
  const playerRect = playerElement.getBoundingClientRect();
  const obstacleRect = obstacleElement.getBoundingClientRect();

  // Check if moving to targetX would cause overlap
  const willOverlap = targetX + playerRect.width > obstacleRect.left &&
                      targetX < obstacleRect.left + obstacleRect.width &&
                      playerRect.top < obstacleRect.top + obstacleRect.height &&
                      playerRect.bottom > obstacleRect.top;

  if (willOverlap) {
    // Push player to the obstacle's edge
    return keys.right ? obstacleRect.left - playerRect.width : obstacleRect.left + obstacleRect.width;
  }
  return targetX; // No collision, proceed to target
}

// Use in your update loop:
const targetX = parseFloat(playerElement.style.left) + playerSpeed * delta;
const finalX = checkHorizontalCollision(targetX);
playerElement.style.left = `${finalX}px`;

5. Unpolished Jump Physics #

Jump stutter often comes from not applying gravity and velocity consistently with delta time. Here's a smoother approach:

let verticalVelocity = 0;
const gravity = 980; // 像素/秒² (realistic gravity)
const jumpForce = -400; // Upward velocity (negative because Y increases downward)
let isGrounded = true;

function update(timestamp) {
  const delta = (timestamp - lastTimestamp) / 1000;
  lastTimestamp = timestamp;

  // Handle jump input
  if (keys.up && isGrounded) {
    verticalVelocity = jumpForce;
    isGrounded = false;
  }

  // Apply gravity
  verticalVelocity += gravity * delta;
  let targetY = parseFloat(playerElement.style.top) || 0;
  targetY += verticalVelocity * delta;

  // Check ground collision
  const groundRect = groundElement.getBoundingClientRect();
  const playerRect = playerElement.getBoundingClientRect();
  if (targetY + playerRect.height >= groundRect.top) {
    targetY = groundRect.top - playerRect.height;
    verticalVelocity = 0;
    isGrounded = true;
  }

  playerElement.style.top = `${targetY}px`;
  requestAnimationFrame(update);
}

This creates smooth acceleration and deceleration for jumps, no sudden stops.

Start with delta time and switching to transform—those two changes usually fix 80% of jank. Then tweak your collision and physics to refine the feel!

内容的提问来源于stack exchange，提问作者user9363416