كيفية إنشاء لعبة أسئلة تفاعلية باستخدام JavaScript: دليل خطوة بخطوة

تعد الألعاب التفاعلية وسيلة رائعة لتعلم البرمجة بطريقة عملية وممتعة. في هذا المقال، سنتعلم كيفية إنشاء لعبة أسئلة تفاعلية باستخدام لغة JavaScript. سنمر بجميع الخطوات المطلوبة، بدءًا من كتابة الكود الأساسي وحتى تحسين تجربة المستخدم.

الخطوة الأولى: بناء الهيكل الأساسي للعبة

سنبدأ بإنشاء ملف HTML يحتوي على العناصر الأساسية للعبة مثل الأسئلة، الأزرار، ومنطقة لعرض النتيجة.









  

  

  لعبة الأسئلة

  





  لعبة الأسئلة التفاعلية

الخطوة الثانية: كتابة الأكواد الخاصة باللعبة

في هذه الخطوة، سنقوم بإنشاء ملف JavaScript لإضافة الأسئلة والإجابات وطريقة التفاعل معها. قم بإنشاء ملف باسم script.js وأضف الكود التالي:



const questions = [

  {

    question: "ما هي لغة البرمجة التي تُستخدم لتطوير الواجهات الأمامية للويب؟",

    answers: ["Python", "JavaScript", "C++", "Java"],

    correct: 1

  },

  {

    question: "ما هو بروتوكول نقل النص التشعبي؟",

    answers: ["FTP", "HTTP", "SMTP", "DNS"],

    correct: 1

  },

  {

    question: "ما هي لغة تصميم الصفحات؟",

    answers: ["HTML", "CSS", "JavaScript", "SQL"],

    correct: 1

  }

];

let currentQuestion = 0;

let score = 0;

function loadQuestion() {

  const questionElement = document.getElementById("question");

  const buttons = document.querySelectorAll("#quiz-container button");

  questionElement.textContent = questions[currentQuestion].question;

  buttons.forEach((btn, index) => {

    btn.textContent = questions[currentQuestion].answers[index];

  });

}

function checkAnswer(answer) {

  if (answer === questions[currentQuestion].correct) {

    score++;

    alert("إجابة صحيحة!");

  } else {

    alert("إجابة خاطئة!");

  }

  currentQuestion++;

  if (currentQuestion < questions.length) {

    loadQuestion();

  } else {

    document.getElementById("quiz-container").style.display = "none";

    document.getElementById("score").textContent = `النتيجة: ${score}/${questions.length}`;

  }

}

window.onload = loadQuestion;

الخطوة الثالثة: تحسين واجهة المستخدم

لجعل اللعبة أكثر جاذبية، أضف ملف CSS لتحسين التصميم. قم بإنشاء ملف باسم styles.css وأضف الأكواد التالية:



body {

  font-family: Arial, sans-serif;

  text-align: center;

  background-color: #f4f4f4;

  margin: 0;

  padding: 20px;

}

h1 {

  color: #333;

}

#quiz-container {

  background: #fff;

  padding: 20px;

  margin: 20px auto;

  max-width: 600px;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

button {

  display: block;

  margin: 10px auto;

  padding: 10px 20px;

  font-size: 16px;

  border: none;

  border-radius: 5px;

  background: #007BFF;

  color: #fff;

  cursor: pointer;

}

button:hover {

  background: #0056b3;

}

#score {

  font-size: 18px;

  margin-top: 20px;

  color: #555;

}

الخطوة الرابعة: إضافة ميزات إضافية

يمكنك تحسين اللعبة بإضافة ميزات مثل:

مؤقت زمني لكل سؤال.
مستويات صعوبة مختلفة.
إضافة صوتيات أو رسومات لتعزيز تجربة المستخدم.

الخاتمة

لقد تعلمنا في هذا المقال كيفية إنشاء لعبة أسئلة تفاعلية باستخدام JavaScript. يمكنك استخدام هذه الأساسيات لإنشاء ألعاب أكثر تعقيدًا وجاذبية. البرمجة ليست مجرد كتابة أكواد؛ إنها فن لتحويل الأفكار إلى تجارب ممتعة للمستخدمين. استمتع بالبرمجة!

هاي اكس

أخر أعمالنا

كيفية إنشاء لعبة أسئلة تفاعلية باستخدام JavaScript: دليل خطوة بخطوة