我如何添加警告框，说“游戏结束”当球触及顶部边界?

I am creating a 2 player tennis sort of game right now in JavaScript and I got the ball to make an alert box popup saying "gameover" when it hits the top, but I can't seem to make it work on the top border. If someone could tell me what I'm doing wrong thanks in advance.

我现在用JavaScript创建了一个2人的网球游戏，我让球弹出一个警告框，当它击中顶部时，说“gameover”，但我似乎不能让它在顶部边框上工作。如果有人能提前告诉我我做错了什么，谢谢。

I have inputted the code for my game below:

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

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>

2 个解决方案

#1

You are missing a block for paddle2.

你错过了划桨的机会。

//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();
  }
}

#2

Your game is cool. I just want to complete it. JSfiddle

你的游戏很酷。我只想完成它。JSfiddle

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;
var isStart = false;
var interval;

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) {
    console.log("touch border top -  Game over");
    start();
  }
  if (y + dy >= ballRadius && y + dy <= ballRadius + paddle2Height && x > paddle2X && x < paddle2X + paddleWidth) {
    console.log("touch paddle top");
    dy = -dy;
  }
  if (y + dy > canvas.height - ballRadius) {
    if (x > paddleX && x < paddleX + paddleWidth) {
      console.log("touch paddle bot");
      dy = -dy;
    } else {
      console.log("touch border bot -  Game over");
      start();
    }
  }

  //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;
  };
  if (leftPressed && paddleX > 0) {
    paddleX -= 7;
  };
  if (rightPressed2 && paddle2X < canvas.width - paddleWidth) {
    paddle2X += 7;
  };
  if (leftPressed2 && paddle2X > 0) {
    paddle2X -= 7;
  }
}

//Handles the keyboard commands
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.getElementById("start-button").addEventListener("click", start);

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

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

function start() {
  isStart = !isStart;
  if (isStart) {
    x = canvas.width / 2;
    y = canvas.height - 30;
    paddleX = (canvas.width - paddleWidth) / 2;
    paddle2X = (canvas.width - paddleWidth) / 2;
    //Refreshes screen every 10 seconds
    interval = setInterval(draw, 10);
  } else
    clearInterval(interval);
}

* {
  padding: 0;
  margin: 0;
}

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

button {
  display: block;
  margin: 10px auto;
  padding: 10px;
}

<canvas id="gameCanvas" width="480" height="320"></canvas>
<button id="start-button">Start/Pause</button>