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
ballSpeedXandballSpeedYgradually to make the game harder. - Add sounds using the
Audioobject for more immersive gameplay.
- Increase
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);