Developing a Ping Pong Game using HTML, CSS, and JavaScript
Did you know that you can design a game using only HTML, CSS, and JavaScript?
Yes, it’s true! You can create a fun and simple game like Ping Pong using just basic web technologies. In this article, we will go through the steps to build a Ping Pong game using HTML, CSS, and JavaScript.
You can watch the video at the bottom of the page
Step 1: Setting Up the Basic HTML Structure
First, we will start by creating the basic HTML structure for the game. We’ll create the game board, paddles, and ball.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ping Pong Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-container">
<div id="score">
<div id="player1-score">0</div>
<div id="player2-score">0</div>
</div>
<div id="paddle1" class="paddle"></div>
<div id="paddle2" class="paddle"></div>
<div id="ball"></div>
</div>
<script src="script.js"></script>
</body>
</html>
• <div id="game-container">: This element represents the entire game content and, contains all other game elements.
• <div id="score">: Contains <div> elements to display the scores of Player 1 and Player 2.
• <div id="paddle1" class="paddle"></div> and <div id="paddle2" class="paddle"></div>: These are the paddles for Player 1 and Player 2, respectively.
• <div id="ball"></div>: This is the ball that will move within the game area.
Step 2: Styling the Game Using CSS
We will style the elements using CSS to make the game look attractive and user-friendly.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #282c34;
margin: 0;
font-family: Arial, sans-serif;
color: #fff;
}
#game-container {
position: relative;
width: 800px;
height: 400px;
background-color: #0077b6;
border: 5px solid #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
border-radius: 10px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.paddle {
position: absolute;
width: 10px;
height: 100px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#paddle1 {
left: 10px;
top: 150px;
}
#paddle2 {
right: 10px;
top: 150px;
}
#ball {
position: absolute;
width: 20px;
height: 20px;
background-color: #ffd700;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#score {
display: flex;
justify-content: space-between;
width: 100%;
padding: 10px;
font-size: 24px;
font-weight: bold;
}
#player1-score {
text-align: center;
flex: 1;
}
#player2-score {
text-align: center;
flex: 1;
}
#game-container::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 100%;
background-color: #fff;
transform: translateX(-50%);
}• body: Styles the overall page, setting the background color and general layout.
• #game-container: Defines the dimensions and background of the main game area, along with effects like shadows and rounded edges.
• .paddle: Defines the design of the paddles using a white background and shadows for depth.
• #ball: Defines the basic design of the ball with a gold color and rounded edges.
Step 3: Adding Interactivity Using JavaScript
Finally, we’ll add the code to handle the game’s behavior and interactivity, including paddle movement, ball movement, and score updates.
const gameContainer = document.getElementById('game-container');
const paddle1 = document.getElementById('paddle1');
const paddle2 = document.getElementById('paddle2');
const ball = document.getElementById('ball');
const player1ScoreDisplay = document.getElementById('player1-score');
const player2ScoreDisplay = document.getElementById('player2-score');
let paddle1Y = 150;
let paddle2Y = 150;
let ballX = 390;
let ballY = 190;
let ballSpeedX = 2;
let ballSpeedY = 2;
const paddleSpeed = 5;
let player1Score = 0;
let player2Score = 0;
document.addEventListener('keydown', (event) => {
switch (event.key) {
case 'w':
if (paddle1Y > 0) paddle1Y -= paddleSpeed;
break;
case 's':
if (paddle1Y < 300) paddle1Y += paddleSpeed;
break;
case 'ArrowUp':
if (paddle2Y > 0) paddle2Y -= paddleSpeed;
break;
case 'ArrowDown':
if (paddle2Y < 300) paddle2Y += paddleSpeed;
break;
}
paddle1.style.top = `${paddle1Y}px`;
paddle2.style.top = `${paddle2Y}px`;
});
function updateBall() {
ballX += ballSpeedX;
ballY += ballSpeedY;
// Ball collision with top and bottom walls
if (ballY <= 0 || ballY >= 380) {
ballSpeedY = -ballSpeedY;
}
// Ball collision with paddles
if (ballX <= 10 && ballY >= paddle1Y && ballY <= paddle1Y + 100) {
ballSpeedX = -ballSpeedX;
} else if (ballX >= 770 && ballY >= paddle2Y && ballY <= paddle2Y + 100) {
ballSpeedX = -ballSpeedX;
}
// Ball out of bounds
if (ballX <= 0) {
increasePlayer2Score();
resetBall();
} else if (ballX >= 780) {
increasePlayer1Score();
resetBall();
}
ball.style.left = `${ballX}px`;
ball.style.top = `${ballY}px`;
}
function increasePlayer1Score() {
player1Score++;
player1ScoreDisplay.textContent = player1Score;
}
function increasePlayer2Score() {
player2Score++;
player2ScoreDisplay.textContent = player2Score;
}
function resetBall() {
ballX = 390;
ballY = 190;
ballSpeedX = Math.random() > 0.5 ? 2 : -2;
ballSpeedY = Math.random() > 0.5 ? 2 : -2;
}
function gameLoop() {
updateBall();
requestAnimationFrame(gameLoop);
}
gameLoop();• const gameContainer, paddle1, paddle2, ball, player1ScoreDisplay, player2ScoreDisplay: Defines the main variables representing game elements.
• document.addEventListener('keydown'): Captures keyboard events to control paddle movement.
• updateBall(): Updates the ball’s position, checks for collisions with walls and paddles, and updates scores.
• increasePlayer1Score(), increasePlayer2Score(): Increases the score for each player when a goal is scored.
• resetBall(): Resets the ball’s position and sets its direction randomly after a goal is scored.
• gameLoop(): Continuously updates the ball’s movement using requestAnimationFrame() to create the main game loop.
Writing this type of challenge will help you improve your problem-solving skills and enhance your programming skills in JavaScript without relying on external libraries.
Prepared by: Ahmad Alkhouli