Tutorial: Create a JavaScript Pong Game in Replit

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:

Getting Started with Replit
Introduction to JavaScript
Building the Pong Game
- Drawing the game board
- Adding paddles and ball
- Moving the paddles
- Ball movement and collision detection
Adding Score and Restarting the Game
Expanding Your Game
Conclusion with Complete Code

Getting Started with Replit

Creating an Account on Replit

Visit Replit and sign up.

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

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>

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);