代码之家  ›  专栏  ›  技术社区  ›  Blank Reaver

JavaScript游戏启动速度很快,但随着时间的推移会变慢

  •  0
  • Blank Reaver  · 技术社区  · 7 年前

    我的简单JavaScript游戏是一个太空入侵者的克隆。

    我正在使用p5。js客户端库。

    我尝试了很多方法来加速比赛。

    它一开始很快,但随着时间的推移,它变得越来越慢,越来越慢,它并没有那么令人愉快。

    我并不是要展示我所有的代码。我并不是在展示每一门课,但我会展示所有事情发生的主要课堂。

    有人能看一下这个,告诉我你有什么重大发现吗?

    我对JS和制作游戏都是新手,我知道有一种东西叫做update() 人们在脚本中使用的,但我不熟悉。

    非常感谢。

    var ship;
    var flowers = []; // flowers === aliens 
    var drops = [];
    var drops2 = [];
    
    
    function setup() {
    	createCanvas(600, 600);
    	ship = new Ship();
    	for (var i = 0; i < 6; i ++) {
    		flowers[i] = new Flower(i * 80 + 80, 60);
    	}
    
    	flower = new Flower();
    
    }
    
    
    function draw() {
    	background(51);
    	ship.show();
    	ship.move();
    	shipDrops();
    	alienDrops();
    	dropsAndAliens();
    	dropDelete();
    	drop2Delete();
    }
    
    	// if 0 drops, show and move none, if 5, etc..
    	function shipDrops() {
    				for (var i = 0; i < drops.length; i ++) {
    				drops[i].show();
    				drops[i].move();
    		for (var j = 0; j < flowers.length; j++) {
    		if(drops[i].hits(flowers[j]) ) {
    				flowers[j].shrink();
    				if (flowers[j].r === 0) {
    					flowers[j].destroy();
    				}
    			// get rid of drops after it encounters ship
    					drops[i].evaporate();
    			}
    					if(flowers[j].toDelete) {
    			// if this drop remove, use splice function to splice out of array
    					flowers.splice(j, 1);	// splice out i, at 1
    					}
    
    		}
    	}
    		
    }
    
    	function alienDrops() {
    		// below is for alien/flower fire drops 2
    		for (var i = 0; i < drops2.length; i ++) {
    			drops2[i].show();
    			drops2[i].move();
    		if(drops2[i].hits(ship) ) {
    			ship.shrink();
    			drops2[i].evaporate(); // must evap after shrink
    			ship.destroy();
    			if (ship.toDelete) {
    				delete ship.x;
    				delete ship.y;
    			 } // above is in progress, deletes after ten hits?
    			
    		 }
    
    	 }
    }
    
    	function dropsAndAliens() {
    	var randomNumber; // for aliens to shoot 
    	var edge = false;
    	
    	// loop to show multiple flowers 
    	for (var i = 0; i < flowers.length; i ++) {
    		flowers[i].show();
    		flowers[i].move();
    		// ******************************************
     			randomNumber = Math.floor(Math.random() * (100) );
      				if(randomNumber === 5) {
    				var drop2 = new Drop2(flowers[i].x, flowers[i].y, flowers[i].r);  
    				drops2.push(drop2);
      			}
    
    		//**************** above aliens shooting 
    
    		// below could be method, this will ensure the flowers dont 
    		//go offscreen and they move 
    		//makes whtever flower hits this space become the farther most
    		//right flower,
    		if (flowers[i].x > width || flowers[i]. x < 0 ) {
    			edge = true;
    		}
    
    	}
    		// so if right is true, loop thru them all again and reset x
    		if (edge) {
    			for (var i = 0; i < flowers.length; i ++) {
    			// if any flower hits edge, all will shift down
    			// and start moving to the left 
    			flowers[i].shiftDown();
    		}
    	}
    
    
    
    }
    
    
    function dropDelete() {
    
    	for (var i = drops.length - 1; i >= 0; i--) {
    			if(drops[i].toDelete) {
    			// if this drop remove, use splice function to splice out of array
    				drops.splice(i, 1);	// splice out i, at 1
    			}
    
    		}
    
    }
    
    function drop2Delete() {
    		for (var i = drops2.length - 1; i >= 0; i--) {
    			if(drops2[i].toDelete) {
    			// if this drop remove, use splice function to splice out of array
    				drops2.splice(i, 1);	// splice out i, at 1
    			}
       		}
    
    }
    
    
    function keyReleased() {
    	if (key != ' ') {
    	ship.setDir(0); // when i lift the key, stop moving
    	} 
    }
    
    function keyPressed() {
    	// event triggered when user presses key, check keycode
    	if(key === ' ') {
    		var drop = new Drop(ship.x, height); // start ship x and bottom of screen 
    		drops.push(drop); // when user hits space, add this event to array
    	}
    
    
    	if (keyCode === RIGHT_ARROW) {
    		// +1 move right
    		ship.setDir(1);
    	} else if (keyCode === LEFT_ARROW) {
    		// -1 move left
    		ship.setDir(-1);
    	} // setir only when pressing key, want continuous movement 
    }
    1 回复  |  直到 7 年前
        1
  •  3
  •   Kevin Workman    7 年前

    请张贴 MCVE 而不是我们无法运行的断开连接的代码段。请注意,这应该 成为你的整个项目。它应该是一个小的示例草图,只显示问题,不需要任何额外的代码。

    但要想知道发生了什么,你需要 调试 您的程序。你需要找到这样的东西:

    • 每个数组的长度是多少?它们是否随着时间的推移而不断增长?
    • 实际帧率是多少?帧速率是在下降,还是只是看起来较慢?
    • 什么时候会变慢?尝试对不同的值进行编码,看看发生了什么。

    请注意,我不是要你告诉我这些问题的答案。这些是你需要问自己的问题。(事实上,在发布关于堆栈溢出的问题之前,您应该有所有这些答案!)

    如果您仍然无法理解,请发布 MCVE公司 在一个新的问题帖子中,我们将从那里开始。祝你好运