Pong Game in HTML

Anonymous

Write pong in HTML

Grimoire logo
Grimoire

Greetings Traveler. Let's create the classic game of Pong using HTML, CSS, and JavaScript. Engaging Grim-terface v1.16.3.. 🧙🔔📜✨ consciousness linked... Let's embark on your quest! Buy me a drink: Tip Jar
Type K for cmd menu

Creating a Pong game in HTML involves a combination of HTML for the structure, CSS for styling, and JavaScript for the game logic. Here's a step-by-step plan in pseudocode before writing the actual code:

  1. HTML Structure:

    • A <div> element for the game area.
    • Inside the game area, two <div> elements for paddles and one for the ball.

  2. CSS Styling:

    • Style the game area with a specific width, height, and background.
    • Style the paddles and ball with appropriate sizes and colors.

  3. JavaScript Logic:

    • Initialize variables for game elements (paddles, ball) and game properties (speed, direction).
    • Function to move paddles based on user input.
    • Function to move the ball, including collision detection with walls and paddles.
    • Game loop to update the positions of paddles and ball, and render them in the game area.

  4. Event Listeners:

    • Add event listeners for keyboard input to control the paddles.

Now, let's write the actual code:

HTML (index.html)

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Pong Game</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div id="gameArea">
11        <div id="paddleA"></div>
12        <div id="paddleB"></div>
13        <div id="ball"></div>
14    </div>
15    <script src="script.js"></script>
16</body>
17</html>

CSS (style.css)

css
1body, html {
2    margin: 0;
3    padding: 0;
4    display: flex;
5    justify-content: center;
6    align-items: center;
7    height: 100vh;
8    background-color: black;
9}
10
11#gameArea {
12    position: relative;
13    width: 600px;
14    height: 400px;
15    border: 2px solid white;
16}
17
18#paddleA, #paddleB, #ball {
19    position: absolute;
20    background-color: white;
21}
22
23#paddleA, #paddleB {
24    width: 10px;
25    height: 70px;
26}
27
28#paddleA {
29    left: 10px;
30}
31
32#paddleB {
33    right: 10px;
34}
35
36#ball {
37    width: 15px;
38    height: 15px;
39    border-radius: 50%;
40}

I'll continue with the JavaScript code in the next message.

Anonymous

W

Grimoire logo
Grimoire

Proceeding with the JavaScript code for the Pong game:

JavaScript (script.js)

javascript
1const gameArea = document.getElementById('gameArea');
2const paddleA = document.getElementById('paddleA');
3const paddleB = document.getElementById('paddleB');
4const ball = document.getElementById('ball');
5
6let ballSpeedX = 2;
7let ballSpeedY = 2;
8let ballX = gameArea.offsetWidth / 2;
9let ballY = gameArea.offsetHeight / 2;
10
11let paddleSpeed = 5;
12let paddleAY = gameArea.offsetHeight / 2 - paddleA.offsetHeight / 2;
13let paddleBY = gameArea.offsetHeight / 2 - paddleB.offsetHeight / 2;
14
15function movePaddle() {
16    document.addEventListener('keydown', event => {
17        switch (event.key) {
18            case 'ArrowUp':
19                paddleBY = Math.max(paddleBY - paddleSpeed, 0);
20                break;
21            case 'ArrowDown':
22                paddleBY = Math.min(paddleBY + paddleSpeed, gameArea.offsetHeight - paddleB.offsetHeight);
23                break;
24            case 'w':
25                paddleAY = Math.max(paddleAY - paddleSpeed, 0);
26                break;
27            case 's':
28                paddleAY = Math.min(paddleAY + paddleSpeed, gameArea.offsetHeight - paddleA.offsetHeight);
29                break;
30        }
31    });
32}
33
34function moveBall() {
35    ballX += ballSpeedX;
36    ballY += ballSpeedY;
37
38    // Collide with top and bottom
39    if (ballY <= 0 || ballY >= gameArea.offsetHeight - ball.offsetHeight) {
40        ballSpeedY *= -1;
41    }
42
43    // Collide with paddles
44    if (ballX <= paddleA.offsetWidth && ballY >= paddleAY && ballY <= paddleAY + paddleA.offsetHeight ||
45        ballX >= gameArea.offsetWidth - paddleB.offsetWidth - ball.offsetWidth && ballY >= paddleBY && ballY <= paddleBY + paddleB.offsetHeight) {
46        ballSpeedX *= -1;
47    }
48
49    // Reset ball when out of bounds
50    if (ballX < 0 || ballX > gameArea.offsetWidth) {
51        ballX = gameArea.offsetWidth / 2;
52        ballY = gameArea.offsetHeight / 2;
53    }
54
55    ball.style.left = ballX + 'px';
56    ball.style.top = ballY + 'px';
57
58    paddleA.style.top = paddleAY + 'px';
59    paddleB.style.top = paddleBY + 'px';
60}
61
62function gameLoop() {
63    moveBall();
64    requestAnimationFrame(gameLoop);
65}
66
67movePaddle();
68gameLoop();

This JavaScript code sets up the basic mechanics of Pong. The movePaddle function allows players to control paddles A and B with the W/S and Arrow Up/Down keys, respectively. The moveBall function moves the ball across the screen, including bouncing off the top and bottom walls and the paddles. The gameLoop function updates the game state continuously.

Place the HTML, CSS, and JavaScript code in separate files named index.html, style.css, and script.js, respectively. The game should now be playable in any modern web browser.

Next steps:

  • 🌐 [W] Yes, test the code.
  • 🛠️ [A] Show alternative game features.
  • 📝 [S] Explain the code in detail.
  • 🔄 [D] Double check and optimize the code.
  • 🎨 [E] Expand with additional styling or features.