画布游戏帧率下降

Canvas game framerate drop

本文关键字：帧率 游戏 布游戏      更新时间：2023-09-26

晚上好，首先我不确定我应该在这里发布这个，因为我真的不知道这里出了什么问题(唯一的线索是它发生在我移动了所有变量在我的代码顶部，同时试图"清理"一点)。

但这里有个问题:我创造了一款画布游戏，在移动变量后，我开始获得主要的帧降。游戏重量不到20Ko，图像非常小和简单，我在更新循环中有一个for循环，但它似乎从来没有问题(它不是无限的)，所以简而言之，我不知道这里出了什么问题

这里有一些代码，因为链接到代码"必须伴随着代码"(不知道这是怎么回事)

for (var i = 0; i<boxes.length; i++){
    ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
    var col = coli(player,boxes[i])
};

我尝试过不同的东西，如禁用功能(动物和碰撞)，摩擦和重力，但似乎没有任何影响，我不知道dom除了如何看我自己的变量，所以我没有发现任何与firebug。

真希望有人能出个主意

您需要在使用ctx.rect, moveTo, lineTo, arc之前添加ctx.beginPath()，以及您需要使用ctx.stroke()或ctx.fill()查看的任何功能。

beginPath告诉画布2D上下文你想开始一个新的形状。如果你不这样做，你最终会在每次更新中添加越来越多的形状。

From your fiddle

function update() {
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = pat;
  //===============================================================
  ctx.beginPath()  // <=== this will fix your problem. It removes all the
  //                       previous rects
  //===============================================================
  for (var i = 0; i < boxes.length; i++) {
    ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
    // or use ctx.fillRect(...
    var col = coli(player, boxes[i])
  };
  ctx.fill();
相关文章：