我对使用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
在每帧中使用越来越多的子路径构建相同的路径,因此每个后续帧都将绘制更复杂的形状。随着时间的流逝,它也占用了越来越多的内存。
固定小提琴:https : //jsfiddle.net/mmkzes7n/2/
在这个小提琴中,我也更改setInterval
为requestAnimationFrame
,我认为这是个好主意。您可以阅读有关内容,并决定是否要进行相同的更改。(然后,您可以增强它,使其仅在确实需要重绘时才请求动画帧。目前,这仅是在鼠标位置已移动的情况下才能实现的,但是随着游戏的发展,我敢肯定它会更多。)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句