دليل شامل لصناعة لعبة عجلة الحظ التفاعلية بـ HTML، CSS، و JavaScript
تعد لعبة عجلة الحظ من الألعاب الكلاسيكية المحبوبة التي تستخدم في العديد من الفعاليات والمسابقات والأنشطة الترفيهية. بفضل التقنيات الحديثة، أصبح من الممكن إنشاء نسخة رقمية تفاعلية من هذه اللعبة باستخدام HTML و CSS و JavaScript. في هذا الدليل الشامل، سنستعرض خطوات مفصلة لصناعة لعبة عجلة الحظ الخاصة بك، مع شرح الكود وتوضيح المفاهيم الأساسية.
المتطلبات الأساسية
قبل البدء في صناعة اللعبة، تأكد من أن لديك المعرفة الأساسية بالتقنيات التالية:
- HTML: لإنشاء الهيكل الأساسي للصفحة وعناصر اللعبة.
- CSS: لتصميم وتنسيق شكل العجلة ومكوناتها.
- JavaScript: لإضافة وظائف التفاعل والتحكم في دوران العجلة وتحديد النتائج.
كما ستحتاج إلى محرر نصوص (مثل VS Code, Sublime Text, Atom) ومتصفح ويب (مثل Chrome, Firefox, Safari) لاختبار اللعبة.
الخطوة الأولى: إنشاء هيكل HTML
أولاً، قم بإنشاء ملف HTML جديد وقم بتضمين الهيكل الأساسي للصفحة:
html
شرح الكود:
<!DOCTYPE html>: تعريف نوع المستند كـ HTML5.<html lang="ar" dir="rtl">: تعريف اللغة العربية واتجاه الكتابة من اليمين إلى اليسار.<head>: يحتوي على معلومات حول الصفحة مثل العنوان وتضمين ملف CSS.<title>: عنوان الصفحة الذي يظهر في شريط العنوان للمتصفح.<link rel="stylesheet" href="style.css">: ربط ملف CSS لتصميم الصفحة.<body>: يحتوي على محتوى الصفحة المرئي.<div class="container">: حاوية رئيسية لعناصر اللعبة.<div class="wheel-container">: حاوية لعجلة الحظ والمؤشر.<canvas id="wheel" width="500" height="500">: عنصر Canvas الذي سيتم رسم العجلة عليه باستخدام JavaScript. يتم تحديد عرض وارتفاع العجلة هنا.<img src="pointer.png" alt="المؤشر" id="pointer">: صورة المؤشر الذي يشير إلى الجائزة الفائزة. تحتاج إلى استبدال `pointer.png` بمسار الصورة الخاصة بك.<button id="spin-button">: زر لبدء تدوير العجلة.<p id="result">: عنصر لعرض نتيجة اللعبة.<script src="script.js">: ربط ملف JavaScript الذي يحتوي على منطق اللعبة.
الخطوة الثانية: تصميم العجلة باستخدام CSS
بعد إنشاء هيكل HTML، قم بإنشاء ملف CSS باسم `style.css` وقم بتضمين الأنماط التالية لتصميم العجلة:
css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
direction: rtl;
}
.container {
text-align: center;
}
.wheel-container {
position: relative;
}
#wheel {
border: 2px solid #333;
border-radius: 50%;
transition: transform 3s ease-in-out;
}
#pointer {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
margin-left: -15px;
margin-top: -15px;
z-index: 1;
}
#spin-button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
شرح الكود:
body: تنسيق عام للصفحة، بما في ذلك تحديد نوع الخط، وتوسيط المحتوى، وتعيين لون الخلفية، وتحديد اتجاه النص من اليمين إلى اليسار..container: تنسيق الحاوية الرئيسية، بما في ذلك توسيط النص..wheel-container: تنسيق حاوية العجلة، وتحديد الموضع النسبي للسماح بوضع المؤشر بشكل مطلق بالنسبة للعجلة.#wheel: تنسيق عنصر Canvas الذي يمثل العجلة، بما في ذلك إضافة حدود دائرية وتحديد تأثير الانتقال عند الدوران. خاصية `transition` تحدد المدة الزمنية لتأثير الدوران (`transform`) ونوع الحركة (`ease-in-out`).#pointer: تنسيق صورة المؤشر، بما في ذلك تحديد الموضع المطلق في منتصف العجلة وتعديل الإزاحة لضمان التمركز الدقيق.#spin-button: تنسيق زر التدوير، بما في ذلك تحديد الهوامش والحجم واللون والخلفية وتأثير المؤشر عند التحويم.#result: تنسيق عنصر عرض النتيجة، بما في ذلك تحديد الهوامش والحجم والوزن.
الخطوة الثالثة: إضافة وظائف التفاعل باستخدام JavaScript
الآن، قم بإنشاء ملف JavaScript باسم `script.js` وقم بتضمين الكود التالي لإضافة وظائف التفاعل والتحكم في دوران العجلة وتحديد النتائج:
javascript
const wheel = document.getElementById(“wheel”);
const spinButton = document.getElementById(“spin-button”);
const resultElement = document.getElementById(“result”);
let rotation = 0;
let spinning = false;
// بيانات الجوائز
const prizes = [
“جائزة 1”,
“جائزة 2”,
“جائزة 3”,
“جائزة 4”,
“جائزة 5”,
“جائزة 6”,
“جائزة 7”,
“جائزة 8”
];
const numberOfPrizes = prizes.length;
const degreePerPrize = 360 / numberOfPrizes;
// دالة لرسم العجلة
function drawWheel() {
const canvas = wheel.getContext(“2d”);
const width = wheel.width;
const height = wheel.height;
const centerX = width / 2;
const centerY = height / 2;
const radius = Math.min(centerX, centerY) – 10;
canvas.clearRect(0, 0, width, height);
for (let i = 0; i < numberOfPrizes; i++) {
const startAngle = i * degreePerPrize * Math.PI / 180;
const endAngle = (i + 1) * degreePerPrize * Math.PI / 180; canvas.beginPath();
canvas.moveTo(centerX, centerY);
canvas.arc(centerX, centerY, radius, startAngle, endAngle);
canvas.closePath(); // تحديد لون القطاع
canvas.fillStyle = `hsl(${(i * (360 / numberOfPrizes))}, 70%, 50%)`;
canvas.fill(); // كتابة اسم الجائزة
canvas.fillStyle = "white";
canvas.font = "bold 20px Arial";
canvas.textAlign = "center";
canvas.textBaseline = "middle";
const textAngle = (startAngle + endAngle) / 2;
canvas.save();
canvas.translate(centerX + radius * 0.7 * Math.cos(textAngle), centerY + radius * 0.7 * Math.sin(textAngle));
canvas.rotate(textAngle + Math.PI / 2);
canvas.fillText(prizes[i], 0, 0);
canvas.restore();
}
} // دالة لتدوير العجلة
function spinWheel() {
if (spinning) return; spinning = true;
const randomDegree = Math.floor(Math.random() * 360) + 360 * 5; // إضافة عدد من الدورات لضمان دوران كامل rotation += randomDegree; wheel.style.transition = "transform 5s cubic-bezier(0.23, 1, 0.320, 1)";
wheel.style.transform = `rotate(${rotation}deg)`; wheel.addEventListener("transitionend", () => {
spinning = false;
wheel.style.transition = “none”;
const actualRotation = rotation % 360;
const winningIndex = Math.floor((360 – actualRotation) / degreePerPrize);
const winningPrize = prizes[winningIndex];
resultElement.textContent = `مبروك! لقد فزت بـ: ${winningPrize}`;
});
}
// رسم العجلة عند تحميل الصفحة
drawWheel();
// ربط حدث النقر بالزر
spinButton.addEventListener(“click”, spinWheel);
شرح الكود:
const wheel = ...: الحصول على عناصر HTML من خلال معرفاتها.let rotation = 0;: متغير لتتبع زاوية دوران العجلة.let spinning = false;: متغير لتحديد ما إذا كانت العجلة تدور حاليًا.const prizes = [...]: مصفوفة تحتوي على أسماء الجوائز. يمكنك تعديل هذه المصفوفة لتضمين الجوائز التي تريدها.const numberOfPrizes = prizes.length;: عدد الجوائز.const degreePerPrize = 360 / numberOfPrizes;: حساب الزاوية التي يمثلها كل قطاع جائزة.drawWheel(): دالة لرسم العجلة على عنصر Canvas.- تحصل على سياق الرسم ثنائي الأبعاد (2D) من عنصر Canvas.
- تحسب مركز العجلة ونصف القطر.
- تمسح محتوى Canvas.
- تكرر على عدد الجوائز لرسم كل قطاع:
- تحسب زاوية البداية والنهاية لكل قطاع.
- ترسم قوسًا يمثل القطاع.
- تحدد لون القطاع باستخدام `hsl()` (Hue, Saturation, Lightness) لإنشاء ألوان متناسقة.
- تعبئ القطاع باللون المحدد.
- تكتب اسم الجائزة داخل القطاع.
spinWheel(): دالة لتدوير العجلة.- تتحقق مما إذا كانت العجلة تدور بالفعل. إذا كانت تدور، تخرج من الدالة.
- تحدد زاوية دوران عشوائية وتضيفها إلى زاوية الدوران الحالية. إضافة `360 * 5` تضمن أن العجلة ستدور لعدة دورات كاملة.
- تضيف انتقال CSS لتنعيم حركة الدوران. `cubic-bezier(0.23, 1, 0.320, 1)` يحدد نوع الحركة (easing function).
- تحدث زاوية دوران العجلة باستخدام خاصية `transform: rotate()`.
- تضيف مستمعًا لحدث `transitionend` الذي يتم تشغيله عند انتهاء انتقال CSS.
- داخل مستمع الحدث:
- تعين `spinning` إلى `false`.
- تزيل الانتقال لتهيئة العجلة للدوران التالي.
- تحسب زاوية الدوران الفعلية (باقي القسمة على 360).
- تحسب فهرس الجائزة الفائزة بناءً على زاوية الدوران الفعلية.
- تحصل على اسم الجائزة الفائزة من مصفوفة `prizes`.
- تعرض النتيجة في عنصر `resultElement`.
drawWheel();: استدعاء دالة رسم العجلة عند تحميل الصفحة.spinButton.addEventListener("click", spinWheel);: ربط حدث النقر على الزر بدالة `spinWheel`.
الخطوة الرابعة: إضافة صورة للمؤشر
قم بتنزيل أو إنشاء صورة لمؤشر العجلة (مثل سهم) واحفظها باسم `pointer.png` (أو أي اسم آخر تفضله). تأكد من وضع الصورة في نفس المجلد الذي يحتوي على ملفات HTML و CSS و JavaScript. إذا استخدمت اسمًا مختلفًا للصورة، قم بتحديث مسار الصورة في عنصر <img> في ملف HTML.
الخطوة الخامسة: تخصيص اللعبة
بعد إنشاء اللعبة الأساسية، يمكنك تخصيصها وإضافة المزيد من الميزات، مثل:
- تغيير الجوائز: قم بتعديل مصفوفة
prizesفي ملف JavaScript لتضمين الجوائز التي تريدها. - تغيير ألوان العجلة: قم بتعديل دالة
drawWheel()في ملف JavaScript لتغيير ألوان القطاعات. - إضافة مؤثرات صوتية: قم بإضافة مؤثرات صوتية عند تدوير العجلة وعند تحديد النتيجة.
- إضافة رسوم متحركة: قم بإضافة رسوم متحركة إضافية لتحسين تجربة المستخدم.
- حفظ النتائج: قم بحفظ نتائج اللعبة في قاعدة بيانات أو في ملف محلي.
نصائح إضافية
- استخدم أدوات المطورين في المتصفح: استخدم أدوات المطورين في المتصفح (مثل Chrome DevTools) لتصحيح الأخطاء وفحص عناصر HTML و CSS و JavaScript.
- قسّم الكود إلى وحدات صغيرة: قسّم الكود إلى وحدات صغيرة وقابلة لإعادة الاستخدام لتسهيل الصيانة والتعديل.
- علّق على الكود: علّق على الكود لشرح وظيفة كل جزء وتسهيل فهمه لاحقًا.
- اختبر اللعبة على مختلف المتصفحات والأجهزة: تأكد من أن اللعبة تعمل بشكل صحيح على مختلف المتصفحات والأجهزة.
خلاصة
في هذا الدليل، استعرضنا خطوات مفصلة لصناعة لعبة عجلة الحظ التفاعلية باستخدام HTML و CSS و JavaScript. يمكنك الآن تخصيص اللعبة وإضافة المزيد من الميزات لجعلها فريدة وممتعة. تذكر أن الممارسة والتجربة هما مفتاح النجاح في تطوير الويب. حظًا سعيدًا!