Моя проблема как с «showWinScreen», так и с «displayGameoverScreen».
Когда player1Score достигает WINNING_SCORE = 1;тогда должно появиться "показывая WinScreen".И когда «if (ball <0) {ballReset} также должно« showGameoverScreen ». </p>
Результат должен быть похож на игру в понг, но только на одно весло, и когда мяч касается противоположной другой стены, следует добавить точкуплюс должен появиться винскрин. И если мяч не попадает в ракетку и касается стены за ракеткой, должен появиться экран «Игра закончена».
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>