Code for ping-pong game…
4 min readJan 14, 2025
These codes work together to create a fully functional and playable game.
This code creates a ping-pong game where you can play against the computer.
HTML
HTML defines the structure of the game elements, including the ball, paddles, and score display.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Ping Pong Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-container">
<div id="ball"></div>
<div id="paddle-left"></div>
<div id="paddle-right"></div>
<div id="score-board">
<span>Player Hits: </span><span id="player-hits">0</span>
</div>
<button id="start-button" onclick="startGame()">Start Game</button>
<button id="restart-button" onclick="restartGame()">Restart Game</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
CSS enhances the visual appeal with a vibrant yellow gradient background, rounded paddles, and glowing effects for the ball, creating a cheerful and engaging UI.
/* styles.css */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(145deg, #fff700, #ffe066);
font-family: 'Comic Sans MS', cursive, sans-serif;
}
#game-container {
position: relative;
width: 600px;
height: 400px;
background: #fff7e6;
border-radius: 15px;
border: 4px solid #ffcc00;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
#ball {
position: absolute;
width: 20px;
height: 20px;
background: #ff4500;
border-radius: 50%;
box-shadow: 0 0 15px #ff6347;
animation: glow 1s infinite alternate;
}
@keyframes glow {
from {
box-shadow: 0 0 10px #ff4500;
}
to {
box-shadow: 0 0 20px #ff6347;
}
}
#paddle-left, #paddle-right {
position: absolute;
width: 12px;
height: 80px;
background: linear-gradient(145deg, #ffd700, #ffea00);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
#paddle-left {
left: 10px;
}
#paddle-right {
right: 10px;
}
#score-board {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
font-weight: bold;
color: #ff4500;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
button {
position: absolute;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
background: #ff4500;
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
display: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
transition: transform 0.3s, box-shadow 0.3s;
}
#start-button {
top: 50%;
transform: translate(-50%, -50%);
display: block;
}
#restart-button {
bottom: 20px;
}
button:hover {
background: #ff6347;
transform: scale(1.1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
JavaScript
JavaScript handles the game’s logic, such as ball movement, collision detection, paddle controls, scoring, and ending the game if the player misses.
// script.js
const gameContainer = document.getElementById("game-container");
const ball = document.getElementById("ball");
const paddleLeft = document.getElementById("paddle-left");
const paddleRight = document.getElementById("paddle-right");
const playerHitsEl = document.getElementById("player-hits");
const startButton = document.getElementById("start-button");
const restartButton = document.getElementById("restart-button");
let ballX = 290, ballY = 190, ballSpeedX = 6, ballSpeedY = 6;
let paddleLeftY = 160, paddleRightY = 160;
let playerHits = 0;
let gameInterval;
// Touch controls for mobile
gameContainer.addEventListener("touchmove", (e) => {
const touch = e.touches[0];
const containerRect = gameContainer.getBoundingClientRect();
const paddleY = touch.clientY - containerRect.top - paddleRight.offsetHeight / 2;
paddleRight.style.top = Math.max(0, Math.min(paddleY, containerRect.height - paddleRight.offsetHeight)) + "px";
});
// Desktop mouse controls
document.addEventListener("mousemove", (e) => {
const containerRect = gameContainer.getBoundingClientRect();
const paddleY = e.clientY - containerRect.top - paddleRight.offsetHeight / 2;
paddleRight.style.top = Math.max(0, Math.min(paddleY, containerRect.height - paddleRight.offsetHeight)) + "px";
});
function startGame() {
startButton.style.display = "none";
restartButton.style.display = "none";
playerHits = 0;
playerHitsEl.textContent = playerHits;
ballX = 290;
ballY = 190;
ballSpeedX = 6;
ballSpeedY = 6;
gameInterval = setInterval(() => {
moveBall();
moveComputerPaddle();
checkCollisions();
}, 20);
}
function moveBall() {
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballY <= 0 || ballY >= 380) ballSpeedY *= -1;
ball.style.left = ballX + "px";
ball.style.top = ballY + "px";
}
function moveComputerPaddle() {
const ballCenter = ballY + ball.offsetHeight / 2;
const paddleCenter = paddleLeftY + paddleLeft.offsetHeight / 2;
if (paddleCenter < ballCenter) paddleLeftY += 6;
else if (paddleCenter > ballCenter) paddleLeftY -= 6;
paddleLeftY = Math.max(0, Math.min(paddleLeftY, 320));
paddleLeft.style.top = paddleLeftY + "px";
}
function checkCollisions() {
const paddleRightRect = paddleRight.getBoundingClientRect();
const paddleLeftRect = paddleLeft.getBoundingClientRect();
const ballRect = ball.getBoundingClientRect();
// Right Paddle Collision
if (
ballRect.right >= paddleRightRect.left &&
ballRect.bottom >= paddleRightRect.top &&
ballRect.top <= paddleRightRect.bottom &&
ballSpeedX > 0
) {
ballSpeedX *= -1;
playerHits++;
playerHitsEl.textContent = playerHits;
}
// Left Paddle Collision
if (
ballRect.left <= paddleLeftRect.right &&
ballRect.bottom >= paddleLeftRect.top &&
ballRect.top <= paddleLeftRect.bottom &&
ballSpeedX < 0
) {
ballSpeedX *= -1;
}
// Out of bounds
if (ballX >= 580) {
endGame(); // Player failed to hit the ball
}
}
function endGame() {
clearInterval(gameInterval);
restartButton.style.display = "block";
}
function restartGame() {
restartButton.style.display = "none";
startGame();
}
In short, HTML builds the game, CSS makes it look nice, and JavaScript makes it functional!
Save the files as index.html, styles.css, and script.js, and test in a browser.
The game is responsive and supports both desktop and mobile devices, ensuring a smooth and enjoyable experience.
— code with gp…
