p5.js打地鼠游戏计时结束后，如何重置分数与按钮文本？

Hey there! Let's work through this reset problem you're facing—this is a super common issue when managing game state and timers in p5.js, so we'll break it down step by step.

The Root Problem #

From what you described, your game isn't fully resetting all its state when the 30-second timer ends. That includes:

• The "begin" button's text not reverting to its original state
• The score staying stuck at its final value
• The game area and mole states not resetting properly

Step-by-Step Fixes #

1. Centralize Your Game State

First, let's move all game-related variables into a single state object. This makes resetting way easier than tracking individual variables:

// Global game state object to keep all values organized
let gameState = {
  score: 0,
  timeLeft: 30,
  isPlaying: false,
  timerInterval: null // Store timer reference if using setInterval
};

2. Build a Dedicated Reset Function

Create a resetGame() function that handles all reset tasks in one place. This ensures you don't miss any elements that need to be reverted:

function resetGame() {
  // Reset core game values
  gameState.score = 0;
  gameState.timeLeft = 30;
  gameState.isPlaying = false;

  // Reset UI elements
  document.getElementById('begin-btn').textContent = 'Begin';
  document.getElementById('game-div').style.display = 'hidden';

  // Clear any active timers (critical if using setInterval)
  if (gameState.timerInterval) {
    clearInterval(gameState.timerInterval);
    gameState.timerInterval = null;
  }

  // Reset mole states (adjust based on your mole implementation)
  // Example: If you have an array of mole objects with a "visible" property
  moles.forEach(mole => {
    mole.visible = false;
    // Reset any other mole properties like position or animation state
  });
}

3. Update Your Timer Logic to Trigger Reset

Make sure when the timer hits 0, you call your reset function. If you're using p5.js's draw() loop for timing (more accurate than setInterval):

function draw() {
  background(220);

  if (gameState.isPlaying) {
    // Count down using deltaTime to avoid timing drift
    gameState.timeLeft -= deltaTime / 1000;

    // Check if time's up
    if (gameState.timeLeft <= 0) {
      gameState.timeLeft = 0; // Prevent negative time display
      resetGame(); // Trigger full reset
    }

    // Draw game elements (score, timer, moles)
    text(`Score: ${gameState.score}`, 20, 30);
    text(`Time: ${Math.floor(gameState.timeLeft)}`, width - 80, 30);
    // Your mole drawing/animation logic here
  }
}

If you were using setInterval for timing, update your button click handler to start the timer and clear it on reset:

document.getElementById('begin-btn').addEventListener('click', () => {
  if (!gameState.isPlaying) {
    // Start the game
    document.getElementById('game-div').style.display = 'block';
    gameState.isPlaying = true;
    document.getElementById('begin-btn').textContent = 'Playing...';

    // Start timer with setInterval
    gameState.timerInterval = setInterval(() => {
      gameState.timeLeft--;
      if (gameState.timeLeft <= 0) {
        resetGame();
      }
    }, 1000);
  } else {
    // Allow mid-game reset if the button is clicked again
    resetGame();
  }
});

4. Ensure All Logic Uses the State Object

Double-check that your score display, mole interactions, and any other game logic reference gameState.score and gameState.isPlaying instead of standalone variables. For example, when a mole is whacked:

function mousePressed() {
  if (gameState.isPlaying) {
    // Check if mouse hits a visible mole
    moles.forEach(mole => {
      if (dist(mouseX, mouseY, mole.x, mole.y) < mole.size/2 && mole.visible) {
        gameState.score++;
        mole.visible = false;
      }
    });
  }
}

Quick Troubleshooting Tips #

• If your score still isn't resetting, make sure you're not hardcoding the score value anywhere—always use gameState.score.
• If the game div isn't hiding, verify the element ID matches what's in your HTML (IDs are case-sensitive!).
• Test the reset function manually by calling resetGame() in the browser console to see if all elements update correctly.

That should cover all the bases to get your game resetting properly after the timer ends!

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