Javascript 一段时间内的播放器交互

我在浏览器上编写游戏的逐轮脚本时遇到了一些错误，很抱歉我的拼写错误

我有一个函数，其中包含一个while，分为以下三部分（完整javascript）：

我遇到的问题是，在聆听一个动作时，我必须设置一个暂停，以便玩家有时间点击其中一个咒语

为了做到这一点，我尝试使用“sleep”函数让玩家有2秒钟的时间进行操作，并使用settimeout（）设置正常攻击（如果没有单击法术）

我使用的睡眠功能如下所示：

这两种方法都给了我错误：

-settimeout（）只有在整个脚本（while）完成（一次完成）后才有效

-“sleep”功能导致整个页面冻结，不仅是此时，html也无法点击

因此，我正在寻找一种让玩家在函数运行时进行交互的方法，如果这不可能，我可能不得不放弃交互部分

我在网上找了很长时间，没有找到任何解决方案，所以我希望你能在那里帮助我

编辑 我尝试使用Jacob的方法（使用异步函数和循环（）），因为这对我来说是最清楚的

但我发现了同样的第一个问题，即settimeout（）是在loop（）函数之后执行的，我认为问题出在这里：

 function attaqueBasic (attacker, defender) {
  console.log("basic attack");
  return new Promise((res, rej) => {
    setTimeout(() => {
        var dodge = dodge(defender);
        if(dodge == false){
            console.log("attack damage :"+attacker.dmg);
            defender.life = defender.life - attacker.dmg;
            console.log("life defender: "+defender.vie);
            if(attacker.hasOwnProperty("bonus")==true && defender.life>0){
                attackBonus(attacker, defender);
            }
        }
        res()
    }, 2000);
  })

} 这是一个让玩家进行基本攻击的功能，但它不会等待决心继续

在控制台中，我在循环运行时发现了“基本攻击”，但在settimeout中从未发现以下内容，并且仅在所有循环完成后执行。抱歉，如果我在这里犯了个大错误

下面是函数loop（），以防我犯了一些错误：

function loop(perso, monstre){
    nbtour += 1
    if(nbtour>=6){
        nbtour=0;
        return;
    }
    console.log('---New tour'+nbtour+'---');
    Turn(perso,monstre)
        .then(checkWin(perso,monstre))
        .then(Turn(monstre,perso))
        .then(checkWin(perso,monstre))
        .then(loop(perso, monstre))
        .catch(() => {
            console.log('End of combat, number of tours ='+nbtour);
            nbtour=0;
        })

}

---

谢谢您的时间。

我想这是在浏览器或类似平台上

在

while

循环中，用户不能合理地输入有意义的内容（我故意忽略了不合理的

提示

函数）。相反，处理玩家移动时发生的事件，并让事件处理程序处理事件引起的更改。在处理程序的逻辑结束时，检查循环终止条件（“只要它们的生命值大于0”），如果达到终止条件，则修改页面，说明游戏结束或其他情况（并可能禁用按钮）

例如，下面是一个使用数字猜测的简单示例：

var number=Math.floor（Math.random（）*10）+1；
var猜测=3；
var btn=document.getElementById（“猜测”）；
var输入=document.getElementById（“猜测值”）；
btn.addEventListener（“单击”，函数（）{
var value=input.value.trim（）；
如果（！值）{
猜测错误（“请填写一个值”）；
返回；
}
var guess=+值；
如果（isNaN（猜测））{
猜错（“请只填写简单数字”）；
返回；
}
如果（猜测<1 | |猜测>10）{
猜测错误（“1到10之间，包括”的哪一部分你不明白？；-）；
返回；
}
如果（猜测===数字）{
日志（“恭喜！你赢了！”）；
input.disabled=btn.disabled=true；
}否则{
log（“不，不是”+猜测）；
如果（--猜测===0）{
log（“你猜对了，电脑赢了。”）；
input.disabled=btn.disabled=true；
}否则{
input.value=“”；
input.focus（）；
}
}
});
log（“猜一个介于1和10之间的整数”）；
input.focus（）；
函数猜测错误（msg）{
控制台日志（msg）；
input.focus（）；
}

---

首先，我们不能在游戏循环中使用

，因为它会冻结浏览器，用户将无法与游戏交互

我们将使用
递归
，如下所示：

function loop () {
  loop()
}

其次，我们必须使用
async
停止
循环
等待用户操作，否则
递归
与
迭代
没有区别，如下所示：

setTimemout(attack, 2000)

firstAttack()
  .then(secondAttack)
  .then(thirdAttack)
  .catch(gameOver())

第三，我们必须将所有代码链接到循环中，使其逐个运行，因为它们是
异步的
，否则无法保证顺序，如下所示：

setTimemout(attack, 2000)

firstAttack()
  .then(secondAttack)
  .then(thirdAttack)
  .catch(gameOver())

这里是一个简单的演示


const php=document.querySelector（“.p-hp”）
const mhp=document.querySelector（“.m-hp”）
const output=document.querySelector（“.output”）
const fireballEl=document.querySelector（'.fireballEl'）
让不可预测性=错误
设hp=''
fireballEl.addEventListener（'click'，e=>{
可能性=真实
fireballEl.disabled=true
e、 预防默认值（）
})
函数playerTurn（）{
如果（不可撤销性）{
不可预测性=错误
返回火球（）
}
返回斜杠（）
}
函数斜杠（）{
返回新承诺（（res，rej）=>{
设置超时（（）=>{
const dmg=getRandomInt（1200）
hp.m-=dmg
如果（hp.m<0）{
hp.m=0
}
mhp.textContent=hp.m
output.innerHTML+=`
你砍下了怪物，伤害了${dmg}hp
`
res（）
}, 2000);
})
}
函数火球（）{
返回新承诺（（res，rej）=>{
设置超时（（）=>{
常量dmg=getRandomInt（260400）
hp.m-=dmg
如果（hp.m<0）{
hp.m=0
}
mhp.textContent=hp.m
fireballEl.disabled=false
output.innerHTML+=`
你向怪物投掷了一个火球，它损坏了${dmg}hp
`
res（）
}, 2000);
})
}
函数咬合（）{
返回新承诺（（res，rej）=>{
设置超时（（）=>{
常数dmg=getRandomInt（6,20）
hp.p-=dmg
if（hp.p<0）{
hp.p=0
}
php.textContent=h