gpt4 book ai didi

JavaScript 鼠标移动导致延迟?

转载 作者:行者123 更新时间:2023-11-28 00:49:06 25 4
gpt4 key购买 nike

我对 JavaScript 编码还很陌生,很困惑!

当您第一次运行这段代码时,一切正常。然而,一旦你移动了一点,你就会开始意识到它变得越来越滞后,几乎无法播放。

这是什么原因造成的?

我该如何解决?

<html>
<head>
<title>Rotate</title>
<script src="Tank.js"></script>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ccc" width="700" height="500">
</canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var mouseX, mouseY;

function Tank(x, y){
this.x = x;
this.y = y;
this.angle;
}

Tank.prototype.draw = function(){
context.save();
context.translate(this.x, this.y);
context.rotate(this.angle);
context.fillStyle = "green";
context.arc(0,0,30,0,2*Math.PI);
context.fill();
context.fillStyle = "red";
context.fillRect(0,-10,50,20);
context.restore();
}

Tank.prototype.update = function(mouseX, mouseY){
var dx = mouseX - this.x;
var dy = mouseY - this.y;
this.angle = Math.atan2(dy, dx);
}

canvas.addEventListener('mousemove', mouseMove);

function mouseMove(evt){
mouseX = evt.x;
mouseY = evt.y;
}

var tank = new Tank(350, 250);

function gameLoop(){
context.clearRect(0,0, canvas.width, canvas.height);
tank.draw();
tank.update(mouseX, mouseY);
}

setInterval(gameLoop,20);
</script>
</body>
</html>

最佳答案

您需要调用context.beginPath()在开始新路径之前。没有这个,你调用 arc建立相同的路径,每一帧都有越来越多的子路径,因此每个连续的帧都在绘制更复杂的形状。随着时间的推移,它也会占用越来越多的内存。

固定 fiddle :https://jsfiddle.net/mmkzes7n/2/

在这个 fiddle 中,我还为 requestAnimationFrame 更改了 setInterval ,我认为这是个好主意。您可以阅读相关内容并决定是否要进行相同的更改。 (然后您可以将其增强为仅在实际需要重绘时才请求动画帧。目前这仅在鼠标位置移动时才会发生,但随着游戏的发展,我相信它会不止于此。)

关于JavaScript 鼠标移动导致延迟?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48479908/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com