[英]Html5/Javascript game lag
我正在研究基本的太空射擊游戲,目前該玩家只是一個圓圈。
當同時在Opera,Firefox和IE9中玩游戲時,我的游戲比較落后。
我已嘗試研究此問題,但不確定是什么問題。
我做錯什么了嗎?
有任何想法嗎?
這是代碼:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Space Game Demo</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="640" height="480">
Your browser does not support HTML5.
</canvas>
</div>
<script type="text/javascript">
//Start of script
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 200;
var y = 200;
var thrust = 0.25;
var decay = 0.99;
var maxSpeed = 2;
var turnSpeed = 2;
var tempSpeed = 0;
var direction = 0;
var xSpeed = 0;
var ySpeed = 0;
function move() {
if (38 in keysDown) { // Player holding up
xSpeed += thrust * Math.sin(direction * (Math.PI / 180));
ySpeed += thrust * Math.cos(direction * (Math.PI / 180));
}
else {
xSpeed *= decay;
ySpeed *= decay;
}
if (37 in keysDown) { // Player holding left
direction += turnSpeed;
}
if (39 in keysDown) { // Player holding right
direction -= turnSpeed;
}
if (40 in keysDown) { // Player holding down
}
tempSpeed = Math.sqrt((xSpeed * xSpeed) + (ySpeed * ySpeed));
if(tempSpeed > maxSpeed) {
xSpeed *= maxSpeed / tempSpeed;
ySpeed *= maxSpeed / tempSpeed;
}
x += xSpeed;
y += ySpeed;
}
function degtorad(angle) {
return angle * (Math.PI/180);
}
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "grey";
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.stroke();
move();
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI);
ctx.stroke();
}
setInterval(loop, 2);
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
</script>
</section>
</body>
</html>
使用window.requestAnimationFrame ,這就是它的意思。 現在,您嘗試每兩毫秒以1步的速度運行游戲-約為500 FPS。
// target the user's browser.
(function() {
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
function loop() {
// game loop logic here...
}
requestAnimationFrame(loop);
delete keysDown[e.keyCode];
也不好。 不斷創建和刪除數組元素要比僅將其值設置為true / false慢得多。
keysDown[e.keyCode] = false; // faster & better
FPS應該與顯示器刷新率相同。 如果您看不到FPS,則對您而言毫無意義。 除非說CPU將更加努力地計算無法在屏幕上呈現的幀。 甚至在理論上也沒有。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.