تطوير لعبة Ping Pong باستخدام HTML ,CSS , JavaScript
هل تعرف أنه بإمكانك تصميم لعبة فقط باستخدام HTML وCSS وJavaScript؟
نعم، هذا صحيح! يمكنك تصميم لعبة ممتعة وبسيطة مثل Ping Pong باستخدام تقنيات الويب الأساسية فقط. في هذه المقالة، سنستعرض كيف يمكنك بناء لعبة Ping Pong خطوة بخطوة باستخدام HTML وCSS وJavaScript.
يمكنك مشاهدة فيديو اللبعة اسفل الصفحة
الخطوة 1: إعداد هيكل HTML الأساسي
أولاً، سنبدأ بإنشاء هيكل HTML الأساسي للعبة. سنقوم بإنشاء لوحة اللعبة، والمضارب، والكرة.
<!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">: هذا العنصر يمثل محتوى اللعبة بأكمله، وهو يحتوي على جميع عناصر اللعبة الأخرى.
• <div id="score">: يحتوي على عناصر <div> لعرض نقاط اللاعبين (Player 1 و Player 2).
• <div id="paddle1" class="paddle"></div> و <div id="paddle2" class="paddle"></div>: هما المضربين للاعبين الأول والثاني على التوالي
• <div id="ball"></div>: هو الكرة التي ستتحرك في المضمار.
الخطوة 2: تصميم وتنسيق اللعبة باستخدام CSS
سنقوم بتنسيق العناصر باستخدام CSS لجعل اللعبة تبدو جذابة وسهلة الاستخدام.
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: ينسق الصفحة بشكل عام، مع تحديد لون الخلفية والهيكل العام للصفحة.
• #game-container: يحدد أبعاد وخلفية المضمار الرئيسي للعبة، بالإضافة إلى تأثيرات مثل الظل والحواف المستديرة.
• .paddle: يعرف تصميم المضربين باستخدام خلفية بيضاء وظلال لإضافة عمق.
• #ball: يحدد التصميم الأساسي للكرة بلون ذهبي وحواف دائرية.
الخطوة 3: إضافة التفاعل للعبة باستخدام JavaScript
أخيراً سنضيف جزء الكود الذي يدير السلوك والتفاعل في اللعبة، بما في ذلك حركة المضربين، وحركة الكرة، وتحديث النقاط.
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: تعريف المتغيرات الأساسية التي تمثل العناصر في اللعبة.
• document.addEventListener('keydown'): يتم استخدامها لالتقاط أحداث لوحة المفاتيح للتحكم في حركة المضربين.
• updateBall(): وظيفته تقوم بتحديث موقع الكرة والتحقق من التصادم مع الحوائط والمضربين وحساب النقاط
• increasePlayer1Score(), increasePlayer2Score(): تزيد النقاط لكل لاعب بناءً على حدوث هدف.
• resetBall(): تعيد موقع الكرة وتعيين اتجاهها بشكل عشوائي بعد تسجيل هدف.
• gameLoop(): تقوم بتحديث حركة الكرة بشكل متكرر باستخدام requestAnimationFrame() لإنشاء حلقة اللعب الرئيسية.
كتابة هذا النوع من التحديات سوف يساعدك على تحسين مهاراتك في حل المشكلات، بالإضافة إلى تعزيز مهاراتك البرمجية في كتابة JavaScript بدون الاعتماد على مكتبات خارجية.
إعداد: أحمد الخولي