Помощь с асинхронностью JS?

Question

[montakarlo]

Делаю мини-игру, есть здоровье персонажа, по нажатию на "Q" от него отнимается 10 c помощью функции damage.
Нужно что-то вернуть в функцию fight, чтобы в тот момент, когда здоровье будет ниже 0, в консоль вывелось сообщение
"finish".
Функция fight должна заканчивать свое выполнение тогда, когда здоровье будет 0

let health = 50

async function fight(){
  addKeysEvents();
  return new Promise((resolve) =>

  })
}

function damage(){
  health = health -10;
}

function addKeysEvents(){
  document.addEventListener('keydown', function(event){
    if (event.code == 'KeyQ'){
      damage();
    }
  })
}
fight()

Comments

[Dima Polos]

Зачем тут асинхронность?

[Dima Polos]

В описанной задаче и в реализации нет асинхронности, кроме того, что зачем-то Вы используете async и Promise.

[be_a_man]

А зачем тут async?

if (event.code == 'KeyQ'){
      health > 0 ? damage() : console.log('finish');
    }

[montakarlo]

be_a_man, Dima Polos,
В задаче уже были прописаны определенные участки кода, их изменять нельзя. Написано, что вывести нужно с помощью решения промиса

[Владимир]

montakarlo, Пометьте участки кода которые нельзя изменять.
Я бы обернул addEventListener в промис

[montakarlo]

Владимир,

async function fight(){ - эта часть
return new Promise((resolve) => - и эта часть

И вывод в консоль должен быть реализован с помощью этого промиса

[montakarlo]

Владимир, в цельном виде в ходе работы программы вызывается функция fight, которая запускает арену, на которой все происходит
и по завершению боя, то-есть, когда здоровье станет меньше нуля, должно вывестись в консоль сообщение и закрыться арена, потому все и нужно сделать внутри функции fight

[Kovalsky]

montakarlo, "async function fight(){ - эта часть
return new Promise((resolve) => - и эта часть" - это не может быть правдой, потому что для этой функции не нужно ключевое слово async, она и так асинхронная в виду того что возвращает промис и в её теле нигде нету await. Вы можете спокойно убрать async

[montakarlo]

Kovalsky, хорошо, спасибо, а как решить мой вопрос?)

[montakarlo]

Владимир, а как это решит мой вопрос?
не совсем понимаю, можете , если Вам было бы не трудно, написать, как это должно выглядеть, чтобы работало так, как я указал в описании

[Владимир]

Я перенес в ответы

[montakarlo]

Владимир, спасибо))

Answer 1

[Дуболом Одноклеточный]

if (health <= 0){
  console.log("финиш бл*");
}

Изменено:
А также:

function damage(){
  health -= 10;
}
function addKeysEvents(){
  document.addEventListener('keydown', function(event){
    if (event.key == 'Q'){
      damage();
    }
  })
}

Comments

[montakarlo]

в цельном виде в ходе работы программы вызывается функция fight, которая запускает арену, на которой все происходит
и по завершению боя, то-есть, когда здоровье станет меньше нуля, должно вывестись в консоль сообщение и закрыть арену, потому все и нужно сделать внутри функции fight
Вывести в консоль нужно с помощью решения промиса

[Дуболом Одноклеточный]

Какой промис?! Это можно сделать просто добавив оператор:

async function fight(){
  if (health <= 0){
    console.log("финиш бл*");
  }
}

[montakarlo]

Дуболом Одноклеточный, не работает так(

[montakarlo]

Дуболом Одноклеточный, функция то асинхронная, но, на сколько я понимаю, проверяется условие и на этом заканчивается выполнение функции.
Нужно, чтобы функция fight заканчивала свое выполнение тогда, когда здоровье будет 0

[Kovalsky]

montakarlo, "Нужно, чтобы функция fight заканчивала свое выполнение тогда, когда здоровье будет 0" - ну вот это уже сильно меняет дело

[montakarlo]

Kovalsky,понял, не достаточно точно описание значит написал, прошу прощения)

[Kovalsky]

montakarlo, в текущей логике приложения могу предложить только систему событий: при выполнении функции damage отправлять событие которое будет ловить fight и завершать свое выполнение. Звучит идиотически, но ничего лучше придумать не могу. Типа так:

example

let health = 50;
const bus = new EventEmitter();

function fight(){
  addKeysEvents();
  return new Promise((res, rej) => {
	  bus.subscribe(e => {
	  	if (e.type === 'gameover') {
	  		bus.unsubscribe();
	  		res();
	  	}
	  })
  })
}

function damage(){
  health = health -10;
  if (health <= 0) {
  	bus.trigger('gameover');
  }
}

function addKeysEvents(){
  document.addEventListener('keydown', function(event){
    if (event.code == 'KeyQ'){
      damage();
    }
  })
}

await fight();
console.log('The game is over now!');

Это концепт, то есть объекта EventEmitter не существует по умолчанию в JS, но зато он есть в любой реактивной библиотеке типа rxjs, также можно похожее соорудить из CustomEvents.

Апдейт: чо-то я туплю, вам уже выше предложили достаточно адекватное решение от Владимир: обернуть addEventListener в промис, и выполнять resolve только если хп меньше или равно 0.

[montakarlo]

Kovalsky, не совсем понимаю, как это должно выглядеть((

[Kovalsky]

montakarlo, обратите внимание что код addEventListener в моем примере очень похож на код subscribe. Это потому что там по сути происходит одно и то же: мы сначала подписываемся на событие, а потом ждем соответствующего события чтобы чо-то там выполнить. Сделайте так же: запихните в промис внутри fight вызов addEventListener и в переданной функции обработчике выполняйте resolve если хп <=0

[Дуболом Одноклеточный]

montakarlo, ТАК В ЧЕМ ПРОБЛЕМА? Зачем тебе эти промисы, убери нафиг async и сделай класс, зачем тебе везде отдельные функции? ведь дамаг это урон, который наносится во время fight'a, т.е. дамаг принадлежит fight'у. С addKeysEvents тоже самое. А также, оператор напиши после объявления fight()

let health = 50;

function fight(){
  // конструктор напиши если не будет работать метод stop
  this.stop = function(){
   console.log("финиш");
  }
  this.damage = function(){
     health -= 10;
  }

  document.addEventListener('keydown', function(event){
    if (event.code == 'KeyQ'){
      fight.damage();
     }
   });
}
fight();
if(health == 50){
  fight.stop();
}

[Kovalsky]

Дуболом Одноклеточный, ну видимо задача теоретическая, то есть суть именно в том, чтобы всю процедуру игры запихнуть в функцию fight

[montakarlo]

Kovalsky, так должно быть, Вы считаете?

let health = 50

async function fight(){
  return new Promise((resolve) => {
    document.addEventListener(health<=0, resolve());
  }).then(console.log('finish'))
    
}

function damage(){
  health = health -10;
}

function addKeysEvents(){
  document.addEventListener('keydown', function(event){
    if (event.code == 'KeyQ'){
      damage();
    }
  })
}

[Дуболом Одноклеточный]

Kovalsky, Да, он попросил вроде, я сделал

Дуболом всегда выполняет просьбы

Кстати, вы тут из третьего мадагаскара походу
(montakarlo и Kovalsky)

[Дуболом Одноклеточный]

montakarlo #зачемпромисы. Чтобы остановить функцию, достаточно в функцию stop добавить return false;

let health = 50;

function fight(){
  // конструктор напиши если не будет работать метод stop
  this.stop = function(){
   console.log("финиш");
   return false; // это для того, чтобы код функции застопорить
  }
  this.damage = function(){
     health -= 10;
  }

  document.addEventListener('keydown', function(event){
    if (event.code == 'KeyQ'){
      fight.damage();
     }
   });
}
fight();
if(health <= 0){
  fight.stop();
}

[montakarlo]

Дуболом Одноклеточный, такова суть задания, потому и ищу решение с промисом
буду признателен за помощь))

[Дуболом Одноклеточный]

Извини, но зачем промисы, когда можно решить все не усложняя это промисами?
Но ладно, попробую

[Kovalsky]

montakarlo, нет, немного не так. Вот у вас в addKeysEvents есть обработчики, вы их вешайте прямо в fight а не в функции addKeysEvents, и выполняйте ресолв. Логика такая: при вызове fight вешается обработчик на клик, и в этом клике при достижении нуля хп вызывается ресолв.

Дуболом Одноклеточный, "Извини, но зачем промисы, когда можно решить все не усложняя это промисами?" - человек уже подтвердил, что задача теоретическая, таким образом это не лишнее усложнение, а условие.

"Кстати, вы тут из третьего мадагаскара походу" - монтекарло тоже был в мадагаскаре?

[Дуболом Одноклеточный]

Kovalsky, Ааааа понял! Спасибо а то вопрос так и не понял. Я такой думаю, зачем отдельная функция, вот зачем

[montakarlo]

Kovalsky, спасибо большое, почти получилось
только теперь, когда, к примеру, у игрока осталось 10 здоровья, я нажимаю уже раз клавишу удара, у него становится 0, ничего не происходит в этот момент, но когда нажимаю еще раз, то выводит, что игра окончена

[Дуболом Одноклеточный]

montakarlo, выведи health в консоль и посмотри, а нулю ли оно равно на самом деле.
попробуй еще if (health == 0)

[montakarlo]

Дуболом Одноклеточный, да, нулю, просто выходит, что снимается здоровье уже после того, как нажата клавиша, потому оно показывает окончание игры только на следующем нажатии

[Дуболом Одноклеточный]

Попробуй health -= 10

[montakarlo]

Дуболом Одноклеточный, ничего не решает

[montakarlo]

Дуболом Одноклеточный, починил с помощью setTimeout))

[montakarlo]

всем огромное спасибо))

[Дуболом Одноклеточный]

Я думал так сделать, но думал будет тупить

[Дуболом Одноклеточный]

montakarlo, Я что-то в этом вопросе лошканулся
Даже не помог ничем походу(

Answer 2

[be_a_man]

Promise вызывает resolve при успешном выполнении и reject при ошибке.

В вашем случае скорее всего так, но архитектура кода очень странная

async function fight(){
  addKeysEvents();
  return new Promise((resolve) =>
    health <= 0 && resolve('finish')
  })
}

fight().then( v => { console.log(v) })

Answer 3

[Владимир]

montakarlo, Давай попробуем подумать.
У тебя в функции fight есть кусок кода

async function fight(){
  addKeysEvents();
  return new Promise((resolve) =>

  })
}

И почему то эта функция async хотя возвращает Promise это не логично, функции делают асинхронными чтобы в ней можно было делать await и работать с промисами как с обычными функциями
https://developer.mozilla.org/uk/docs/Web/JavaScri...
Потом, у тебя вызов addKeysEvents(); стоит выше return new Promise хотя логично запихнуть его внутрь, тогда addKeysEvents может вернуть промис, который зарезолвится когда жизни будет меньше нуля
https://habr.com/ru/company/mailru/blog/269465/
если таки оставить fight с async, можно убрать конструкцию return new Promise((resolve) =>
и использовать await а промис оставить только в addKeysEvents