Uncategorised
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 7
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 4
في هذا المشروع نتعلم كيفية بناء لعبة بسيطة وممتعة باستخدام تقنيات تطوير الويب الأساسية: 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 للتحكم في المنطق والتفاعل
الخلاصة
لعبة “تخمين الكلمة” تعتبر مشروع ممتاز للمبتدئين لأنها:
بسيطة وسهلة الفهم
تجمع بين الثلاث تقنيات الأساسية
تعلمك التفكير البرمجي بطريقة عملية
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 3
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 3
أول حاجة: يعني إيه موقع ويب؟
أي موقع على الإنترنت هو عبارة عن:
شكل (Design)
محتوى (Text / Images)
حركة وتفاعل (Interactivity)
والتلات حاجات دول بيتقسموا على 3 لغات:
الجزء
اللغة
وظيفته
المحتوى
HTML
بناء الصفحة
الشكل
CSS
تصميم الصفحة
التفاعل
JavaScript
تشغيل الصفحة
أولًا: HTML (الأساس اللي بيتبني عليه كل حاجة)
HTML هي إيه؟
هي لغة بتستخدم عشان “نبني الصفحة” زي ما بنبني بيت.
بتعمل إيه؟
HTML بتحدد:
العناوين (Headings)
الفقرات (Paragraphs)
الصور (Images)
الروابط (Links)
الأزرار (Buttons)
النماذج (Forms)
مثال صفحة HTML بسيطة:
HTML
<!DOCTYPE html>
<html>
<head>
<title>أول موقع لي</title>
</head>
<body>
<h1>مرحبًا بيكي </h1>
<p>دي أول صفحة HTML</p>
<img src="/image.jpg" alt="صورة">
<button>اضغط هنا</button>
</body>
</html>
شرح مهم:
<h1> = عنوان كبير
<p> = فقرة
<img> = صورة
<button> = زرار
يعني HTML = “العظم” أو الهيكل الأساسي للموقع
ثانيًا: CSS (الشكل والتصميم)
CSS هي إيه؟
هي اللغة اللي بتخلي الموقع شكله جميل ومرتب.
بتعمل إيه؟
ألوان
خطوط
أحجام
مسافات
ترتيب العناصر
تأثيرات (Shadow, Hover)
مثال CSS:
CSS
body {
background-color: #f5f5f5;
font-family: Arial;
}
h1 {
color: darkblue;
text-align: center;
}
button {
background-color: green;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
شرح بسيط:
background-color = لون الخلفية
color = لون النص
padding = مسافة داخل العنصر
text-align = محاذاة النص
CSS = “الديكور والشكل الخارجي”
ثالثًا: JavaScript (العقل والحركة)
JavaScript هي إيه؟
هي اللي بتخلي الموقع “يتحرك ويتفاعل”.
بتعمل إيه؟
تغير محتوى الصفحة
تتعامل مع الأزرار
تعمل تنبيهات
تتحقق من البيانات
تعمل تطبيقات كاملة
مثال بسيط:
HTML
<button onclick="changeText()">اضغط هنا</button>
<p id="text">النص قبل التغيير</p>
<script>
function changeText() {
document.getElementById("text").innerHTML = "تم التغيير ";
}
</script>
شرح:
onclick = لما تضغط على الزر
function = وظيفة أو أمر
getElementById = يجيب عنصر من الصفحة
innerHTML = يغير النص
JavaScript = “العقل اللي بيشغل الموقع”
التلاتة مع بعض بيعملوا إيه؟
مثال حقيقي:
لو عندك زرار:
HTML:
بيعمل الزرار نفسه
CSS:
يخليه شكله حلو
JavaScript:
يخليه يشتغل لما تدوسي عليه
مثال مشروع كامل (مهم جدًا)
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: Arial;
background-color: #f0f0f0;
}
button {
padding: 10px;
background-color: blue;
color: white;
border: none;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>مشروعي الأول 🚀</h1>
<p id="msg">اضغطي على الزر</p>
<button onclick="changeMessage()">اضغط هنا</button>
<script>
function changeMessage() {
document.getElementById("msg").innerHTML = "تم التغيير بنجاح ";
}
</script>
</body>
</html>
الخلاصة الكبيرة
أي موقع في العالم قائم على:
HTML = بناء
CSS = شكل
JavaScript = تفاعل
نصيحة مهمة جدًا
لو عايزة تبقي مطورة ويب:
ابدئي بـ HTML
بعده CSS
بعده JavaScript