Canvas动画方块实现及YellowTrack变量移动异常问题求助

Hey there! Let's figure out why your YellowTrack isn't updating its y-coordinate and moving—this is a super common pitfall with Canvas animations, so we'll walk through the most likely fixes step by step.

Common Causes & Fixes #

1. Your position update isn't in the animation loop #

Canvas animations rely on redrawing every frame with requestAnimationFrame. If you're only setting YellowTrack's y-value once (like in startGame()), it'll never change after the initial render.

Make sure you're updating the y-coordinate inside your game loop, then redrawing everything:

// First, set up your game loop (call this after startGame())
function gameLoop() {
  // Clear the canvas first to avoid trailing artifacts
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Update YellowTrack's position HERE
  if (YellowTrack) {
    YellowTrack.y += 3; // Adjust this number to control speed
    // Optional: Add boundary checks if you want it to loop or stop
    if (YellowTrack.y > canvas.height) YellowTrack.y = -YellowTrack.height;
  }

  // Redraw all your elements
  myGameLines1.draw();
  myGameLines2.draw();
  myGameLines3.draw();
  if (YellowTrack) YellowTrack.draw(); // Don't forget to redraw the track!

  // Keep the loop running
  requestAnimationFrame(gameLoop);
}

2. Your YellowTrack class isn't using dynamic y-values #

Double-check the class/constructor for YellowTrack (or whatever object represents it). If its draw() method uses hardcoded y-values instead of referencing the object's y property, updating YellowTrack.y won't do anything.

Bad example (hardcoded y):

function Track() {
  this.draw = function() {
    ctx.fillRect(250, 0, 100, 50); // The 0 here is fixed—won't update!
  }
}

Good example (uses dynamic this.y):

function Track(x, y, width, height, color) {
  this.x = x;
  this.y = y; // This is the mutable property we'll update
  this.width = width;
  this.height = height;
  this.color = color;

  this.draw = function() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

// Initialize your track in startGame()
YellowTrack = new Track(250, 0, 100, 50, "yellow");

3. Scope issues are blocking access to YellowTrack #

If YellowTrack is defined as a local variable inside startGame(), your game loop (which is probably outside that function) won't be able to modify it.

Fix this by making YellowTrack accessible to the loop—either declare it in the global scope, or store it in a shared game state object:

// Global scope (or a module-level variable)
let YellowTrack;

function startGame() {
  // ... other game setup ...
  YellowTrack = new Track(250, 0, 100, 50, "yellow");
  gameLoop(); // Start the loop after initializing everything
}

4. Something is overwriting the y-value #

Check if there's other code that resets YellowTrack.y back to its initial value every frame. For example, if you accidentally reinitialize YellowTrack inside the loop, or have a line like YellowTrack.y = 0 in your draw logic, it'll undo your updates.

Next Steps #

If none of these fix it, sharing the full code for your YellowTrack object, its draw method, and your animation loop would help pinpoint the exact issue. But odds are one of these checks will get your track moving!

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