程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

html 暂停画布游戏有效...但我的简历没有。为什么不?

发布于2023-05-29 21:20     阅读(625)     评论(0)     点赞(19)     收藏(3)


目前正在开发画布游戏。我的暂停功能有效,但我的简历无效。我在这里看到了其他类似问题的例子,但它没有帮助。我究竟做错了什么?

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);
},

解决方案


requestAnimationFrame 返回一个 Id,您可以使用它来“暂停”您的游戏循环

使用 cancelAnimationFrame(RETURNED_ID)

简单的例子

// global variable
let loopId = null;

function start() {

  ...
  loopId = requestAnimationFrame(loop);
}

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

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



所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/528445/894c215ad81c78a8f623/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

19 0
收藏该文
已收藏

评论内容:(最多支持255个字符)