Question

我正在以agar.io的方式编写游戏，我希望将玩家移动到相对于鼠标位置的方向。

这是我检查鼠标位置，返回Vector对象的方法;

let mouse_vector = new Vector();
canvas.onmousemove = function() {
    mouse_vector = mouse(event);
}

function mouse(evt) {
    mouse_vector =  new Vector(evt.clientX - canvas.width/2, evt.clientY - canvas.height/2);
    return mouse_vector;
}

玩家是一个具有x和y坐标的对象，我向其添加指向鼠标的向量。我有1个代表世界的画布并且是隐藏的。另一个画布是我的视口，我在其上绘制相对于玩家位置的裁剪世界我在这里使用requestAnimationFrame，但我也尝试使用Interval。

function draw() {
    player.x += mouse_vector.x * 0.005;
    player.y += mouse_vector.y * 0.005;
    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
    canvasCtx.drawImage(game, player.x-canvas.width/2, player.y-canvas.height/2, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
    canvasCtx.arc(canvas.width/2, canvas.height/2, player.r, 0, 2*Math.PI);
    canvasCtx.fill();
    requestAnimationFrame(draw);
}

我的问题是游戏会随着时间的推移而开始出现问题。我希望它在开始时一样顺畅。我怀疑这个问题与某种缓存有关。我注意到游戏使用了大量的CPU能力。有什么想法吗？

Answer 1

我遇到的问题是在填充弧时我没有使用beginPath()方法。似乎没有重新设置上一次抽奖会累积并导致性能随着时间的推移而丢失。

canvasCtx.beginPath(); // addition
canvasCtx.arc(canvas.width/2, canvas.height/2, player.r, 0, 2*Math.PI);
canvasCtx.fill();

Answer 2

所以在一天结束时，你将每16ms重新绘制整个地图以获得60fps，这是requestAnimationFrame的目标 - 所以你不会逃避CPU占用问题，除非你对绘图做了一些优化。

关于你正在做的逻辑：从这段代码看来，可能有任何东西可能正在构建或泄漏内存，因此我建议将代码粘贴到代码共享站点，如codepen.io并与社区分享，我们有更多的机会进行调试。

画布世界屏幕口吃

2 个答案: