مدرسة البرمجة العربية

✨ الأحداث في JavaScript للأطفال – الجزء الثاني: لوحة المفاتيح وألعاب صغيرة

🎉 أهلاً بكم يا أبطال!

في الجزء الأول تعلمنا كيف نخلي الماوس والأزرار تتحكم بصفحاتنا وتغيّر الألوان أو النصوص. اليوم رح ننتقل لموضوع أكثر حماساً: أحداث لوحة المفاتيح (Keyboard Events). هذه الأحداث بتخلينا نستخدم أزرار الكيبورد عشان نتحكم بالأشياء على الصفحة، مثل نصوص أو صور أو حتى مربعات متحركة. 🤩 ومو بس هيك، باستخدامها ممكن نبدأ نصمم ألعاب صغيرة مثل "تحريك لاعب" أو "جمع نقاط".

🔹 ما هي أحداث لوحة المفاتيح؟

لوحة المفاتيح مليانة أزرار، وكل زر ممكن يعمل حدث خاص فيه. في JavaScript عنا 3 أحداث رئيسية:

• keydown ⬇️: يحدث لحظة ما تضغط على زر وتبقى ضاغط عليه.
• keyup ⬆️: يحدث لما ترفع إصبعك عن الزر.
• keypress ⌨️: يحدث عند الضغط على زر واحد (لكن اليوم نستخدم keydown أكثر).

خلينا نعتبر الكيبورد مثل "ريموت كنترول" خاص فينا. كل زر فيه يرسل إشارة، وJavaScript يقرر شو يسوي مع هاي الإشارة. 🎮

🔹 أول تجربة: معرفة الزر المضغوط

جرب هذا الكود الصغير:

<script>
document.addEventListener("keydown", function(event) {
  alert("ضغطت على الزر: " + event.key);
});
</script>

الآن اضغط أي زر على الكيبورد. لو ضغطت "a" رح يظهر: "ضغطت على الزر: a". ولو ضغطت "Enter" رح يظهر: "ضغطت على الزر: Enter". بهذا الشكل JavaScript صار يقدر يسمع لأي زر نضغطه! 🕹️

🔹 التحكم في نص باستخدام الأسهم

خلينا نعمل نص بسيط ونخليه يتحرك يمين باستخدام زر السهم ➡️:

<p id="text">أنا نص يمكن تحريكه!</p>

<script>
  let text = document.getElementById("text");
  let x = 0;

  document.addEventListener("keydown", function(event) {
    if (event.key === "ArrowRight") {
      x += 10;
      text.style.transform = "translateX(" + x + "px)";
    }
  });
</script>

كل ما تضغط سهم اليمين، النص يتحرك شوي على اليمين. جرب تخلي ArrowLeft كمان يتحكم بالرجوع لليسار. هيك صار عندنا نص يتحرك بحرية!

🔹 لعبة صغيرة: تحريك مربع بالكيبورد

خلينا نطور الفكرة ونخلي مربع يتحرك بكل الاتجاهات باستخدام الأسهم. ✨

<div id="player" style="width:50px;height:50px;background:red;position:absolute;top:100px;left:100px;"></div>

<script>
  let player = document.getElementById("player");
  let topPos = 100;
  let leftPos = 100;

  document.addEventListener("keydown", function(event) {
    if (event.key === "ArrowUp") topPos -= 10;
    if (event.key === "ArrowDown") topPos += 10;
    if (event.key === "ArrowLeft") leftPos -= 10;
    if (event.key === "ArrowRight") leftPos += 10;

    player.style.top = topPos + "px";
    player.style.left = leftPos + "px";
  });
</script>

الآن صار عندنا "لاعب" مربع أحمر، نقدر نحركه يمين ويسار وفوق وتحت باستخدام الأسهم ⬆️⬇️⬅️➡️. هذا أول أساس لأي لعبة حركة! 🔥

🔹 تحسين اللعبة: ما يطلعش اللاعب برة الشاشة

ممكن يصير اللاعب يهرب برة الصفحة 😅. عشان نحل المشكلة، نضيف شرط يمنعه من الخروج:

if (event.key === "ArrowUp" && topPos > 0) topPos -= 10;
if (event.key === "ArrowDown" && topPos < window.innerHeight - 50) topPos += 10;
if (event.key === "ArrowLeft" && leftPos > 0) leftPos -= 10;
if (event.key === "ArrowRight" && leftPos < window.innerWidth - 50) leftPos += 10;

هيك اللاعب يضل داخل حدود الصفحة مهما تحركت فيه. 😉

🔹 لعبة "اجمع النقاط!"

الآن نضيف تحدي! خلينا نحط دائرة صغيرة تمثل "نقطة". كل ما يلمسها اللاعب الأحمر، تختفي وتظهر في مكان عشوائي، ونزيد النقاط. 🎯

<div id="player" style="width:50px;
height:50px;background:red;position:absolute;
top:100px;left:100px;"></div>
<div id="target" style="width:30px;height:30px;background:blue;
border-radius:50%;position:absolute;top:200px;
left:200px;"></div>
<p id="score">النقاط: 0</p>

<script>
  let player = document.getElementById("player");
  let target = document.getElementById("target");
  let score = document.getElementById("score");
  let topPos = 100, leftPos = 100, points = 0;

  document.addEventListener("keydown", function(event) {
    if (event.key === "ArrowUp") topPos -= 10;
    if (event.key === "ArrowDown") topPos += 10;
    if (event.key === "ArrowLeft") leftPos -= 10;
    if (event.key === "ArrowRight") leftPos += 10;

    player.style.top = topPos + "px";
    player.style.left = leftPos + "px";

    // فحص الاصطدام
    let playerRect = player.getBoundingClientRect();
    let targetRect = target.getBoundingClientRect();

    if (!(playerRect.right < targetRect.left ||
          playerRect.left > targetRect.right ||
          playerRect.bottom < targetRect.top ||
          playerRect.top > targetRect.bottom)) {
      
      points++;
      score.innerHTML = "النقاط: " + points;
      
      // ضع الهدف في مكان عشوائي
      target.style.top = Math.random() * (window.innerHeight - 50) + "px";
      target.style.left = Math.random() * (window.innerWidth - 50) + "px";
    }
  });
</script>

الآن عندك لعبة بسيطة: تحرك المربع الأحمر واجمع النقاط الزرقاء. كل نقطة جديدة تزيد العداد! 🎉 ممكن تضيف تحدي مع الوقت أو حدود للحركة.

🔹 ليش أحداث الكيبورد ممتعة؟

الكيبورد يعطينا سيطرة كاملة. بدل ما نعتمد بس على الضغط بالفأرة، صار كل زر على الكيبورد ممكن يكون "سلاح" أو "أداة" داخل اللعبة. مثلاً:

• زر Space يطلق رصاصة 🚀
• زر P يوقف اللعبة ⏸️
• زر R يعيد اللعبة 🔄

🔹 تحديات إضافية لك

إذا فهمت الدرس، جرب هذه الأفكار بنفسك:

• خلي المربع يغيّر لونه كل ما يضغط اللاعب على زر مختلف.
• أضف أكثر من "نقطة" للتجميع.
• خلي المربع يكبر شوي كل مرة يجمع نقطة.
• أضف عداد للوقت، ولازم اللاعب يجمع أكبر عدد ممكن من النقاط قبل انتهاء الوقت ⏱️.

✨ الخلاصة

في هذا الدرس الطويل تعلمنا:

• ما هي أحداث الكيبورد.
• استخدام keydown لمعرفة الزر المضغوط.
• تحريك النصوص باستخدام الأسهم.
• تحريك مربع في جميع الاتجاهات.
• لعبة تجميع النقاط باستخدام الاصطدام.

الآن عندك مهارة جديدة: التحكم بالصفحة من خلال لوحة المفاتيح! ✨ وفي المرات الجاية رح نتعلم كيف ندمج الأحداث مع DOM عشان نصنع مواقع وألعاب أكثر إبداع. 🚀