2

私は基本的なスペース シューターに取り組んでいます。現在、プレイヤーはただの円です。

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

2 に答える 2

1

window.requestAnimationFrameを使用してください。それが目的です。現在、2 ミリ秒ごとに 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);
于 2013-01-24T02:34:13.133 に答える
0 
delete keysDown[e.keyCode];

もよくありません。配列の要素を常に作成および削除すると、その値を true/false に設定するよりもはるかに遅くなります。

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

FPS は、モニターのリフレッシュ レートと同じにする必要があります。FPS が高くても、見えなければ意味がありません。画面にレンダリングできなかったフレームを計算するために CPU がより多くの作業を行うことを除いては。理論的にもそうではありません。

于 2013-01-24T02:49:16.090 に答える