How do I stop the game from running in the background. This simple pong game is for a school task. It shows showingGameOverScreen when ballX < 0. Then I want the game to break, or stop. Until I can for example write "click to restart the Game".
Same with the when player1Score == 1, "showingWinScreen".
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, ); //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(); } } function winningScore() { if (player1Score == WINNING_SCORE) { showingWinScreen = true; } } function ballReset() { //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; winningScore(); this.removeEventListener(event.type, moveEverything); } if (ballY < 0 /*600*/ ) { /*ballSpeedX=5;*/ ballSpeedY = -ballSpeedY; } if (ballY > canvas.height /*400*/ ) { /*ballSpeedX=5;*/ ballSpeedY = -ballSpeedY; } } //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 (ballX < 0) { canvasContext.fillStyle = "white"; canvasContext.fillText("GameOver", canvas.width / 2, 200); return; } if (showingWinScreen) { canvasContext.fillStyle = "white"; if (player1Score == WINNING_SCORE) { canvasContext.fillText("You Won!", canvas.width / 2, 200); } return; } //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); }<canvas id="gameCanvas" width="600" height="400"></canvas>
setIntervalto be able to ask that question. Thus I don't think it's a duplicate.