Pong Game Using HTML CSS and JavaScript With Source Code

Introduction:

Welcome to the world of game development! Have you ever wanted to create your own video game? Well, you’re in luck because today we’re going to learn how to build a classic game called Pong using three essential web technologies: HTML, CSS, and JavaScript.

Pong is a simple but fun game where two players control paddles on opposite sides of the screen. The goal is to hit a ball back and forth, trying to make the other player miss it. It’s like virtual ping-pong!

In this tutorial, we’ll guide you through the process of creating your own Pong game from scratch. Don’t worry if you’re new to programming or game development – we’ll explain everything step by step in a simple and easy-to-understand way.

By the end of this tutorial, you’ll have your very own playable Pong game that you can share with your friends or even customize to make it your own. So let’s get started and have some fun building our own Pong game together!

Code Explanation :

Let’s break down the provided code:

HTML Structure:

The HTML file starts with the usual <!DOCTYPE html> declaration and <html>, <head>, and <body> tags.
Within the <head>, there’s a <style> block defining the CSS styles for the canvas element.

Canvas Setup:

A canvas element is created with the id “pongCanvas” and dimensions 800×400 pixels.

JavaScript:

The JavaScript begins with obtaining a reference to the canvas and its context.
It defines constants and variables for paddle dimensions, paddle positions, ball dimensions, ball positions, and ball speeds.

Drawing Functions:

Two drawing functions are defined:
- drawRect: To draw rectangles (used for paddles and clearing the canvas).
- drawCircle: To draw circles (used for the ball).
These functions set the fill style and draw shapes based on given parameters.

Drawing Function:

The draw() function is responsible for drawing the game elements on the canvas:
- Clears the canvas.
- Draws the paddles and ball.

Update Function:

The update() function is responsible for updating the game state:
- Moves the ball.
- Handles collisions with walls and paddles.
- Resets the ball if it goes out of bounds.

Reset Ball Function:

The resetBall() function resets the ball position to the center of the canvas and changes its direction.

Mouse Move Handler:

An event listener is added to the canvas for the ‘mousemove’ event.
It updates the position of the player’s paddle based on the mouse movement.

Calculate Mouse Position:

The calculateMousePos() function calculates the position of the mouse relative to the canvas.

Game Loop:

The gameLoop() function runs continuously using requestAnimationFrame():
- Draws the game.
- Updates the game state.
- Requests the next animation frame.

Start Game:

The game loop is started by calling gameLoop().

How to Run the Given Code :

To run the provided code, follow these steps:

Join our Telegram for Free Coding Ebooks & Handwritten Notes!

Source Code :

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pong Game</title>
  <style>
    canvas {
      background-color: black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="pongCanvas" width="800" height="400"></canvas>
  <script>
    const canvas = document.getElementById('pongCanvas');
    const ctx = canvas.getContext('2d');
    
    // Paddle Variables
    const paddleWidth = 10;
    const paddleHeight = 100;
    let paddle1Y = canvas.height / 2 - paddleHeight / 2;
    let paddle2Y = canvas.height / 2 - paddleHeight / 2;
    
    // Ball Variables
    const ballSize = 10;
    let ballX = canvas.width / 2;
    let ballY = canvas.height / 2;
    let ballSpeedX = 5;
    let ballSpeedY = 5;
    
    // Draw Functions
    function drawRect(x, y, width, height, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x, y, width, height);
    }
    
    function drawCircle(x, y, radius, color) {
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI * 2, false);
      ctx.fill();
    }
    
    function draw() {
      // Clear Canvas
      drawRect(0, 0, canvas.width, canvas.height, 'black');
      
      // Draw Paddles
      drawRect(0, paddle1Y, paddleWidth, paddleHeight, 'white');
      drawRect(canvas.width - paddleWidth, paddle2Y, paddleWidth, paddleHeight, 'white');
      
      // Draw Ball
      drawCircle(ballX, ballY, ballSize, 'white');
    }
    
    // Update Function
    function update() {
      // Move Ball
      ballX += ballSpeedX;
      ballY += ballSpeedY;
      
      // Ball Collision with Top and Bottom Walls
      if (ballY - ballSize < 0 || ballY + ballSize > canvas.height) {
        ballSpeedY = -ballSpeedY;
      }
      
      // Ball Collision with Paddles
      if (ballX - ballSize < paddleWidth && ballY > paddle1Y && ballY < paddle1Y + paddleHeight ||
          ballX + ballSize > canvas.width - paddleWidth && ballY > paddle2Y && ballY < paddle2Y + paddleHeight) {
        ballSpeedX = -ballSpeedX;
      }
      
      // Ball Out of Bounds
      if (ballX - ballSize < 0 || ballX + ballSize > canvas.width) {
        resetBall();
      }
    }
    
    // Reset Ball Position
    function resetBall() {
      ballX = canvas.width / 2;
      ballY = canvas.height / 2;
      ballSpeedX = -ballSpeedX;
    }
    
    // Mouse Move Handler
    canvas.addEventListener('mousemove', function(event) {
      const mousePos = calculateMousePos(event);
      paddle1Y = mousePos.y - paddleHeight / 2;
    });
    
    // Calculate Mouse Position
    function calculateMousePos(event) {
      const rect = canvas.getBoundingClientRect();
      const root = document.documentElement;
      const mouseX = event.clientX - rect.left - root.scrollLeft;
      const mouseY = event.clientY - rect.top - root.scrollTop;
      return { x: mouseX, y: mouseY };
    }
    
    // Game Loop
    function gameLoop() {
      draw();
      update();
      requestAnimationFrame(gameLoop);
    }
    
    // Start Game
    gameLoop();
  </script>
</body>
</html>

Output :

Find More Projects

Resume builder Application using java with complete source code

saloni

•

February 11, 2025

•

Java Projects, projects

Resume Builder Application using Java With Source Code Graphical User Interface [GUI] Introduction: The Resume Builder Application is a powerful and user-friendly …