画布游戏帧率下降
Canvas game framerate drop
晚上好,首先我不确定我应该在这里发布这个,因为我真的不知道这里出了什么问题(唯一的线索是它发生在我移动了所有变量在我的代码顶部,同时试图"清理"一点)。
但这里有个问题:我创造了一款画布游戏,在移动变量后,我开始获得主要的帧降。游戏重量不到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();
相关文章:
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- 如何有效地将游戏数据存储在URL查询字符串中
- D3/Raphael js 以慢帧率绘制 1000+ 动画圆圈
- BlackBerry PlayBook网络作品:低帧率
- HTML5游戏刷新率与requestAnimationFrame
- 如何在javascript游戏中随着时间的推移增加产卵率
- 尝试使用getUserMedia帧率约束
- 画布游戏帧率下降
- 用requestAnimationFrame实现一些稳定的帧率
- HTML5 Canvas和JS帧率慢慢下降到0
- 低帧率的JS和CSS动画
- 如何使用javascript获得良好的帧率
- EaselJS性能问题/帧率下降
- Javascript水涟漪效应减慢帧率
- 如何改变精灵帧率
- 动态调整paperjs动画的帧率
- 低帧率嵌套转换元素
- 使用JS和DOM设置多个DIV元素的动画会导致低帧率
- javascript游戏中的异步/可变帧率
- 函数计算函数帧率