Trianta/trianta.dev
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases 4 Wiki Activity

added a game over and restart functionality

Browse Source
This commit is contained in:
Chance Walter 2023-02-14 14:01:07 -06:00
parent c5913a2f47
commit 8826d007dd
4 changed files with 126 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -2,9 +2,11 @@
<html>
<head>
<title>Gregory Crawford</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="pong.html">Play pong here!</a>
<button class="button" type="button" onclick="window.location.href='pong.html'">Start Game</button>
<script src = "scripts.js"></script>
</body>
</html>

8
pong.html
View File

@ -2,13 +2,19 @@
<html>
<head>
<title>Basic Pong HTML Game</title>
<title>Pong Game</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas width="750" height="585" id="game"></canvas>
<script src="scripts.js"></script>
<div id="gameover" hidden="true">
<h1>Game Over</h1>
</div>
<div id="restart" hidden="true">
<button class="button" type="button" onclick = "restartGame()">Restart Game</a>
</div>
</body>
</html>

20
scripts.js
View File

@ -54,9 +54,29 @@ function collides(obj1, obj2) {
obj1.y + obj1.height > obj2.y;
}
function gameOver() {
context.clearRect(0, 0, canvas.width, canvas.height);
let restartGame = document.getElementById("restart");
let gameOverText = document.getElementById("gameover");
restartGame.hidden = false;
gameOverText.hidden = false;
}
function restartGame() {
leftScore = 0;
rightScore = 0;
let restartGame = document.getElementById("restart");
restartGame.hidden = true;
requestAnimationFrame(loop);
}
// game loop
function loop() {
if (leftScore < 7 && rightScore < 7) {
requestAnimationFrame(loop);
} else if (leftScore >= 7 || rightScore >= 7) {
gameOver();
}
context.clearRect(0,0,canvas.width,canvas.height);
// move paddles by their velocity

11
style.css
View File

@ -9,3 +9,14 @@ body {
align-items: center;
justify-content: center;
}
.button {
background: blue;
color: white;
padding: 15px 20px;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
cursor: pointer;
position: relative;
}