Creating a simple Pong game using PHP involves combining PHP with HTML5 Canvas and JavaScript for real-time game mechanics, as PHP is a server-side language. Below is an example of how to structure your files for this purpose:
index.php
This file will serve as the main game page and handle any server-side logic if needed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pong Game</title>
<style>
body {
margin: 0;
background: black;
color: white;
font-family: Arial, sans-serif;
}
canvas {
display: block;
margin: auto;
background: #333;
border: 2px solid white;
}
</style>
</head>
<body>
<h1 style="text-align:center;">Pong Game</h1>
<canvas id="pongCanvas" width="800" height="400"></canvas>
<script>
const canvas = document.getElementById('pongCanvas');
const ctx = canvas.getContext('2d');
// Game objects
const paddleHeight = 100, paddleWidth = 10, ballSize = 10;
let playerScore = 0, computerScore = 0;
const player = { x: 0, y: canvas.height / 2 - paddleHeight / 2, score: 0 };
const computer = { x: canvas.width - paddleWidth, y: canvas.height / 2 - paddleHeight / 2, score: 0 };
const ball = { x: canvas.width / 2, y: canvas.height / 2, vx: 5, vy: 5 };
// Draw functions
function drawRect(x, y, width, height, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
function drawCircle(x, y, radius, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}
function drawText(text, x, y, color) {
ctx.fillStyle = color;
ctx.font = "20px Arial";
ctx.fillText(text, x, y);
}
// Update game objects
function update() {
// Move ball
ball.x += ball.vx;
ball.y += ball.vy;
// Ball collision with top and bottom walls
if (ball.y <= 0 || ball.y + ballSize >= canvas.height) ball.vy *= -1;
// Ball collision with paddles
if (ball.x <= player.x + paddleWidth && ball.y >= player.y && ball.y <= player.y + paddleHeight) {
ball.vx *= -1;
}
if (ball.x + ballSize >= computer.x && ball.y >= computer.y && ball.y <= computer.y + paddleHeight) {
ball.vx *= -1;
}
// Ball reset and scoring
if (ball.x <= 0) {
computerScore++;
resetBall();
}
if (ball.x + ballSize >= canvas.width) {
playerScore++;
resetBall();
}
// Computer AI movement
computer.y += (ball.y - (computer.y + paddleHeight / 2)) * 0.1;
}
function resetBall() {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.vx = -ball.vx;
}
// Game loop
function gameLoop() {
drawRect(0, 0, canvas.width, canvas.height, "#333");
drawText(`Player: ${playerScore}`, 20, 20, "white");
drawText(`Computer: ${computerScore}`, canvas.width - 150, 20, "white");
drawRect(player.x, player.y, paddleWidth, paddleHeight, "white");
drawRect(computer.x, computer.y, paddleWidth, paddleHeight, "white");
drawCircle(ball.x, ball.y, ballSize, "white");
update();
requestAnimationFrame(gameLoop);
}
// Player control
canvas.addEventListener('mousemove', (event) => {
const rect = canvas.getBoundingClientRect();
player.y = event.clientY - rect.top - paddleHeight / 2;
});
gameLoop();
</script>
</body>
</html>
Creating a simple Pong game using PHP involves combining PHP with HTML5 Canvas and JavaScript for real-time game mechanics, as PHP is a server-side language. Below is an example of how to structure your files for this purpose:
index.php
This file will serve as the main game page and handle any server-side logic if needed.
How It Works
- Canvas Element: HTML5 Canvas is used for rendering the game graphics.
- Game Loop: The game runs using
requestAnimationFrame for smooth animations.
- Player Control: Mouse movement controls the player paddle.
- Computer AI: A simple AI makes the computer paddle follow the ball.
- Collision Detection: Ensures the ball bounces off paddles and walls correctly.
- Scoring: Tracks and displays player and computer scores.
To Run the Game
- Save the code as
index.php in your server's web directory.
- Open the page in a web browser using your local or online server.
Enjoy your Pong game! Let me know if you need any modifications or enhancements.