Javascript html暂停画布游戏作品。。。但我的简历没有。为什么不呢?

Javascript html暂停画布游戏作品。。。但我的简历没有。为什么不呢?,javascript,html,css,Javascript,Html,Css,目前正在制作一个画布游戏。我的暂停功能有效,但我的简历无效。我在这里看到了另一个类似问题的例子,但没有帮助。我做错了什么 var paused = false; document.onkeydown = function onKeyPause(event) { if (event.keyCode === 80) paused = !paused; return;} var gamearea = { canvas: document.createElement("canvas"), s

目前正在制作一个画布游戏。我的暂停功能有效,但我的简历无效。我在这里看到了另一个类似问题的例子,但没有帮助。我做错了什么

var paused = false;

document.onkeydown = function onKeyPause(event) {
if (event.keyCode === 80)
    paused = !paused;
return;}

var gamearea = {
canvas: document.createElement("canvas"),
start: function () {
    this.canvas.width = 250;
    this.canvas.height = 287;

    ...more canvas css.........


update: function () {
    gamearea.context.clearRect(0, 0, 300, 400);
    document.getElementById("score").innerText = "Score: " + score;
    if (score == 20) {
        gamearea.stop(true);
        return;
    }
    if (targetGone()) {
        gamearea.stop(false);
        return;
    }

    if (paused) {
        gamearea.pausedGame(true);
        return;
    }

pausedGame: function (paused) {

    gamearea.canvas.removeEventListener("click", clickHandler, event);
    gamearea.context.fillRect(0, 100, 300, 100);
    gamearea.context.font = "20px helvetica";
    ... more canvas css ..

    if (paused) return; // <--- stop looping
    update();
    draw();
    window.requestAnimationFrame(loop, canvas);
},
var暂停=false;
document.onkeydown=函数onKeyPause(事件){
如果(event.keyCode===80)
暂停=!暂停;
返回;}
var游戏区={
画布:document.createElement(“画布”),
开始:函数(){
this.canvas.width=250;
this.canvas.height=287;
…更多画布css。。。。。。。。。
更新:函数(){
gamearea.context.clearRect(0,0300400);
document.getElementById(“score”).innerText=“score:”+score;
如果(分数=20){
游戏区。停止(真);
回来
}
if(targetGone()){
游戏区。停止(错误);
回来
}
如果(暂停){
gamearea.pausedGame(true);
回来
}
PausedName:函数(已暂停){
gamearea.canvas.removeEventListener(“单击”,clickHandler,事件);
gamearea.context.fillRect(01000300100);
gamearea.context.font=“20px helvetica”;
…更多画布css。。

如果(暂停)返回;//requestAnimationFrame返回一个Id,您可以使用该Id“暂停”游戏循环

使用cancelAnimationFrame(返回的\u ID)

简单例子

// global variable
let loopId = null;

function start() {

  ...
  loopId = requestAnimationFrame(loop);
}

function loop() {
  ...
  loopId = requestAnimationFrame(loop);
}

function pauseHandler() {
  if (looId) {
    cancelAnimationFrame(loopId)
  }
}

与您遇到的问题无关,但我建议将此库用于键盘绑定。不幸的是,对于此项目,我不能使用JS库。它必须是香草JS…耶!但无论如何,谢谢您!我不确定为什么
pausedGame
会调用
update
…既然循环已停止,您需要在暂停时恢复它d是falsy,因此
paused=!paused;if(paused==false){gamearea.update();//resume}
我可以通过声明paused=!paused;if(paused==false){gamearea.update();gamearea.start()恢复循环来修复我的问题;return;不像OP那样调用requestAnimationFrame也会停止循环。他们的问题是如何恢复循环。