如何在javascript画布中为不同的东西重用相同的键？

Question

In the canvas I want to be able to use the enter key to do one thing and then press it again to do another thing.

For example,

if(enterPressed) {

   // do one thing


}

if (enterPressed) {

    //Do some other thing


}

The problem is when I press enter once it automatically does both things at once whereas I want it to want it do each statement separately.

For more context what I want to do is similar to the style of text in pokemon games where the game will display some text then wait until you have pressed a button and then display the next set of text.

Answer 1

Your question is not specific to JavaScript or Canvas, but related more to general programming techniques. What you describe is different states of your program, rather than 2 actions that are done as a reaction to an event.

So think your program consist of multiple states: Displayed first text to user -> Displayed second text to user

You will switch between these states based on certain actions user takes, in your case when they hit enter. There're many ways to hold program states, and switch between these ones, but one of the easiest ones I can give an example is, holding your text in an array and an index value that holds which one is the current index:

var currentIndex = 0;
var texts = ["This is first message", "This is second message"]
if (enterPressed) {
    //you need to have boundary checks of course, skipping for simplicity
    displayText(texts[currentIndex])
    currentIndex++;
}

This is one way to hold the state of the program and switch between those states based on the user action.

Answer 2

The example code in the question has two statements in a row which I assume is how you want to handle enterPressed

To have a second (or third and more) action you will need to store the state of the enter actions. eg Is this the first press?

// this in the setup code.
var enterAction = "firstPress"

Then each time enterPressed is handled you must also check the state so that the correct action happens.

if (enterPressed && enterAction === "firstPress") {

When you handle the action you also set up the next state to be handled. Because you have two statements in a row that both check if enterPressed is true you need to also indicate that you have handled the press. This can just be setting enterPressed = false

    enterAction = "secondPress";
    enterPressed = false; 
}

Thus you code would look like

// Init the first enter state
const FIRST = 1, SECOND = 2;
var enterAction = FIRST;

And replacing the questions code with

// Handling first press
if (enterPressed && enterAction === FIRST) {
    enterAction = SECOND;  // set action for next press
    enterPressed = false;  // clear press to indicate its been handled

    // do one thing
}

// Handling second press
if (enterPressed && enterAction === SECOND) {
    enterAction = FIRST;    // set action for next press
    enterPressed = false;   // clear press to indicate its been handled

    //Do some other thing
}