Question

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

游戏细节：

鼠标用于移动与球碰撞并旋转方向的块。
当球经过画布的左端时，游戏结束，并在画布上停止显示。
当发生上述事件并且显示时间的代码如下时，可变游戏将变为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

几件事

开始加载date1-必须在全局范围内
正确更新date1（在新的date（）中输入错误）
重置日期和文本

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

您在window.onload中本地声明了date1，这就是为什么在其他函数中无法访问它的原因。从此处删除var，然后在顶部添加var date1，使其成为全局文件。

无法使用Javascript正确结束游戏

2 个答案: