MeetUp Report:
Develop a Pong Game with JavaScript

On November 22, 2024, I attended an online meetup hosted by The Tech Academy titled "Develop a Pong Game with JavaScript." The event was led by Erik Gross, a Senior Developer and Co-Founder of The Tech Academy.

During the session, we built a Pong game using JavaScript. The workshop focused on game mechanics, canvas manipulation, and interactive design. It was an excellent introduction to JavaScript's capabilities in creating dynamic and interactive web applications.

The Pong game we created includes features like paddle controls, collision detection, scorekeeping, and smooth animations. Below is a snippet of the JavaScript code used to create the game:

            
                // Setting up the game: grabbing the canvas, setting up the context, and loading the logo.
                const canvas = document.getElementById('pong');
                const ctx = canvas.getContext('2d');
                const logo = new Image();
                logo.src = 'https://www.learncodinganywhere.com/images/TTA-circle%20logo-blue%20transparent.png';
        
                let score = 0;
                let gamePaused = false; // Variable to track if the game is paused.
                const playerPaddle = { width: 10, height: 100, x: 0, y: canvas.height / 2 - 50, color: 'darkblue', speed: 4 };
                const compPaddle = { width: 10, height: 100, x: canvas.width - 10, y: canvas.height / 2 - 50, color: 'orange', speed: 4 };
                const ball = { radius: 10, x: canvas.width / 2, y: canvas.height / 2, speedX: 2.5, speedY: 2.5, color: 'black' };
        
                <!-- Functions to draw different game elements: rectangles (paddles), circle (ball), and the logo. -->
                function drawRect(x, y, w, h, color) {
                    ctx.fillStyle = color;
                    ctx.fillRect(x, y, w, h);
                }
        
                function drawCircle(x, y, r, color) {
                    ctx.fillStyle = color;
                    ctx.beginPath();
                    ctx.arc(x, y, r, 0, Math.PI * 2, false);
                    ctx.closePath();
                    ctx.fill();
                }
        
                function drawLogo() {
                    let size = canvas.width * 0.25;
                    ctx.drawImage(logo, canvas.width / 2 - size / 2, canvas.height / 2 - size / 2, size, size);
                }
        
                <!-- Updates the score display. -->
                function drawScore() {
                    document.getElementById('score').innerText = `Score: ${score}`;
                }
        
                <!-- Allows the player to move the paddle with the mouse. -->
                function movePaddle(evt) {
                    let rect = canvas.getBoundingClientRect();
                    playerPaddle.y = evt.clientY - rect.top - playerPaddle.height / 2;
                }
        
                <!-- Main game logic: moves the paddles and ball, checks for collisions, and updates the score. -->
                function update() {
                    if (compPaddle.y + compPaddle.height / 2 < ball.y) {
                        compPaddle.y += compPaddle.speed;
                    } else {
                        compPaddle.y -= compPaddle.speed;
                    }
        
                    ball.x += ball.speedX;
                    ball.y += ball.speedY;
        
                    if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
                        ball.speedY = -ball.speedY;
                    }
                }
        
                canvas.addEventListener('mousemove', movePaddle);
                requestAnimationFrame(gameLoop);
            
        

I learned a lot about JavaScript's canvas API and how to implement real-time updates in web applications. For more details about the event, visit the official Meetup page: Develop a Pong Game with JavaScript.

Watch the Event Recap

Play the Pong Game

Click the link below to play the Pong game we developed during the event: Play Pong Game.

This experience has inspired me to dive deeper into JavaScript game development and explore creative projects in web development.