-1

ゲームが速く起動し、数秒後に著しく遅くなるという問題がゲームにあり、コードの一部を取り出して一度に 1 つずつ追加し、何が遅くなっているのかを確認しました。ブロックの配列を作成し、それらを画面に出力して遅延を引き起こしているときです。

//ブロックセクション

-1 から 10 までのループ -形状オブジェクトの作成 -配列へのプッシュ -終了

- 配列をループする - シェイプを画面にペイントする

ゲームには多くのバグがありますが、まだ完成途中です :) :)

http://jsfiddle.net/s2NCx/1/

var canvas;
 var ctx;
 var dx = 5;
 var dy = 5;
 var x = 460;
 var y = 480;
 var a = 500;
 var b = 570;
 var WIDTH = 1000;
 var HEIGHT = 600;
 var x1 = 0,
     y1 = 0;
 var dx1 = 5,
     dy1 = 5;
 var myblocks = [];
 ball = new setcircle(x, y, 10, "purple");
 //paddel = new square(x,y,100,20,"purple");

//initate
 function init() {
     canvas = document.getElementById("canvas");
     ctx = canvas.getContext("2d");
     return setInterval(draw, 10);

 }

//creates an array of blocks and prints to screen
 function block() {


     var p = 40;
     for (var i = 0; i < 10; i++) {

         myblocks.push(new Shape(p, 10, 90, 20, "#333"))
         p = p + 91;
     }

     for (i in myblocks) {
         oblock = myblocks[i];
         ctx.fillStyle = oblock.fill1;
         ctx.fillRect(oblock.a, oblock.b, oblock.w, oblock.h);

     }
 }

 //draws and moves ball
 function movecircle(ball) {

     ball.x += dx;
     ball.y += dy;
     if (ball.x <= 0) dx = 5;
     else if (ball.x >= 980) dx = -5;
     if (ball.y <= 0) dy = 5;
     else if (ball.y >= 590) dy = -5;
     ctx.beginPath();
     ctx.fillStyle = ball.fill;
     ctx.arc(ball.x, ball.y, 10, 0, Math.PI * 2, true);
     ctx.fill();



 }

// checks if collides
 function isCollide(r, c) {

     // copyed from stackoverflow
     var cx = Math.abs(c.x - r.a - r.w / 2);
     var xDist = r.w / 2 + c.r;
     if (cx > xDist) return false;
     var cy = Math.abs(c.y - r.b - r.h / 2);
     var yDist = r.h / 2 + c.r;
     if (cy > yDist) return false;
     if (cx <= r.w / 2 || cy <= r.w / 2) return true;
     var xCornerDist = cx - r.w / 2;
     var yCornerDist = cy - r.h / 2;
     var xCornerDistSq = xCornerDist * xCornerDist;
     var yCornerDistSq = yCornerDist * yCornerDist;
     var maxCornerDistSq = c.r * c.r;
     return xCornerDistSq + yCornerDistSq <= maxCornerDistSq;
 }

//ball object
 function setcircle(x, y, r, fill) {

     this.x = x;
     this.y = y;
     this.r = r;
     this.fill = fill;
 }
//shape object
 function Shape(a, b, w, h, fill) {

     this.a = a;
     this.b = b;
     this.w = w;
     this.h = h;
     this.fill1 = fill;

 }
//keyboard inout
 function doKeyDown(evt) {
     switch (evt.keyCode) {
         case 38:
             /* Up arrow was pressed */
             if (b - dy > 0) {
                 b -= dy;
             }
             break;
         case 40:
             /* Down arrow was pressed */
             if (b + dy < HEIGHT) {
                 b += dy;
             }
             break;
         case 37:
             /* Left arrow was pressed */
             if (a - dx > 0) {
                 a -= dx;
             }
             break;
         case 39:
             /* Right arrow was pressed */
             if (a + dx < WIDTH) {
                 a += dx;
             }
             break;
     }
 }

 function changedirection(ball) {
     dy = -dy;






 }

 function update() {


     //check if ball hits paddle
     if (isCollide(paddel, ball)) {
         changedirection(ball);
         ctx.fillStyle = "purple";
         ctx.fillRect(200, 200, 100, 100);
     }
     //check if ball hits block
     for (i in myblocks) {
         if (isCollide(myblocks[i], ball)) {
             changedirection(ball);
             ctx.fillStyle = "purple";
             ctx.fillRect(200, 200, 100, 100);

         }
     }

 }



 function draw() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     movecircle(ball);
     block();
     paddel = new Shape(a, b, 100, 20, "purple");
     ctx.fillStyle = paddel.fill1;
     ctx.fillRect(paddel.a, paddel.b, paddel.w, paddel.h);
     update();
 }
 init();
 window.addEventListener('keydown', doKeyDown, true);

//アップデート:

ブロックの初期化を削除し、init メソッドに配置しました。これにより、ゲームが大幅に高速化されました。

4

3 に答える 3

4

コードを実行し、Chrome に組み込まれているプロファイラーを使用すると、アプリがblock関数内で時間の 50% 以上を費やしていることがわかります。

ここに画像の説明を入力

しばらくしてから取得したヒープ スナップショットを見ると、多くのヒープ スペースがShapeオブジェクトによって占有されていることがわかります。

ここに画像の説明を入力

のソースを見ると、呼び出されるたびにblock10 個の新しいオブジェクトをプッシュしていることがわかります。そのため、アプリの速度が低下しています。これらのプロファイリング ツールは、アプリケーションのどこにボトルネックがあるかを知るための非常に優れた方法であるため、確認する必要があります。Shapeblock

少なくともアプリケーションの速度がそれほど速く低下しないようにする簡単な方法については、次を追加できます。

myblocks = [];

block関数の先頭。

于 2013-10-13T11:21:28.127 に答える