Home

تطبيق عملي: لعبة تخمين الكلمة للمبتدئين باستخدام HTML وCSS وJavaScript

التفاصيل
كتب بواسطة: administrator
المجموعة: Uncategorised
الزيارات: 6

بناء لعبة Guess The Word باستخدام HTML وCSS وJavaScript

التفاصيل
كتب بواسطة: administrator
المجموعة: Uncategorised
الزيارات: 3

في هذا المشروع نتعلم كيفية بناء لعبة بسيطة وممتعة باستخدام تقنيات تطوير الويب الأساسية: 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 للتحكم في المنطق والتفاعل
 الخلاصة
لعبة “تخمين الكلمة” تعتبر مشروع ممتاز للمبتدئين لأنها:
بسيطة وسهلة الفهم
تجمع بين الثلاث تقنيات الأساسية
تعلمك التفكير البرمجي بطريقة عملية

فيديو توضيحي لبناء صفحة ويب باستخدام HTML وCSS وJavaScript

التفاصيل
كتب بواسطة: administrator
المجموعة: Uncategorised
الزيارات: 2

تطبيق عملي على تطوير الويب باستخدام HTML + CSS + JavaScript

التفاصيل
كتب بواسطة: administrator
المجموعة: Uncategorised
الزيارات: 2

أول حاجة: يعني إيه موقع ويب؟
أي موقع على الإنترنت هو عبارة عن:
شكل (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

الصفحة 1 من 7

مقال البرمجه وهندسة البرمجيات

Login Form