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 >

ethernet IP network lessons for teens

IT Tutorials

9 Jul 2024

Teaching Kids the Basics of Ethernet and TCP/IP

learn to code games in python

Python

9 Jul 2024

Building a Python Hangman Game with Replit

virtual pet scratch coding

Hackathon Projects

8 May 2024

My Virtual Pet

flappy football game

Hackathon Projects

8 May 2024

Flappy Football

Animate a Character

Hackathon Projects

8 May 2024

Animate a Character Level 2

Animate a Character

Hackathon Projects

8 May 2024

Animate a Character

two player pong

Hackathon Projects

8 May 2024

Pong Two Player Game

Pong game

Hackathon Projects

8 May 2024

Pong Game