Javascript JS/Canvas-如何仅在按下键时更新draw（）函数？

编辑：我自己解决了，很确定这不是一个理想的方法（：D），但它现在起作用了：p

解决方案：

document.addEventListener（'keydown'，e=>{
开关（如钥匙代码）{
案例37：
game.toggleTurn（）；
gameLoop（）；
打破
案例39：
game.toggleTurn（）；
gameLoop（）；
打破
案例40：
game.toggleTurn（）；
gameLoop（）；
打破
案例38：
game.toggleTurn（）；
gameLoop（）；
打破
}
});

我试图在画布上制作一个“类似流氓”的游戏进行练习，但我遇到了一些麻烦

我想做的是：

我想在我的游戏循环中实现一个“回合”系统，这样它只在回合事件发生时运行

下面是一些代码，您可以看到我在说什么：

我的index.js

让canvas=document.getElementById（'gameScreen'）；
设ctx=canvas.getContext（'2d'）；
const GAME_WIDTH=1024；
const GAME_HEIGHT=1024；
ctx.clearRect（0，0，游戏宽度，游戏高度）；
设lastTime=0；
让游戏=新游戏（游戏宽度、游戏高度）；
game.start（）；
函数gameLoop（）{
ctx.clearRect（0，0，游戏宽度，游戏高度）；
平局（ctx）；
requestAnimationFrame（gameLoop）；
}
requestAnimationFrame（gameLoop）；

my game.js：

从“/Player.js”导入播放器；
从“/input.js”导入InputHandler；
从'/levels.js'导入{buildLevel，map1}；
导出默认类游戏{
构造函数（游戏宽度、游戏高度）{
this.gameWidth=游戏宽度；
this.gameHeight=游戏高度；
this.player=新玩家（this）；
this.gameObjects=[]；
this.walls=[]；
这个.levels=[map1]；
此.currentLevel=0；
新InputHandler（this.player，this）；
}
开始（）{
this.walls=buildLevel（this，this.levels[this.currentLevel]）；
console.log（'yes'）；
this.gameObjects=[this.player]；
}
更新（deltaTime）{
console.log（'update'）；
}
抽签（ctx）{
console.log（'draw'）；
[…this.gameObjects，…this.walls].forEach（object=>object.draw（ctx））；
}
}

所以现在，我可以开始游戏，生成地图，我有玩家，我可以移动他。 困扰我的是，“draw（）”函数一直在循环中运行

只有在触发回合事件时，重新绘制游戏或玩家的正确方法是什么

---

希望我没有把你弄糊涂，谢谢

你可以用类似的东西。您可以在回合事件中更改

isTurn

布尔值的状态，并在gameLoop中使用

if

检查其值并停止循环

var isTurn = true;

function pauseGame() {
    isTurn = !isTurn;
    if (!isTurn) gameLoop();
}

function gameLoop() {

    if (isTurn) return;
    ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

    game.draw(ctx);
    requestAnimationFrame(gameLoop);
}

---

可能会添加一个变量来跟踪状态，并将您的绘图包装在

中，如果
谢谢您的回复！我已经试过了，问题是一旦循环被执行，它就会永远运行。仍然是相同的结果，console.log（“draw”）会在控制台中不停地打印