Skip to content

Commit a89bfb4

Browse files
jrobbinsjrobbins
authored
Create pong.html
1 parent e325a67 commit a89bfb4

File tree

1 file changed

+171
-0
lines changed

1 file changed

+171
-0
lines changed

‎pong.html

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<html>
2+
<head>
3+
<title>Jason's pong game</title>
4+
<style>
5+
div { position: absolute; transition: 0.025s linear; }
6+
#board {
7+
border: 4px solid #444;
8+
top: 10px;
9+
left: 10px;
10+
width: 800px;
11+
height: 600px;
12+
}
13+
#ball {
14+
background: black;
15+
width: 16px;
16+
height: 16px;
17+
top: 400px;
18+
left: 300px;
19+
border-radius: 50%;
20+
}
21+
.paddle {
22+
background: blue;
23+
width: 20px;
24+
height: 140px;
25+
border-radius: 8px;
26+
}
27+
#paddle1 { top: 100px; left: 20px; }
28+
#paddle2 { top: 200px; left: 784px; }
29+
</style>
30+
</head>
31+
<body>
32+
<div id="board"></div>
33+
<div id="ball"></div>
34+
<div id="paddle1" class="paddle"></div>
35+
<div id="paddle2" class="paddle"></div>
36+
37+
<script>
38+
// Ball location
39+
let ballX = 400, ballY = 300;
40+
let ballSpeed = 3;
41+
let ballRadians = 0.1;
42+
const ballSize = 16;
43+
44+
const board = document.getElementById('board');
45+
const ball = document.getElementById('ball');
46+
const paddle1 = document.getElementById('paddle1');
47+
let paddle1y = 100;
48+
let paddle1angle = 0;
49+
const paddle2 = document.getElementById('paddle2');
50+
let paddle2y = 200;
51+
let paddle2angle = 0;
52+
let paddle1Height = 140;
53+
let paddle2Height = 140;
54+
const paddleWidth = 20;
55+
56+
// board boundaries
57+
const boardRect = board.getBoundingClientRect();
58+
59+
60+
function rotatePaddle1(delta) {
61+
paddle1angle = Math.max(-0.25, Math.min(0.25, paddle1angle + delta));
62+
paddle1.style.transform = "rotate(" + paddle1angle + "rad)";
63+
}
64+
65+
function rotatePaddle2(delta) {
66+
paddle2angle = Math.max(-0.25, Math.min(0.25, paddle2angle + delta));
67+
paddle2.style.transform = "rotate(" + paddle2angle + "rad)";
68+
}
69+
70+
document.addEventListener('keydown', idKey);
71+
72+
function idKey(e) {
73+
// Player 1 uses WASD keys.
74+
if (e.key == "d") {
75+
rotatePaddle1(0.02);
76+
}
77+
else if (e.key == "a") {
78+
rotatePaddle1(-0.02);
79+
}
80+
else if (e.key == "w") {
81+
paddle1y = Math.max(boardRect.top + 5, paddle1y - 10);
82+
paddle1.style.top = paddle1y + "px";
83+
}
84+
else if (e.key == "s") {
85+
paddle1y = Math.min(boardRect.bottom - 5 - paddle1Height, paddle1y + 10);
86+
paddle1.style.top = paddle1y + "px";
87+
}
88+
// Player 2 uses arrow keys
89+
else if (e.code == "ArrowRight") {
90+
rotatePaddle2(0.02);
91+
}
92+
else if (e.code == "ArrowLeft") {
93+
rotatePaddle2(-0.02);
94+
}
95+
else if (e.code == "ArrowUp") {
96+
paddle2y = Math.max(boardRect.top + 5, paddle2y - 10);
97+
paddle2.style.top = paddle2y + "px";
98+
}
99+
else if (e.code == "ArrowDown") {
100+
paddle2y = Math.min(boardRect.bottom - 5 - paddle2Height, paddle2y + 10);
101+
paddle2.style.top = paddle2y + "px";
102+
}
103+
else {
104+
console.log("wrong key");
105+
console.log(e);
106+
}
107+
}
108+
109+
110+
function checkCollision(paddleEl, newX, newY) {
111+
const paddleRect = paddleEl.getBoundingClientRect();
112+
return (newY + ballSize >= paddleRect.top &&
113+
newY <= paddleRect.bottom &&
114+
newX + ballSize >= paddleRect.left &&
115+
newX <= paddleRect.right);
116+
}
117+
118+
119+
function moveBallLoop() {
120+
// Think about where the ball would be after this movement.
121+
let dx = ballSpeed * Math.cos(ballRadians);
122+
let dy = ballSpeed * Math.sin(ballRadians);
123+
let newX = ballX + dx;
124+
let newY = ballY + dy;
125+
let newBallRadians = ballRadians;
126+
127+
// Bounce off of each paddle
128+
if (checkCollision(paddle1, newX, newY)) {
129+
newBallRadians = Math.PI - ballRadians + (paddle1angle * 2);
130+
ballSpeed = ballSpeed + 0.1;
131+
paddle1Height = Math.max(20, paddle1Height - 5);
132+
paddle1.style.height = paddle1Height + 'px';
133+
rotatePaddle1(0.1 * ((newY - paddle1y - (paddle1Height/2)) / paddle1Height));
134+
}
135+
else if (checkCollision(paddle2, newX, newY)) {
136+
newBallRadians = Math.PI - ballRadians + (paddle2angle * 2);
137+
ballSpeed = ballSpeed + 0.1;
138+
paddle2Height = Math.max(20, paddle2Height - 5);
139+
paddle2.style.height = paddle2Height + 'px';
140+
rotatePaddle2(-0.1 * ((newY - paddle2y - (paddle2Height/2)) / paddle2Height));
141+
}
142+
143+
// Bounce off the walls of the board.
144+
else if (newX < boardRect.left || newX + ballSize > boardRect.right) {
145+
newBallRadians = Math.PI - ballRadians;
146+
ballSpeed = 3;
147+
paddle1Height = 140;
148+
paddle1.style.height = paddle1Height + 'px';
149+
paddle2Height = 140;
150+
paddle2.style.height = paddle2Height + 'px';
151+
}
152+
else if (newY < boardRect.top || newY + ballSize > boardRect.bottom) {
153+
newBallRadians = 0 - ballRadians;
154+
}
155+
156+
// Once we have computed the new angle, save that and update the elements.
157+
ballRadians = newBallRadians;
158+
dx = ballSpeed * Math.cos(ballRadians);
159+
dy = ballSpeed * Math.sin(ballRadians);
160+
ballX = ballX + dx;
161+
ballY = ballY + dy;
162+
ball.style.left = newX + "px";
163+
ball.style.top = newY + "px";
164+
}
165+
166+
167+
setInterval(moveBallLoop, 25);
168+
169+
</script>
170+
</body>
171+
</html>

0 commit comments

Comments
 (0)