Html5/Javascript游戏延迟_Javascript_Html

Html5/Javascript游戏延迟

javascript html

Html5/Javascript游戏延迟,javascript,html,Javascript,Html,我正在制作一个基本的太空射击游戏，目前玩家只是一个圆圈在Opera、Firefox和IE9中玩游戏时，我的游戏都落后了我已经试着研究这个问题，但我不确定到底是哪里出了问题我做错什么了吗有什么想法吗代码如下： <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Space Game Demo</title>

我正在制作一个基本的太空射击游戏，目前玩家只是一个圆圈

在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>


太空游戏演示
您的浏览器不支持HTML5。
//脚本开头
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var x=200；
变量y=200；
var推力=0.25；
var衰减=0.99；
var maxSpeed=2；
无功转速=2；
var-tempSpeed=0；
var方向=0；
var xSpeed=0；
var ySpeed=0；
函数move（）{
如果（38键向下）{//玩家举起
xSpeed+=推力*Math.sin（方向*（Math.PI/180））；
Y速度+=推力*数学cos（方向*（数学PI/180））；
}
否则{
X速度*=衰变；
y速度*=衰变；
}
如果（37英寸向下键）{//玩家左握
方向+=转速；
}
如果（39键向下）{//玩家保持右侧
方向-=转速；
}
如果（40英寸向下键）{//玩家按住
}
tempSpeed=Math.sqrt（（xSpeed*xSpeed）+（ySpeed*ySpeed））；
如果（tempSpeed>maxSpeed）{
xSpeed*=最大速度/临时速度；
Y速度*=最大速度/临时速度；
}
x+=x速度；
y+=y速度；
}
功能除扭器（角度）{
返回角*（数学PI/180）；
}
函数循环（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle=“灰色”；
ctx.strokeStyle=“黑色”；
ctx.beginPath（）；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.stroke（）；
move（）；
ctx.strokeStyle=“红色”；
ctx.beginPath（）；
ctx.arc（x，y，10,0,2*Math.PI）；
ctx.stroke（）；
}
设置间隔（循环，2）；
var keysDown={}；
addEventListener（“向下键控”，函数（e）{
keysDown[e.keyCode]=真；
}，假）；
addEventListener（“键控”，函数（e）{
删除keysDown[e.keyCode]；
}，假）；

使用，这就是它的意义所在。现在，您正试图以每两毫秒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);

也不好。不断地创建和删除数组的元素要比仅仅将其值设置为true/false慢得多

keysDown[e.keyCode] = false;    //  faster & better

FPS应与监视器刷新率相同。如果你看不到，高FPS对你来说毫无意义。除了说CPU将更加努力地计算无法在屏幕上渲染的帧。甚至在理论上都没有。

歌剧也支持其他东西吗？没关系。我将“设置间隔”设置为15或30 fps左右。谢谢你的帮助。歌剧的解决方案。

keysDown[e.keyCode] = false;    //  faster & better