Can't end the game properly in Javascript

Question

I am a beginner at game programming using JavaScript. This is the first game I have tried to make. I am not able to display the time after game is over.

Details of the game:

1. Mouse is used to move a block which collides with ball and turns direction.

2. When the ball passes the left end of the canvas, game ends and displaying on canvas stops.

3. The variable game over turns true when the above event occurs and the code for displaying time follows.(But it is not working)

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

A few things

1. start the date1 onload - it has to be in the global scope
2. update date1 correctly (typo in new date())
3. reset the date and the text

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>

Answer 2

You declared date1 locally in window.onload, which is why it's inaccessible in other functions. Remove the var from there and add var date1 to the top to make it global.