في هذا المشروع نتعلم كيفية بناء لعبة بسيطة وممتعة باستخدام تقنيات تطوير الويب الأساسية: HTML وCSS وJavaScript.
اللعبة تعتمد على فكرة “تخمين الكلمة” حيث يحاول المستخدم معرفة الكلمة الصحيحة من خلال إدخال الحروف.
أولًا: HTML (بناء هيكل اللعبة)
HTML هو المسؤول عن إنشاء عناصر اللعبة داخل الصفحة.
في المشروع ده هنحتاج:
عنوان اللعبة
مكان عرض الكلمة المخفية
مربع إدخال الحروف
زر لتأكيد الإجابة
رسالة نتيجة التخمين
مثال HTML:
HTML
<h1>لعبة تخمين الكلمة 🎮</h1>
<p id="word">_ _ _ _</p>
<input type="text" id="inputLetter" placeholder="اكتب حرف">
<button onclick="checkLetter()">تأكيد</button>
<p id="message"></p>
ثانيًا: CSS (تصميم اللعبة)
CSS بيخلي اللعبة شكلها جميل ومنظم.
استخدامه:
تنسيق العنوان
تكبير الكلمة
تحسين شكل الزر
جعل الصفحة أكثر جاذبية
مثال CSS:
CSS
body {
text-align: center;
font-family: Arial;
background-color: #f0f8ff;
}
h1 {
color: darkblue;
}
button {
padding: 10px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
}
ثالثًا: JavaScript (منطق اللعبة)
JavaScript هو أهم جزء لأنه بيحرك اللعبة وبيخليها تشتغل.
وظيفته:
التحقق من الحرف المدخل
تحديث الكلمة
إظهار رسالة صح أو خطأ
مثال JavaScript:
HTML
<script>
let word = "CODE";
let hidden = ["_", "_", "_", "_"];
function checkLetter() {
let letter = document.getElementById("inputLetter").value.toUpperCase();
let message = document.getElementById("message");
let found = false;
for (let i = 0; i < word.length; i++) {
if (word[i] === letter) {
hidden[i] = letter;
found = true;
}
}
document.getElementById("word").innerHTML = hidden.join(" ");
if (found) {
message.innerHTML = "✔ إجابة صحيحة!";
} else {
message.innerHTML = "❌ حاول مرة أخرى";
}
}
</script>
فكرة اللعبة بشكل بسيط
المستخدم يدخل حرف
JavaScript تقارن الحرف بالكلمة
لو صح → يظهر في مكانه
لو غلط → تظهر رسالة خطأ
الهدف من المشروع
هذا المشروع يعلمك:
التعامل مع HTML في بناء الواجهة
استخدام CSS لتجميل التصميم
استخدام JavaScript للتحكم في المنطق والتفاعل
الخلاصة
لعبة “تخمين الكلمة” تعتبر مشروع ممتاز للمبتدئين لأنها:
بسيطة وسهلة الفهم
تجمع بين الثلاث تقنيات الأساسية
تعلمك التفكير البرمجي بطريقة عملية