Question 305460 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to wait for input from mouse and delete it after in js

I am creating a little game:

I would like to pause my program to wait for mouse input before continuing to another player’s turn, then wait for another input and remove the first event listener.

This is what I have so far

function handactive(event) {
    // do something
}
game_ended = false
turn = 1
while (game_ended == false) {
    if (turn % 2 != 0) {
        player2hand.removeEventListener('click', handactive)
        player1hand.addEventListener('click', handactive)
        // wait until the above is triggered
    }
    else {
        player1hand.removeEventListener('click', handactive)
        player2hand.addEventListener('click', handactive)
        // wait until the above is triggered
    }
    if (turn > 3) {
        game_ended = true // will add logic for the game end later
    }
    turn++
}

I’m just not sure how to go about waiting for the event to be triggered before proceeding with the loop, right now it just removes the event listener before the player can click.

Thank you!

Tags:

2

Answers


  1. 0

    You just need a judgment in the EventListener but not a while loop

    let turn = 1

player2hand.addEventListener('click', handactive)
player1hand.addEventListener('click', handactive)

function handactive(event) {
  // before do something
  if ((turn % 2 != 0 && event.target == 'player2hand') || (turn % 2 == 0 && event.target == 'player2hand')) return

  //main logic

  //after
  if (++turn > 3) {
    player1hand.removeEventListener('click', handactive)
    player2hand.removeEventListener('click', handactive)
    //logic for game end later
  }
}
    Login or Signup to reply.
  2. 0

    Using a while loop to wait for user input synchronously is generally NOT a good idea in JavaScript, especially in the context of a web application where user input is event-driven. JavaScript operates on a single-threaded event loop, and synchronous code execution like a while loop can block the thread, making your application unresponsive.

    Instead, you should leverage the event-driven nature of JavaScript. Here’s a simple example using callbacks and promises:

     function handactive(event) {
  // Handle the click event
  // ...

  // Resolve the promise to signal that the event has been handled
  resolve();
}

function waitForClick(element) {
  return new Promise((resolve) => {
    element.addEventListener('click', (event) => handactive(event, resolve), { once: true });
  });
}

async function playGame() {
  let gameEnded = false;
  let turn = 1;

  while (!gameEnded) {
    if (turn % 2 !== 0) {
      await waitForClick(player1hand);
    } else {
      await waitForClick(player2hand);
    }

    // Your game logic here...

    if (turn > 3) {
      gameEnded = true;
    }

    turn++;
  }
}

// Start the game
playGame();

    In this example:

    • The handactive function is modified to accept an additional resolve parameter.
    • The resolve function is called to signal that the event has been handled.
    • The waitForClick function returns a promise that resolves when the specified element is clicked. It adds an event listener to the element, and the resolve function is called when the click event occurs.
    • The playGame function is now asynchronous (async). It uses await to wait for user input asynchronously, preventing the blocking of the event loop.

    This way, your code becomes more asynchronous and event-driven, allowing for a smoother user experience. Remember to adapt the game logic and event handling according to your specific requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search