Question

TL;DR: Each time a user presses the space key, I want the next line of dialogue to appear.

Context: I've just started learning to code in the last few weeks (first basic html & css, now JS). I've mostly been using freecodecamp and YouTube. To help me learn more creatively, I thought I'd start making a little text-based game (BOTW-themed, because it's my favourite actual game). I have all sorts of ideas for things I'd like to implement later, but I'm a bit stuck early on.

The problem: At the beginning of the game, I want to have some lines of dialogue, that I'll .append into the document, each time the user presses the space key. The basic code looks like this:

$(document).keyup(function(e) {
  if (e.which == 32) {
    $('#gameText').append("<h2>It sounds familiar...</h2>");
  }
});

$(document).keyup(function(e1) {
  if (e1.which == 32) {
    $('#zelda').append("<h3>Link...</h3>");
  }
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<h1> You hear an faint, incorporeal voice, carried by the wind... </h1>
<script>
  function(e)
</script>
<h2 id="gameText"></h2>
<h3 id="zelda"></h3>
<p> Press <b>space</b> to continue</p>

The problem with that is that a single press of the space key will trigger all the .keyup events at once; whereas I want to bring the lines in one at a time.

I've tried a few different ideas, such as creating a number variable, and incrementing it on each keypress, then using a switch statement to select each line of dialogue.

let spacecount = 0;
while (spacecount < 10) {
  $(document).keyup(function(e) {
    if (e.which == 32) {
      spacecount++;
    }
  });

  switch (spacecount) {
    case 1:
      $('#gameText').append("<h2>It sounds familiar...</h2>");
      break;
    case 2:
      $('#zelda').append("<h3>Link...</h3>");
      break;
  }
}

But it's just not happening, and I'm stumped. Apologies for the long-winded post.

Answer 1

I think putting logic inside event listener should solve the problem:

let spacecount = 0;

$(document).keyup(function(e) {
    if (spacecount < 10 && e.which == 32) {
        switch (spacecount) {
            case 1:
              $('#gameText').append("<h2>It sounds familiar...</h2>");
              break;
            case 2:
              $('#zelda').append("<h3>Link...</h3>");
              break;
        }

        spacecount++;
    }
});

Answer 2

You are using the same event for executing two functions. jQuery will execute both functions when the button is pressed. You need to set a counter and count the event.

Answer 3

这将是一个更优雅的解决方案。代替巨大的开关块，您可以有一个对话框行（或对象）和一个标记下一行的计数器。

const dialogue = [
    ["#gameText", "<h2>It sounds familiar...</h2>"],
    ["#zelda", "<h3>Link...</h3>"]
];

let counter = 0;

$(document).keyup(function(e) {
    if (e.which == 32) {
      if (counter >= dialogue.length)
        return;

      $(dialogue[counter][0]).append(dialogue[counter][1]);
      counter++; 
    }
});

<div id="gameText"></div>
<div id="zelda"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to make one keypress trigger multiple events separately

3 个答案: