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

Merge pull request #2 from chancewalter0907/main

Browse Source 
project 2 pull request
This commit is contained in:
TriantaTV 2023-02-14 14:18:13 -06:00 committed by GitHub
commit 62cd1a60b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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> <html>
<head> <head>
<title>Gregory Crawford</title> <title>Gregory Crawford</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <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> </body>
</html> </html>

8
pong.html
View File

@ -2,13 +2,19 @@
<html> <html>
<head> <head>
<title>Basic Pong HTML Game</title> <title>Pong Game</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<canvas width="750" height="585" id="game"></canvas> <canvas width="750" height="585" id="game"></canvas>
<script src="scripts.js"></script> <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> </body>
</html> </html>

186
scripts.js
View File

@ -54,101 +54,121 @@ function collides(obj1, obj2) {
obj1.y + obj1.height > obj2.y; 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 // game loop
function loop() { function loop() {
requestAnimationFrame(loop); if (leftScore < 7 && rightScore < 7) {
context.clearRect(0,0,canvas.width,canvas.height); requestAnimationFrame(loop);
} else if (leftScore >= 7 || rightScore >= 7) {
// move paddles by their velocity gameOver();
leftPaddle.y += leftPaddle.dy;
rightPaddle.y += rightPaddle.dy;
// prevent paddles from going through walls
if (leftPaddle.y < grid) {
leftPaddle.y = grid;
}
else if (leftPaddle.y > maxPaddleY) {
leftPaddle.y = maxPaddleY;
}
if (rightPaddle.y < grid) {
rightPaddle.y = grid;
}
else if (rightPaddle.y > maxPaddleY) {
rightPaddle.y = maxPaddleY;
}
// draw paddles
context.fillStyle = 'white';
context.fillRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);
context.fillRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);
// move ball by its velocity
ball.x += ball.dx;
ball.y += ball.dy;
// prevent ball from going through walls by changing its velocity
if (ball.y < grid) {
ball.y = grid;
ball.dy *= -1;
}
else if (ball.y + grid > canvas.height - grid) {
ball.y = canvas.height - grid * 2;
ball.dy *= -1;
}
// reset ball if it goes past paddle (but only if we haven't already done so)
if ( (ball.x < 0 || ball.x > canvas.width) && !ball.resetting) {
ball.resetting = true;
if (ball.x < 0) {
rightScore++;
} }
if (ball.x > canvas.width) { context.clearRect(0,0,canvas.width,canvas.height);
leftScore++;
// move paddles by their velocity
leftPaddle.y += leftPaddle.dy;
rightPaddle.y += rightPaddle.dy;
// prevent paddles from going through walls
if (leftPaddle.y < grid) {
leftPaddle.y = grid;
}
else if (leftPaddle.y > maxPaddleY) {
leftPaddle.y = maxPaddleY;
} }
// give some time for the player to recover before launching the ball again if (rightPaddle.y < grid) {
setTimeout(() => { rightPaddle.y = grid;
ball.resetting = false; }
ball.x = canvas.width / 2; else if (rightPaddle.y > maxPaddleY) {
ball.y = canvas.height / 2; rightPaddle.y = maxPaddleY;
}, 400); }
}
// check to see if ball collides with paddle. if they do change x velocity // draw paddles
if (collides(ball, leftPaddle)) { context.fillStyle = 'white';
ball.dx *= -1; context.fillRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);
context.fillRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);
// move ball next to the paddle otherwise the collision will happen again // move ball by its velocity
// in the next frame ball.x += ball.dx;
ball.x = leftPaddle.x + leftPaddle.width; ball.y += ball.dy;
}
else if (collides(ball, rightPaddle)) {
ball.dx *= -1;
// move ball next to the paddle otherwise the collision will happen again // prevent ball from going through walls by changing its velocity
// in the next frame if (ball.y < grid) {
ball.x = rightPaddle.x - ball.width; ball.y = grid;
} ball.dy *= -1;
}
else if (ball.y + grid > canvas.height - grid) {
ball.y = canvas.height - grid * 2;
ball.dy *= -1;
}
// draw score // reset ball if it goes past paddle (but only if we haven't already done so)
context.font = "30px Arial"; if ( (ball.x < 0 || ball.x > canvas.width) && !ball.resetting) {
context.fillText(leftScore, 200, 50); ball.resetting = true;
context.fillText(rightScore, 560, 50);
// draw ball if (ball.x < 0) {
context.fillRect(ball.x, ball.y, ball.width, ball.height); rightScore++;
}
if (ball.x > canvas.width) {
leftScore++;
}
// draw walls // give some time for the player to recover before launching the ball again
context.fillStyle = 'lightgrey'; setTimeout(() => {
context.fillRect(0, 0, canvas.width, grid); ball.resetting = false;
context.fillRect(0, canvas.height - grid, canvas.width, canvas.height); ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
}, 400);
}
// draw dotted line down the middle // check to see if ball collides with paddle. if they do change x velocity
for (let i = grid; i < canvas.height - grid; i += grid * 2) { if (collides(ball, leftPaddle)) {
context.fillRect(canvas.width / 2 - grid / 2, i, grid, grid); ball.dx *= -1;
}
// move ball next to the paddle otherwise the collision will happen again
// in the next frame
ball.x = leftPaddle.x + leftPaddle.width;
}
else if (collides(ball, rightPaddle)) {
ball.dx *= -1;
// move ball next to the paddle otherwise the collision will happen again
// in the next frame
ball.x = rightPaddle.x - ball.width;
}
// draw score
context.font = "30px Arial";
context.fillText(leftScore, 200, 50);
context.fillText(rightScore, 560, 50);
// draw ball
context.fillRect(ball.x, ball.y, ball.width, ball.height);
// draw walls
context.fillStyle = 'lightgrey';
context.fillRect(0, 0, canvas.width, grid);
context.fillRect(0, canvas.height - grid, canvas.width, canvas.height);
// draw dotted line down the middle
for (let i = grid; i < canvas.height - grid; i += grid * 2) {
context.fillRect(canvas.width / 2 - grid / 2, i, grid, grid);
}
} }
// listen to keyboard events to move the paddles // listen to keyboard events to move the paddles

13
style.css
View File

@ -8,4 +8,15 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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;
}