Question

我的游戏存在问题，因为它快速启动，几秒钟之后速度明显变慢，我已经取出一些代码并一次一个地添加它们以查看什么减慢了速度，当我创建块数组并将它们打印到导致滞后的屏幕时。

//阻止部分

- 从1到10 - 创建形状对象 - 推出阵列末端

-Loop through Array -Paint Shape to screen

游戏中存在很多错误，它仍处于完成过程中:)：）

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方法，这大大加快了游戏速度。

Answer 1

运行代码并使用Chrome内置的探查器显示您的应用在block功能中花费的时间超过了50％。

enter image description here

查看一段时间后拍摄的堆快照，显示Shape个对象占用了大量堆空间。

enter image description here

查看block的来源，我们发现每次调用Shape时都会推送10个新的block个对象。这就是为什么你的应用程序正在放慢速度。您应该查看这些分析工具，因为这是了解应用程序中瓶颈所在的非常好的方法。

至于一种简单的方法，至少可以让应用程序不会那么快地减速，你可以添加：

myblocks = [];

在block函数的开头。

Answer 2

myblocks的大小在block()中增加10，每10毫秒（setInterval）调用draw()。一秒钟后，你有1000个街区。

Answer 3

减速是由于您正在重新调用

引起的

 block();
 paddel = new Shape(a, b, 100, 20, "purple");

（重新创建桨形状和块）每次迭代draw（），每10 ms调用一次

游戏放慢速度，变得无法播放

3 个答案: