javascript - 无法在 Javascript 中正确结束游戏

Question

我是使用 JavaScript 进行游戏编程的初学者。这是我尝试制作的第一个游戏。游戏结束后我无法显示时间。

游戏详情:

1. 鼠标用于移动方 block ，方 block 与球碰撞并改变方向。

2. 当球经过 Canvas 左端时，游戏结束并停止在 Canvas 上显示。

3. 当上述事件发生并且显示时间的代码如下时，变量game over变为true。(但它不起作用)

var canvas;
var canvascontext;
var ballX = 50;
var ballY = 50;
var ballXspeed = 15;
var ballYspeed = 15;
var paddleY = 225;
var deltaY;
var gameover = false;

function calculateMousePos(evt) {
  var rect = canvas.getBoundingClientRect();
  var root = document.documentElement;
  var mouseX = evt.clientX - rect.left - root.scrollLeft;
  var mouseY = evt.clientY - rect.top - root.scrollTop;
  return {
    x: mouseX,
    y: mouseY
  };
}
window.onload = function() {
  canvas = document.getElementById('gameCanvas');
  canvasContext = canvas.getContext('2d');
  var fps = 30;
  setInterval(callBoth, 1000 / 30);
  canvas.addEventListener('mousemove', function(evt) {
    var mousePos = calculateMousePos(evt);
    paddleY = mousePos.y - 50;
  })
  var date1 = new Date();
}

function callBoth() {
  if (gameover == true) {
    return;
  } else {
    moveEverything();
    drawEverything();
  }
}

function moveEverything() {
  ballX = ballX + ballXspeed;
  ballY = ballY + ballYspeed;
  if (ballX > canvas.width) {
    ballXspeed = -ballXspeed;
  }
  if (ballY > canvas.height || ballY < 0) {
    ballYspeed = -ballYspeed;
  }
  if (ballX < 0) {
    if (ballY > paddleY && ballY < (paddleY + 150)) {
      ballXspeed = -(ballXspeed + ballXspeed * 0.1);
      deltaY = ballY - (75 + paddleY);
      ballYspeed = deltaY * 0.35;
    } else {
      gameover = true;
      var date2 = new Date();
      var diff = date2 - date1;
      document.getElementById("time").innerHTML = diff;
    }
  }
}

function drawEverything() {

  canvasContext.fillStyle = 'black';
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);
  canvasContext.fillStyle = 'white';
  canvasContext.fillRect(0, paddleY, 10, 150)
  canvasContext.fillStyle = 'red';
  canvasContext.beginPath();
  canvasContext.arc(ballX, ballY, 15, 0, Math.PI * 2);
  canvasContext.fill();
}

function reset() {
  gameover = false;
  ballX = canvas.width;
  ballY = canvas.height / 2;
  ballYspeed = 15;
  ballXspeed = 15;
  date1 = new date();
}

<canvas id="gameCanvas" width="800" height="600"></canvas>
<br>
<span id="time"></span>
<button onclick="reset()"> RESET </button>

Answer 1

一些事情

1. 启动 date1 加载 - 它必须在全局范围内
2. 正确更新 date1(new date() 中的拼写错误)
3. 重置日期和文本

var canvas;
var canvascontext;
var ballX = 50;
var ballY = 50;
var ballXspeed = 15;
var ballYspeed = 15;
var paddleY = 225;
var deltaY;
var gameover = false;
var date1 = 0; // global variable

function calculateMousePos(evt) {
  var rect = canvas.getBoundingClientRect();
  var root = document.documentElement;
  var mouseX = evt.clientX - rect.left - root.scrollLeft;
  var mouseY = evt.clientY - rect.top - root.scrollTop;
  return {
    x: mouseX,
    y: mouseY
  };
}
window.onload = function() {
  canvas = document.getElementById('gameCanvas');
  canvasContext = canvas.getContext('2d');
  var fps = 30;
  setInterval(callBoth, 1000 / 30);
  canvas.addEventListener('mousemove', function(evt) {
    var mousePos = calculateMousePos(evt);
    paddleY = mousePos.y - 50;
  })
  date1 = new Date(); // update the global var
}

function callBoth() {
  if (gameover == true) {
    return;
  } else {
    moveEverything();
    drawEverything();
  }
}

function moveEverything() {
  ballX = ballX + ballXspeed;
  ballY = ballY + ballYspeed;
  if (ballX > canvas.width) {
    ballXspeed = -ballXspeed;
  }
  if (ballY > canvas.height || ballY < 0) {
    ballYspeed = -ballYspeed;
  }
  if (ballX < 0) {
    if (ballY > paddleY && ballY < (paddleY + 150)) {
      ballXspeed = -(ballXspeed + ballXspeed * 0.1);
      deltaY = ballY - (75 + paddleY);
      ballYspeed = deltaY * 0.35;
    } else {
      gameover = true;
      var date2 = new Date();
      var diff = date2 - date1;
      document.getElementById("time").innerHTML = parseInt(diff/1000)+" seconds"; // show seconds
    }
  }
}

function drawEverything() {

  canvasContext.fillStyle = 'black';
  canvasContext.fillRect(0, 0, canvas.width, canvas.height);
  canvasContext.fillStyle = 'white';
  canvasContext.fillRect(0, paddleY, 10, 150)
  canvasContext.fillStyle = 'red';
  canvasContext.beginPath();
  canvasContext.arc(ballX, ballY, 15, 0, Math.PI * 2);
  canvasContext.fill();
}

function reset() {
  gameover = false;
  ballX = canvas.width;
  ballY = canvas.height / 2;
  ballYspeed = 15;
  ballXspeed = 15;
  date1 = new Date(); // reset the date
  document.getElementById("time").innerHTML =""; // reset the field
}

<canvas id="gameCanvas" width="800" height="600"></canvas>
<br>
<span id="time"></span>
<button onclick="reset()"> RESET </button>