javascript - 当球触及顶部边框时，如何添加显示 "game over"的警告框？

Question

我现在正在用 JavaScript 创建一个 2 人网球类游戏，当它到达顶部时，我得到了一个警告框弹出窗口，上面写着“游戏结束”，但我似乎无法让它在顶部边框。如果有人能告诉我我做错了什么，请提前致谢。

我在下面输入了我的游戏代码:

var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;
var ballRadius = 10;
var paddleHeight = 10;
var paddleWidth = 75;
var paddle2Height = 10;
var paddle2Width = 75;
var paddleX = (canvas.width - paddleWidth) / 2;
var paddle2X = (canvas.width - paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var rightPressed2 = false;
var leftPressed2 = false;


function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD"; //color of ball
  ctx.fill();
  ctx.closePath();
}
//Draws the bottom paddle
function drawPaddle1() {
  ctx.beginPath();
  ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
  ctx.fillStyle = "#0095DD"; //color of paddle
  ctx.fill();
  ctx.closePath();
}
//Draws the top paddle
function drawPaddle2() {
  ctx.beginPath();
  ctx.rect(paddle2X, 0, paddle2Width, paddle2Height);
  ctx.fillStyle = "#0095DD"; //color of paddle
  ctx.fill();
  ctx.closePath();
}


function draw() {
  //Checks collison for left and right
  if (x + dx > canvas.width || x + dx < 0) {
    dx = -dx;
  }

  //Paddle collison for top and down "still fixing"
  if (y + dy < ballRadius || y + dy < 0) {
    dy = -dy;
  } else if (y + dy > canvas.height - ballRadius) {
    if (x > paddleX && x < paddleX + paddleWidth) {
      dy = -dy;
    } else {
      alert("GAME OVER");
      document.location.reload();
    }
  }

  //Clears canvas so the ball won't leave a trail
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawBall(); //Draws the ball
  //Draws the paddle
  drawPaddle1();
  drawPaddle2();
  //Makes the ball move
  x += dx;
  y += dy;

  //Moves the paddle
  if (rightPressed && paddleX < canvas.width - paddleWidth) {
    paddleX += 7;
  } else if (leftPressed && paddleX > 0) {
    paddleX -= 7;
  } else if (rightPressed2 && paddle2X < canvas.width - paddleWidth) {
    paddle2X += 7;
  } else if (leftPressed2 && paddle2X > 0) {
    paddle2X -= 7;
  }
}

//Handles the keyboard commands
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);


function keyDownHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = true;
  } else if (e.keyCode == 68) {
    rightPressed2 = true;
  } else if (e.keyCode == 37) {
    leftPressed = true;
  } else if (e.keyCode == 65) {
    leftPressed2 = true;
  }
}

function keyUpHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = false;
  } else if (e.keyCode == 68) {
    rightPressed2 = false;
  } else if (e.keyCode == 37) {
    leftPressed = false;
  } else if (e.keyCode == 65) {
    leftPressed2 = false;
  }
}

//Refreshes screen every 10 seconds
setInterval(draw, 10);

* {
  padding: 0;
  margin: 0;
}

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

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

Answer 1

您缺少 paddle2 的 block 。

//Paddle collison for top and down "still fixing"
if (y + dy < ballRadius || y + dy < 0) {
  if (x > paddle2X && x < paddle2X + paddleWidth) {
    dy = -dy;
  } else {
    alert("GAME OVER");
    document.location.reload();
  }
} else if (y + dy > canvas.height - ballRadius) {
  if (x > paddleX && x < paddleX + paddleWidth) {
    dy = -dy;
  } else {
    alert("GAME OVER");
    document.location.reload();
  }
}