Tutorial: Create a JavaScript Pong Game in Replit

javascript tutorial

SHARE WITH FRIENDS >

Tutorial Overview

We’ll be building a Pong game from scratch, covering all stages from setting up your project on Replit to expanding the game’s features. The tutorial is structured as follows:

  1. Getting Started with Replit
  2. Introduction to JavaScript
  3. Building the Pong Game
    • Drawing the game board
    • Adding paddles and ball
    • Moving the paddles
    • Ball movement and collision detection
  4. Adding Score and Restarting the Game
  5. Expanding Your Game
  6. Conclusion with Complete Code

Getting Started with Replit

Creating an Account on Replit

Setting Up Your Project

  • Once logged in, create a new “HTML, CSS, JS” project, naming it “Pong Game”.

Introduction to JavaScript

We’ll briefly go over JavaScript basics that we’ll use in our game:

  • Variables: let score = 0;
  • Functions: function moveBall() { /* code */ }
  • Event Listeners: document.addEventListener('keydown', function(event) { /* code */ });

Building the Pong Game

Drawing the Game Board

  1. HTML (index.html):
<!DOCTYPE html>
<html>
<head>
    <title>Pong Game</title>
    <style>
        canvas { background: #000; display: block; margin: auto; }
    </style>
</head>
<body>
    <canvas id="pongCanvas" width="600" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>
  1. JavaScript (script.js):
  • Initializing canvas:
const canvas = document.getElementById('pongCanvas');
const ctx = canvas.getContext('2d');

Adding Paddles and Ball

  • Define paddles and ball:
const paddleWidth = 10, paddleHeight = 60;
let leftPaddleY = (canvas.height - paddleHeight) / 2, rightPaddleY = (canvas.height - paddleHeight) / 2;
let ballX = canvas.width / 2, ballY = canvas.height / 2;
let ballSpeedX = 2, ballSpeedY = 2;
  • Drawing function:
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Draw paddles
    ctx.fillStyle = 'white';
    ctx.fillRect(0, leftPaddleY, paddleWidth, paddleHeight);
    ctx.fillRect(canvas.width - paddleWidth, rightPaddleY, paddleWidth, paddleHeight);
    // Draw ball
    ctx.beginPath();
    ctx.arc(ballX, ballY, 10, 0, Math.PI*2, false);
    ctx.fill();
    ballX += ballSpeedX;
    ballY += ballSpeedY;
}
setInterval(draw, 10);

Moving the Paddles

  • Add event listeners for keyboard inputs:
document.addEventListener('keydown', function(event) {
    if(event.keyCode == 38) { // Up arrow
        rightPaddleY -= 20;
    } else if(event.keyCode == 40) { // Down arrow
        rightPaddleY += 20;
    }
});

Ball Movement and Collision Detection

  • Add basic collision detection to draw() function:
// Invert ball direction when hitting top/bottom walls
if(ballY + 10 >= canvas.height || ballY - 10 <= 0) ballSpeedY = -ballSpeedY;

// Reset ball to center if it goes past paddles
if(ballX + 10 >= canvas.width || ballX - 10 <= 0) {
    ballX = canvas.width / 2;
    ballSpeedX = -ballSpeedX;
}

Adding Score and Restarting the Game

  • Adding score variables and display:
let leftScore = 0, rightScore = 0;

function draw() {
    // Previous draw function content

    // Display scores
    ctx.font = "32px Arial";
    ctx.fillText(leftScore, 100, 50);
    ctx.fillText(rightScore, canvas.width - 100, 50);
}

Expanding Your Game

  • Ideas to expand your game:
    • Increase ballSpeedX and ballSpeedY gradually to make the game harder.
    • Add sounds using the Audio object for more immersive gameplay.

Conclusion with Complete Code

In conclusion, you
have learned how to build a simple Pong game using HTML, CSS, and JavaScript on Replit. Here’s the complete code for your game:

<!DOCTYPE html>
<html>
<head>
    <title>Pong Game</title>
    <style>
        canvas { background: #000; display: block; margin: auto; }
    </style>
</head>
<body>
    <canvas id="pongCanvas" width="600" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const canvas = document.getElementById('pongCanvas');
const ctx = canvas.getContext('2d');

const paddleWidth = 10, paddleHeight = 60;
let leftPaddleY = (canvas.height - paddleHeight) / 2, rightPaddleY = (canvas.height - paddleHeight) / 2;
let ballX = canvas.width / 2, ballY = canvas.height / 2;
let ballSpeedX = 2, ballSpeedY = 2;
let leftScore = 0, rightScore = 0;

document.addEventListener('keydown', function(event) {
    if(event.keyCode == 38) { // Up arrow
        rightPaddleY -= 20;
    } else if(event.keyCode == 40) { // Down arrow
        rightPaddleY += 20;
    }
});

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Draw paddles
    ctx.fillStyle = 'white';
    ctx.fillRect(0, leftPaddleY, paddleWidth, paddleHeight);
    ctx.fillRect(canvas.width - paddleWidth, rightPaddleY, paddleWidth, paddleHeight);
    // Draw ball
    ctx.beginPath();
    ctx.arc(ballX, ballY, 10, 0, Math.PI*2, false);
    ctx.fill();
    
    // Ball movement
    ballX += ballSpeedX;
    ballY += ballSpeedY;

    // Collision detection
    if(ballY + 10 >= canvas.height || ballY - 10 <= 0) ballSpeedY = -ballSpeedY;
    if(ballX + 10 >= canvas.width) {
        leftScore += 1;
        resetBall();
    } else if(ballX - 10 <= 0) {
        rightScore += 1;
        resetBall();
    }

    // Display scores
    ctx.font = "32px Arial";
    ctx.fillText(leftScore, 100, 50);
    ctx.fillText(rightScore, canvas.width - 100, 50);
}

function resetBall() {
    ballX = canvas.width / 2;
    ballY = canvas.height / 2;
    ballSpeedX = -ballSpeedX;
    ballSpeedY = 3;
}

setInterval(draw, 10);

SHARE WITH FRIENDS >

IDE options

Education

16 Apr 2024

Ready to Boost Your Teen’s Future with Coding?

Best dev enviroments for learning to code

Education

16 Apr 2024

Top 5 Epic Coding Environments for Teens

review kids coding sites

Education, Learn to Code

16 Apr 2024

Top Learn-to-Code Online Sites and Tools for Kids

Convert USD to other currency program

Advanced Placement, Java, Tutorial

4 Apr 2024

Object-Oriented Programming in Java – AP CS A

learn to use replit IDE

Advanced Placement, Java, Tutorial

4 Apr 2024

Exploring Concurrency in Java – AP Exam

Minecraft Mods in Java

Minecraft

4 Apr 2024

Getting Started with Minecraft Forge

Lesson on functions in computer science programming

Tutorial

4 Apr 2024

Preparing to Teach Coding for the First Time

learn to code as a family

Education

4 Apr 2024

In-Person vs. Live Virtual Coding Lessons