-
Notifications
You must be signed in to change notification settings - Fork 903
/
Copy pathpingpong.html
129 lines (113 loc) · 3.3 KB
/
pingpong.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
background: black;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="pong" width="800" height="400"></canvas>
<script>
const canvas = document.getElementById("pong");
const ctx = canvas.getContext("2d");
// Paddle variables
const paddleWidth = 10;
const paddleHeight = 100;
let playerY = canvas.height / 2 - paddleHeight / 2;
let computerY = canvas.height / 2 - paddleHeight / 2;
// Ball variables
const ballSize = 10;
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 7;
let ballSpeedY = 7;
// Draw a rectangle
function drawRect(x, y, width, height, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
// Draw the ball
function drawBall(x, y, size, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
}
// Draw the game
function draw() {
// Clear the canvas
drawRect(0, 0, canvas.width, canvas.height, "black");
// Draw the paddles
drawRect(0, playerY, paddleWidth, paddleHeight, "white");
drawRect(canvas.width - paddleWidth, computerY, paddleWidth, paddleHeight, "white");
// Draw the ball
drawBall(ballX, ballY, ballSize, "white");
}
// Move the computer paddle
function moveComputerPaddle() {
const computerYCenter = computerY + paddleHeight / 2;
if (computerYCenter < ballY - 35) {
computerY += 7;
} else if (computerYCenter > ballY + 35) {
computerY -= 7;
}
}
// Update the game state
function update() {
moveComputerPaddle();
// Update ball position
ballX += ballSpeedX;
ballY += ballSpeedY;
// Ball collision with top and bottom walls
if (ballY - ballSize < 0 || ballY + ballSize > canvas.height) {
ballSpeedY = -ballSpeedY;
}
// Ball out of bounds
if (ballX - ballSize < 0) {
// Player misses the ball
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = 7;
ballSpeedY = 7;
} else if (ballX + ballSize > canvas.width) {
// Computer misses the ball
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -7;
ballSpeedY = -7;
}
// Ball collision with paddles
if (
ballX - ballSize < paddleWidth &&
ballY > playerY &&
ballY < playerY + paddleHeight
) {
ballSpeedX = -ballSpeedX;
} else if (
ballX + ballSize > canvas.width - paddleWidth &&
ballY > computerY &&
ballY < computerY + paddleHeight
) {
ballSpeedX = -ballSpeedX;
}
}
// Game loop
function gameLoop() {
draw();
update();
requestAnimationFrame(gameLoop);
}
// Move player paddle with mouse
canvas.addEventListener("mousemove", (event) => {
playerY = event.clientY - canvas.getBoundingClientRect().top - paddleHeight / 2;
});
// Start the game loop
gameLoop();
</script>
</body>
</html>