我的Javascript球移动代码不起作用

时间：2017-07-11 03:00:21

标签： javascript

我创建了一个球和一些应该让它移动的Javascript代码。但我的代码不起作用，我不知道为什么。有人可以查看我的代码并帮助我。

代码 

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var xPos = canvas.width/2;
var yPos = canvas.height-30;
var ballRadius = 10;
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;

function drawBall() {
	ctx.beginPath();
	ctx.arc(xPos, yPos, ballRadius, 0, Math.PI*2, false);
	ctx.fillStyle = "#0095DD";
	ctx.fill();
	ctx.closePath();
}

function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawBall();
}
setInterval(draw, 10);

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);


function keyDownHandler(e) {
	if(e.keyCode == 37) {
		leftPressed = true;
	}

	else if(e.keyCode == 39) {
		rightPressed = true;
	}

	else if(e.keyCode == 38) {
		upPressed == true;
	}

	else if(e.keyCode == 40) {
		downPressed = true;
	}
}

function keyUpHandler(e) {
	if(e.keyCode == 37) {
		leftPressed = false;
	}

	else if(e.keyCode == 39) {
		rightPressed = false;
	}

	else if(e.keyCode == 38) {
		upPressed == false;
	}

	else if(e.keyCode == 40) {
		downPressed = false;
	}
}

if(leftPressed = true) {
	xPos -= 7;
} else if(rightPressed = true) {
	xPos += 7;
} else if(upPressed = true) {
	yPos -= 7;
} else if(downPressed = true) {
	yPos += 7;
}
* { padding: 0; margin: 0; }
		canvas { background: #eee; display: block; margin: 0 auto; }
<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8" />
	<title>Breakout</title>
	
	<style>
		* { padding: 0; margin: 0; }
		canvas { background: #eee; display: block; margin: 0 auto; }
	</style>

</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script src="gameJS.js"></script>

</body>

</html>

6 个答案:

答案 0 :(得分：3)

您只是在按键期间更新布尔值。您没有动态更新头寸。您的位置更新代码在加载期间首先运行，就是这样。

要在按键期间移动，您需要在每次按键期间更新位置，并且需要绘制球。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var xPos = canvas.width/2;
var yPos = canvas.height-30;
var ballRadius = 10;
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;

function drawBall() {
	ctx.beginPath();
	ctx.arc(xPos, yPos, ballRadius, 0, Math.PI*2, false);
	ctx.fillStyle = "#0095DD";
	ctx.fill();
	ctx.closePath();
}

function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drawBall();
}
setInterval(draw, 10);

document.addEventListener("keydown", keyDownHandler, false);
//document.addEventListener("keyup", keyUpHandler, false);


function keyDownHandler(e) {
	if(e.keyCode == 37) {
		xPos -= 7; 
        //draw the ball with new position
	}

	else if(e.keyCode == 39) {
		xPos += 7;
        //draw the ball with new position
	}

	else if(e.keyCode == 38) {
		yPos -= 7;
        //draw the ball with new position
	}

	else if(e.keyCode == 40) {
		yPos += 7;
        //draw the ball with new position
	}
}
 
* { padding: 0; margin: 0; }
		canvas { background: #eee; display: block; margin: 0 auto; }
<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8" />
	<title>Breakout</title>
	
	<style>
		* { padding: 0; margin: 0; }
		canvas { background: #eee; display: block; margin: 0 auto; }
	</style>

</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script src="gameJS.js"></script>

</body>

</html>

答案 1 :(得分：0)

您在检查按键时使用赋值运算符（单个等号），而不是比较器运算符（双等号）。基本上，你说他们应该相等为真，而不是检查他们 是否为真：

if (leftPressed = true) {}
else if (rightPressed = true) {}
else if (upPressed = true) {}
else if (downPressed = true) {}

这些应该写成：

if (leftPressed == true) {}
else if (rightPressed == true) {}
else if (upPressed == true) {}
else if (downPressed == true) {}

话虽如此，您根本不需要使用这四个变量，而只需在检查keyCode值时直接修改位置：

if (e.keyCode == 37) {
  xPos -= 7;
}

希望这有帮助！ ：）

答案 2 :(得分：0)

您的代码中存在一些错误。

  1. 在你的向上/向下键处理程序中，你比较upPressed的值而不是设置它。

    2. e.g。

    upPressed == true;

    应该是

    upPressed = true;
    1. 在最后的if条件中，您设置的是值而不是比较。

      2. e.g。

      if(leftPressed = true)

      应该是

      if(leftPressed)
      1. 我已将球位置代码移动到moveBall函数中，并在调用键处理程序时调用它，以便在按键时更新位置。

        2. 这是固定版本。

        var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var xPos = canvas.width / 2;
var yPos = canvas.height - 30;
var ballRadius = 10;
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;

function drawBall() {
  ctx.beginPath();
  ctx.arc(xPos, yPos, ballRadius, 0, Math.PI * 2, false);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
}
setInterval(draw, 10);

document.addEventListener("keydown", keyDownHandler, false);


function keyDownHandler(e) {
  leftPressed = false;
  rightPressed = false;
  upPressed = false;
  downPressed = false;
  
  if (e.keyCode == 37) {
    leftPressed = true;
  } else if (e.keyCode == 39) {
    rightPressed = true;
  } else if (e.keyCode == 38) {
    upPressed = true;
  } else if (e.keyCode == 40) {
    downPressed = true;
  }
  moveBall();
}


function moveBall() {
  if (leftPressed) {
    xPos -= 7;
  } else if (rightPressed) {
    xPos += 7;
  } else if (upPressed) {
    yPos -= 7;
  } else if (downPressed) {
    yPos += 7;
  }
}
        * {
  padding: 0;
  margin: 0;
}

canvas {
  background: #eee;
  display: block;
  margin: 0 auto;
}
        <canvas id="myCanvas" width="480" height="320"></canvas>

答案 3 :(得分：0)

  1. 在=和==方法中使用赋值运算符upPressed代替keyUpHandler变量的比较运算符keyDownHandler。
  2. 请勿在{{1​​}}条件下使用leftPressed运算符设置rightPressed，upPressed，downPressed和=值。直接使用比较运算符或逻辑值。
  3. 每次在if...else方法调用之前更新xPos和yPos值。

    4. 下面的工作代码。

    drawBall
    var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var xPos = canvas.width / 2;
var yPos = canvas.height - 30;
var ballRadius = 10;
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;

function drawBall() {
  ctx.beginPath();
  ctx.arc(xPos, yPos, ballRadius, 0, Math.PI * 2, false);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  SetPos();
  drawBall();
}

setInterval(draw, 10);

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
  if (e.keyCode == 37) {
    leftPressed = true;
  } else if (e.keyCode == 39) {
    rightPressed = true;
  } else if (e.keyCode == 38) {
    upPressed = true;
  } else if (e.keyCode == 40) {
    downPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.keyCode == 37) {
    leftPressed = false;
  } else if (e.keyCode == 39) {
    rightPressed = false;
  } else if (e.keyCode == 38) {
    upPressed = false;
  } else if (e.keyCode == 40) {
    downPressed = false;
  }
}

function SetPos() {
  if (leftPressed) {
    xPos -= 7;
  } else if (rightPressed) {
    xPos += 7;
  } else if (upPressed) {
    yPos -= 7;
  } else if (downPressed) {
    yPos += 7;
  }
}
    * {
  padding: 0;
  margin: 0;
}

canvas {
  background: #eee;
  display: block;
  margin: 0 auto;
}

答案 4 :(得分：0)

由于每当发生keydown事件时都会调用keyDownHandler，因此您需要将位置变量更新代码移动到该函数中，并且您可以删除keyDownHandler，因为它没有＆＃39} ; t在这个例子中做任何事情：

function keyDownHandler(e) {
  //left
  if(e.keyCode === 37){
    xPos -= 7
  }
  //right
  else if (e.keyCode === 39) {
    xPos += 7
  }
  //up
  else if (e.keyCode === 38) {
    yPos -= 7
  }
  //down
  else if (e.keyCode === 40) {
    yPos += 7
  }
}

此外，您可以使用switch语句使代码更具可读性，而不是级联其他 

function keyDownHandler(e) {
  switch(e.keyCode){
    case 37: //left
      xPos -= 7
      break;
    case 39: //right
      xPos += 7
      break;
    case 38: //up
      yPos -= 7
      break;
    case 40: //down
      yPos += 7
      break;
  }
}

注意：正如Obsidian Age正确指出的那样，您在更新代码中使用赋值运算符而非比较运算符，因此您可能需要仔细检查未来。在我的示例中，我使用了三元相等===运算符，因为它检查类型和值，这在JavaScript中是推荐的。请参阅W3Schools JavaScript Operators

的参考资料

答案 5 :(得分：0)

只需更新您的javascript即可。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var xPos = canvas.width/2;
var yPos = canvas.height-30;
var ballRadius = 20;
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;

function drawBall() {
    ctx.beginPath();
    ctx.arc(xPos, yPos, ballRadius, 0, Math.PI*2, false);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if(leftPressed == true) {
    xPos -= 7;
    } 
    else if(rightPressed == true) {
    xPos += 7;
    } 
    else if(upPressed == true) {
    yPos -= 7;

    } 
    else if(downPressed == true) {
    yPos += 7;

    }


    drawBall();
}


function keyDownHandler(e) {

  var keyCode = e.keyCode;

    if(keyCode  == 37) {

        leftPressed = true;
    }

    else if(keyCode  == 39) {

        rightPressed = true;
    }

    else if(keyCode  == 38) {

        upPressed = true;
    }

    else if(keyCode == 40) {

        downPressed = true;
    }
}

function keyUpHandler(e) {

    var keyCode = e.keyCode;

    if(keyCode == 37) {

        leftPressed = false;
    }

    else if(keyCode == 39) {

        rightPressed = false;
    }

    else if(keyCode == 38) {

        upPressed = false;
    }

    else if(keyCode == 40) {

        downPressed = false;
    }
}
相关问题
最新问题