如果语句在我的Javascript太空侵略者游戏中不起作用

Question

我遇到太空入侵者行动的问题。具体来说，drawEnemies函数中的if（正向）循环。控制台中也没有错误。您还可以给我关于如何改进代码的任何想法吗？我还包括了外星函数，该函数会在可能与之相关的情况下绘制它们。

这是一个片段

function alien(x,y,w,h){

	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;

	this.draw = function() {
		context.drawImage(enemy, this.x, this.y, this.w, this.h)
	}

}


function drawEnemies() {
	var dx = 0;
	var dy = 0;
	var forward = true;
	var changeShape = setInterval(drawEnemies, 500);


	if (enemies.length != 55) {



		for (var i = 0; i < 11; i++) {
			var enemyOne = new alien(i*65+dx,50+dy,40,40);
			enemiesRow1.push(enemyOne);
			enemies.push(enemyOne);
			enemiesRow1[i].draw();
		}

		if (enemies.length = 11) {
			for (var i = 0; i < 11; i++) {
				var enemyTwo = new alien(i*65+dx,100+dy,40,40);
				enemiesRow2.push(enemyTwo);
				enemies.push(enemyTwo);
				enemiesRow2[i].draw();
			}
		}

		if (enemies.length = 22) {
			for (var i = 0; i < 11; i++) {
				var enemyThree = new alien(i*65+dx,150+dy,40,40);
				enemiesRow3.push(enemyThree);
				enemies.push(enemyThree);
				enemiesRow3[i].draw();
			}
		}

		if (enemies.length = 33) {
			for (var i = 0; i < 11; i++) {
				var enemyThree = new alien(i*65+dx,150+dy,40,40);
				enemiesRow3.push(enemyThree);
				enemies.push(enemyThree);
				enemiesRow3[i].draw();
			}
		}

		if (enemies.length = 44) {
			for (var i = 0; i < 11; i++) {
				var enemyFour = new alien(i*65+dx,200+dy,40,40);
				enemiesRow4.push(enemyFour);
				enemies.push(enemyFour);
				enemiesRow4[i].draw();
			}
		}

		if (enemies.length == 55) {
			for (var i = 0; i < 11; i++) {
				var enemyFive = new alien(i*65+dx,250+dy,40,40);
				enemiesRow5.push(enemyFive);
				enemies.push(enemyFive);
				enemiesRow5[i].draw();
			}
		}

		context.clearRect(0, 0, canvas.width, canvas.height);

		if (forward) {
			dx += 20;
			if (dx > 500) {
				forward = false;
			}
		} else {
			dx -= 20;
			if (dx < 20) {
				forward = true;
				dy += 20;
			}
		}

	}

}

Answer 1

您正在尝试更改dx, dy, forward，而目前还没有代码在使用它。以及所有三个变量are local。因此，它们将始终相应地为0, 0, true。 所以，

var dx = 0;
var dy = 0;
var forward = true;

应该在函数之外的某个地方初始化，并且应该传递给初始方法调用，每次都对其进行更新，并将更新的参数传递给下一个调用。同样不要忘记在渲染新回合时将所有参数重置为初始值。

function alien(x,y,w,h){

	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;

	this.draw = function() {
		context.drawImage(enemy, this.x, this.y, this.w, this.h)
	}

}

var dx = 0;
var dy = 0;
var forward = true;
// somewhere should be an initial call with these parameters

function drawEnemies(forward, dx, dy) {
    var changeShape = setTimeout(function () { // not interval
    	if (forward) {
    	    dx += 20;
    	    if (dx > 500) {
    	    	forward = false;
	        }
    	} else {
    	    dx -= 20;
    	    if (dx < 20) {
    	    	forward = true;
    	        dy += 20;
    	    }
    	}
       // update parameters and draw again with updated parameters
       drawEnemies(forward, dx, dy)
    }, 500);
    // Keep in mind that you should do `changeShape.clearTimeout()` at the some point. 
    // Or just wrap adding new one with an `if` statement.

	


	if (enemies.length != 55) {

		for (var i = 0; i < 11; i++) {
			var enemyOne = new alien(i*65+dx,50+dy,40,40);
			enemiesRow1.push(enemyOne);
			enemies.push(enemyOne);
			enemiesRow1[i].draw();
		}

		if (enemies.length = 11) {
			for (var i = 0; i < 11; i++) {
				var enemyTwo = new alien(i*65+dx,100+dy,40,40);
				enemiesRow2.push(enemyTwo);
				enemies.push(enemyTwo);
				enemiesRow2[i].draw();
			}
		}

		if (enemies.length = 22) {
			for (var i = 0; i < 11; i++) {
				var enemyThree = new alien(i*65+dx,150+dy,40,40);
				enemiesRow3.push(enemyThree);
				enemies.push(enemyThree);
				enemiesRow3[i].draw();
			}
		}

		if (enemies.length = 33) {
			for (var i = 0; i < 11; i++) {
				var enemyThree = new alien(i*65+dx,150+dy,40,40);
				enemiesRow3.push(enemyThree);
				enemies.push(enemyThree);
				enemiesRow3[i].draw();
			}
		}

		if (enemies.length = 44) {
			for (var i = 0; i < 11; i++) {
				var enemyFour = new alien(i*65+dx,200+dy,40,40);
				enemiesRow4.push(enemyFour);
				enemies.push(enemyFour);
				enemiesRow4[i].draw();
			}
		}

		if (enemies.length == 55) {
			for (var i = 0; i < 11; i++) {
				var enemyFive = new alien(i*65+dx,250+dy,40,40);
				enemiesRow5.push(enemyFive);
				enemies.push(enemyFive);
				enemiesRow5[i].draw();
			}
		}

		context.clearRect(0, 0, canvas.width, canvas.height);
		
	}

}

此外，您有一个

重复项

var enemyThree = new alien(i*65+dx,150+dy,40,40);
enemiesRow3.push(enemyThree);
enemies.push(enemyThree);
enemiesRow3[i].draw();

代码，因此您将减少行数，并可能减少错误。