添加if / else语句后，游戏组件不会绘制

Question

添加if / else语句后，我的游戏组件不会在画布上绘制。

该语句仅检查游戏片段是否碰到游戏障碍物。

我尝试更改属性并重写一些函数，但似乎问题尚未解决。

每当我删除if / else函数时，组件就会绘制。

这是保存if / else函数的代码的一部分：

if(gamePieceBorder.crashGame(gameObstacle) || gamePieceRed.crashGame(gameObstacle))
{
    gameArea.stop();
}

else
{
    obstacle.update();

    gamePieceBorder.pos();
    gamePieceBorder.move();
    gamePieceBorder.update();

    gamePieceRed.pos();
    gamePieceRed.move();
    gamePieceRed.update();

    gameArea.clear();
}

对我来说，不粘贴整个代码，这是指向代码的pastebin链接：https://pastebin.com/HuiR7r7D

如何获取要绘制的组件？如果有人修复了代码，问题出在哪里？我不是javascript方面的专家，而只是一个初学者。

Answer 1

有几个问题：

• window.EventListener应该是window.addEventListener
• keyup和keydown不应包含大写字母
• gameObstacle，因为if是未定义的（可能应该是obstacle）
• clear方法应在绘制之前而不是在绘制之后调用

以下是更正的脚本：https://pastebin.com/bXpQ2qvB

//-----------------------------------------Variables
		var gamePieceRed;
		var gamePieceBorder;
		var gameObstacle;
//-----------------------------------------

//-----------------------------------------Main game function
		function startGame()
		{
			gamePieceRed = new component(22, 22, "rgb(255, 132, 156)", 10, 120);
			gamePieceBorder = new component(24, 24, "black", 9, 119);

			obstacle = new component(10, 200, "rgb(64, 0 ,12)", 300, 120)

			gameArea.start();
		}
//-----------------------------------------

//-----------------------------------------Creating game area and applying controls
		var gameArea =
		{
  				canvas : document.createElement("canvas"), start : function()
  			{
    			this.canvas.width = 510;
    			this.canvas.height = 280;
    			this.context = this.canvas.getContext("2d");

    			document.body.insertBefore(this.canvas, document.body.childNodes[0]);

    			this.interval = setInterval(gameUpdate, 20);

    			window.addEventListener("keydown", function (e)
    			{
  					gameArea.keys = (gameArea.keys || []);
  					gameArea.keys[e.keyCode] = true;
				}, true)

				window.addEventListener("keyup", function (e)
				{
  					gameArea.keys[e.keyCode] = false;
				}, true)
  			},

  			clear : function()
  			{
				this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
			},

			stop : function()
			{
				clearInterval(this.interval);
			},
    
      keyboard: function() {
      if (this.keys) {
					if (this.keys[37]) {gamePieceBorder.speedX = gamePieceRed.speedX = -2;}
  					else if (this.keys[39]) {gamePieceBorder.speedX = gamePieceRed.speedX = 2;}
        else {gamePieceBorder.speedX = gamePieceRed.speedX = 0;}
        
  					if (this.keys[38]) {gamePieceBorder.speedY = gamePieceRed.speedY = -2;}
  					else if (this.keys[40]) {gamePieceBorder.speedY = gamePieceRed.speedY = 2;} 
        else {gamePieceBorder.speedY = gamePieceRed.speedY = 0;}
      }
      }
		}
//-----------------------------------------

//-----------------------------------------Game component
		function component(width, height, color, x, y)
		{
			this.width = width;
			this.height = height;

			this.x = x;
			this.y = y;

			this.speedX = 0;
			this.speedY = 0;

			this.update = function()
			{
				ctx = gameArea.context;
				ctx.fillStyle = color;
				ctx.fillRect(this.x, this.y, this.width, this.height)
			}

			this.move = function()
			{
				this.x += this.speedX;
				this.y += this.speedY;
			}

			this.crashGame = function(obj)
			{
				var left = this.x;
				var right = this.x + (this.width);
				var top = this.y;
				var bottom = this.y + (this.height);

				var otherLeft = obj.x;
				var otherRight = obj.x + (obj.width);
				var otherTop = obj.y;
   					var otherBottom = obj.y + (obj.height);

				var crash = true;

				if (bottom < otherTop || top > otherBottom || right < otherLeft || left > otherRight)
				{
					crash = false;
				}

				return crash;
			}
		}
//-----------------------------------------

//-----------------------------------------Game area updater
		function gameUpdate()
		{
			if(gamePieceBorder.crashGame(obstacle) || gamePieceRed.crashGame(obstacle))
			{
				gameArea.stop();
			}

			else
			{
				gameArea.clear();

      obstacle.update();
      
      gameArea.keyboard();

				gamePieceBorder.move();
				gamePieceBorder.update();

				gamePieceRed.move();
				gamePieceRed.update();

			}
		}
//-----------------------------------------

<html>
	<style>

		canvas
		{
    		border: 1px solid #d3d3d3;
    		background-image: url("https://ak0.picdn.net/shutterstock/videos/22492090/thumb/1.jpg");
		}

	</style>

	<body onload = "startGame()">
	</body>
</html>