var showning WinScreen = false;和var showsGameoverScreen = false;

Question

我的问题是“ showingWinScreen”和“ showingGameoverScreen”。

player1Score达到WINNING_SCORE = 1时；那么它应该显示“ showingWinScreen”。而当“ if（ball <0）{ballReset}时，它也应该“ showingGameoverScreen”。

结果应该像是一个乒乓球游戏，但只有一个球拍，当球碰到另一面墙的对面时，应该添加一个点并弹出一个winscreen。如果球没有击中球拍并碰到球拍后面的墙，则应显示“比赛结束”屏幕。

var canvas;
var canvasContext;

var ballX = 300;
var ballY = 200;
var ballSpeedX = 5;
var ballSpeedY = 5;

var player1Score = 0;
const WINNING_SCORE = 1;
var showingWinScreen = false;
var showingGameoverScreen = true;

var paddle1Y = 150;
const PADDLE_THICKNESS = 10;
const PADDLE_HEIGHT = 100;




window.onload = function (){
  canvas = document.getElementById("gameCanvas");
  canvasContext = canvas.getContext("2d");
  
  var framesPerSecond = 30;
  setInterval(function() {
    drawEverything();
    moveEverything();
  }, 1000/framesPerSecond);
  
  document.addEventListener('keydown', handleKeyDown, true,
              );
  
}

function ballReset(){
   if(player1Score == WINNING_SCORE){
      showingWinScreen = true;
    }
  //ballSpeedX = -ballSpeedX;
    ballX = canvas.width/2;
    ballY = canvas.height/2;
    
  }


function moveEverything(){
 //ballX bouncing back
  ballX = ballX - ballSpeedX;
  //ball starting Y angle
  ballY = ballY + ballSpeedY;
  
  if(ballX < 0/*600*/){
    if(ballY > paddle1Y &&
      ballY < paddle1Y + PADDLE_HEIGHT) {
      ballSpeedX =-ballSpeedX;
    }
   
    }if(ballX > canvas.width/*600*/){
    /*ballSpeedX=5;*/ballSpeedX = -ballSpeedX;
      player1Score += 1;
  }
  
  if(ballY < 0/*600*/){
    /*ballSpeedX=5;*/ballSpeedY = -ballSpeedY;
   
  }if(ballY > canvas.height/*400*/){
    /*ballSpeedX=5;*/ballSpeedY = -ballSpeedY;
  }if(ballX < 0){
    ballReset();
  }
 
}


//draws all on the gameCanvas wich is black.
function drawEverything(){
  //Next line blanks the screen with black
  colorRect(0,0,canvas.width,canvas.height, "black");
  
  if(showingWinScreen){
    canvasContext.fillStyle = "white";
    if(player1Score == WINNING_SCORE) {
      canvasContext.fillText("Left Player Won!", canvas.width/2, 200);
    }
    else{
      showingGameoverScreen();
      canvasContext.fillText("GameOver", canvas.width/2, 200);
      
    }
  }
  //next line draw left paddle
  colorRect(0,paddle1Y, PADDLE_THICKNESS,PADDLE_HEIGHT, "white");
  //next line draws ball from the function
  colorCircle(ballX,ballY,10, "white");
  canvasContext.fillText(player1Score, 100, 100);
}
// summerize the ball information
function colorCircle(centerX,centerY, radius, drawColor){
  canvasContext.fillStyle = drawColor;
  canvasContext.beginPath();
  canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true);
  canvasContext.fill();
}
//summerize the canvas info, like; Color and width/height
function colorRect(leftX, topY, width,height, drawColor){
  canvasContext.fillStyle = drawColor;
  canvasContext.fillRect(leftX, topY, width, height);



}
//sets the function for paddle handling
function handleKeyDown ( event ) {
  var keyCode = event.which || event.keyCode;
  
  switch (keyCode){
    case 38:
      paddle1Y -=5;
      break;
      
    case 40:
      paddle1Y +=5;
      break;
      
    default:
      // Avoid preventDefault() when not pressing expected keys
      return;
  }
  
  // Don't scroll window when pressing UP/DOWN
  event.preventDefault();
  
}

<canvas id = "gameCanvas" width = "600" height= "400"></canvas>