如何实现单次按键逐次触发独立事件？文本游戏对话显示问题

Hey Andy, awesome call building a Zelda-themed game to practice your JS skills—creative projects like this are the best way to learn! Let's get that dialogue working so each spacebar press shows just one line at a time.

Why Your Current Code Isn't Working #

First, let's break down the issues:

• Your initial code had two separate keyup event listeners for the spacebar. Every time you pressed space, both fired at once, which is why all dialogue showed up together.
• The while loop approach didn't work because JavaScript runs loops synchronously. The loop would instantly increment spacecount to 10 before the user even presses a key, so the switch statement never ran when you intended it to.

The Solution: Track Presses with a Counter (Done Right) #

We'll use a single event listener and a counter variable to track how many times the spacebar has been pressed. Each press will check the counter, display the corresponding dialogue, then increment the counter.

First, clean up your HTML structure (we'll keep your existing IDs but organize things a bit):

<h1> You hear a faint, incorporeal voice, carried by the wind... </h1>
<div id="dialogue-area">
  <h2 id="gameText"></h2>
  <h3 id="zelda"></h3>
</div>
<p> Press <b>space</b> to continue</p>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
// Our JS will go here
</script>

Now add the working JavaScript:

// Initialize counter outside the event listener so it persists
let spacePressCount = 0;

// Bind ONE keyup listener to the document
$(document).keyup(function(e) {
  // Only respond to the spacebar (key code 32)
  if (e.which === 32) {
    // Prevent page scrolling when space is pressed (better user experience)
    e.preventDefault();

    // Use switch to match the counter to dialogue lines
    switch(spacePressCount) {
      case 0:
        $('#gameText').append("<h2>It sounds familiar...</h2>");
        break;
      case 1:
        $('#zelda').append("<h3>Link...</h3>");
        break;
      // Add more cases here for future dialogue lines!
      case 2:
        $('#gameText').append("<h2>Wait... is that really you?</h2>");
        break;
      // When all dialogue is done, stop listening for spacebar presses
      default:
        $(document).off('keyup');
        alert("The voice fades into the wind...");
        break;
    }

    // Increment the counter after displaying the dialogue
    spacePressCount++;
  }
});

Bonus: Make Dialogue Easier to Maintain #

If you plan to add lots of dialogue lines, storing them in an array will be way more flexible than a long switch statement. Here's how to refactor it:

// Store all dialogue in an array—easy to add/remove lines!
const dialogueLines = [
  { targetId: '#gameText', content: "<h2>It sounds familiar...</h2>" },
  { targetId: '#zelda', content: "<h3>Link...</h3>" },
  { targetId: '#gameText', content: "<h2>Wait... is that really you?</h2>" },
  { targetId: '#zelda', content: "<h3>Wake up, hero...</h3>" }
];

let spacePressCount = 0;

$(document).keyup(function(e) {
  if (e.which === 32) {
    e.preventDefault();

    // Check if there are still lines left to show
    if (spacePressCount < dialogueLines.length) {
      const currentLine = dialogueLines[spacePressCount];
      $(currentLine.targetId).append(currentLine.content);
      spacePressCount++;
    } else {
      // No more lines—stop listening for spacebar
      $(document).off('keyup');
      alert("The voice fades into the wind...");
    }
  }
});

Key Takeaways #

• Only bind one event listener for the spacebar to avoid overlapping triggers.
• Keep your counter variable outside the event listener so it retains its value between presses.
• Use e.preventDefault() to stop unwanted page scrolling when the user presses space.
• For larger projects, store content like dialogue in arrays/objects to keep your code clean and scalable.

Keep up the great work with your Zelda game—can't wait to see where you take it!

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