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

⏰ المؤقت السحري – تعلم setTimeout للأطفال

---

🎉 مرحباً يا أبطال البرمجة!

هل جربت مرة أن تنتظر العد التنازلي قبل بدء لعبة؟ ⏳ أو مؤقت يخبرك أن الطعام جاهز بعد 5 دقائق؟ في البرمجة لدينا أداة رائعة تشبه ساعة سحرية تجعل الكمبيوتر ينتظر قليلاً ثم يقوم بشيء معين. هذه الأداة اسمها setTimeout.

---

🔎 ما هي setTimeout؟

setTimeout هي دالة (function) في JavaScript تجعل الكمبيوتر ينتظر وقتاً معيناً (بالملّي ثانية)، ثم ينفذ ما نطلبه. - الملّي ثانية = جزء من الثانية. - 1000 ملّي ثانية = 1 ثانية ⏱️.

الصيغة الأساسية:

setTimeout(function() {
    // الكود الذي نريد تنفيذه بعد الانتظار
}, الوقت_بالملّي_ثانية);

---

👋 مثال بسيط

لنكتب رسالة بعد 3 ثوانٍ:

setTimeout(function() {
    alert("مرحباً بعد 3 ثوانٍ!");
}, 3000);

الكمبيوتر سينتظر 3 ثوانٍ ثم يظهر نافذة تقول: "مرحباً بعد 3 ثوانٍ!".

---

📝 تغيير النص بعد وقت

لنغيّر نصاً في الصفحة بعد 2 ثانية:

<p id="msg">انتظر قليلاً...</p>

<script>
setTimeout(function() {
    document.getElementById("msg").textContent = "تم التغيير! 🎉";
}, 2000);
</script>

في البداية سترى "انتظر قليلاً..." ثم بعد ثانيتين ستتحول إلى "تم التغيير! 🎉".

---

🎨 تغيير الألوان باستخدام setTimeout

يمكننا تغيير لون الخلفية بعد وقت معين، وكأنها مفاجأة!

<button id="colorBtn">غيّر اللون بعد 2 ثانية</button>

<script>
document.getElementById("colorBtn").addEventListener("click", function() {
    setTimeout(function() {
        document.body.style.backgroundColor = "lightgreen";
    }, 2000);
});
</script>

عند الضغط على الزر، لن يتغير اللون مباشرة، بل بعد ثانيتين. ⌛

---

🎮 لعبة صغيرة – بالون ينفجر بعد وقت

لنصنع بالون 🎈 يظهر ثم ينفجر بعد 5 ثوانٍ إذا لم تضغط عليه!

<div id="gameArea" style="height:200px; border:1px solid black;"></div>
<button id="addBalloonBtn">أضف بالون 🎈</button>

<script>
document.getElementById("addBalloonBtn").addEventListener("click", function() {
    let balloon = document.createElement("span");
    balloon.textContent = "🎈";
    balloon.style.fontSize = "40px";
    balloon.style.margin = "10px";

    document.getElementById("gameArea").appendChild(balloon);

    // إذا لم يضغط الطفل على البالون خلال 5 ثوانٍ، ينفجر!
    let timer = setTimeout(function() {
        balloon.textContent = "💥"; // انفجار
    }, 5000);

    // إذا ضغط اللاعب على البالون قبل الوقت
    balloon.addEventListener("click", function() {
        clearTimeout(timer); // إلغاء المؤقت
        balloon.remove(); // إزالة البالون
    });
});
</script>

جرّب أن تنقر بسرعة على البالون قبل أن ينفجر! ⚡

---

📖 استخدام clearTimeout

أحياناً نريد إلغاء المؤقت قبل أن ينفذ. مثال: مؤقت لعرض رسالة بعد 4 ثوانٍ، لكن إذا ضغطنا زر "إلغاء" قبلها، فلن تظهر الرسالة.

<button id="startBtn">ابدأ المؤقت</button>
<button id="cancelBtn">إلغاء المؤقت</button>

<script>
let timer;

document.getElementById("startBtn").addEventListener("click", function() {
    timer = setTimeout(function() {
        alert("انتهى الوقت!");
    }, 4000);
});

document.getElementById("cancelBtn").addEventListener("click", function() {
    clearTimeout(timer);
    alert("تم إلغاء المؤقت! ❌");
});
</script>

بهذا الشكل يستطيع الطفل تجربة كيف يمكن إلغاء المؤقت قبل أن يعمل.

---

🎲 لعبة "من الأسرع؟"

في هذه اللعبة، سيظهر زر بعد 3 ثوانٍ، ويجب أن تضغط عليه بسرعة. كلما ضغطت أسرع، كانت نتيجتك أفضل.

<button id="startGame">ابدأ اللعبة</button>
<p id="gameMsg"></p>

<script>
let startTime;

document.getElementById("startGame").addEventListener("click", function() {
    document.getElementById("gameMsg").textContent = "انتظر...";
    
    setTimeout(function() {
        document.getElementById("gameMsg").innerHTML = "<button id='clickMe'>اضغط الآن!</button>";
        startTime = Date.now();

        document.getElementById("clickMe").addEventListener("click", function() {
            let reactionTime = (Date.now() - startTime) / 1000;
            document.getElementById("gameMsg").textContent = "وقت رد فعلك: " + reactionTime + " ثانية! 🏆";
        });
    }, 3000);
});
</script>

هذه اللعبة تعلم الأطفال الصبر والسرعة في نفس الوقت! 😄

---

⏳ لعبة "العد التنازلي السريع"

في هذه اللعبة، سيبدأ عداد تنازلي من 5، وعليك أن تضغط على الزر قبل أن يصل إلى الصفر! إذا ضغطت في الوقت المناسب تربح، وإذا تأخرت تخسر.

<button id="startCountdown">ابدأ اللعبة</button>
<p id="countdownMsg"></p>

<script>
document.getElementById("startCountdown").addEventListener("click", function() {
    let time = 5;
    document.getElementById("countdownMsg").innerHTML = 
        "⏳ الوقت المتبقي: " + time + " ثوانٍ <br><button id='pressBtn'>اضغط الآن!</button>";

    let interval = setInterval(function() {
        time--;
        document.getElementById("countdownMsg").innerHTML = 
            "⏳ الوقت المتبقي: " + time + " ثوانٍ <br><button id='pressBtn'>اضغط الآن!</button>";

        if (time === 0) {
            clearInterval(interval);
            document.getElementById("countdownMsg").textContent = "😢 انتهى الوقت! خسرت.";
        }
    }, 1000);

    document.addEventListener("click", function handler(e) {
        if (e.target.id === "pressBtn") {
            clearInterval(interval);
            document.getElementById("countdownMsg").textContent = "🎉 رائع! ضغطت قبل انتهاء الوقت!";
            document.removeEventListener("click", handler);
        }
    });
});
</script>

اللعبة تختبر سرعة استجابتك في 5 ثوانٍ فقط! ⚡

---

🎯 لعبة "اضغط الهدف"

في هذه اللعبة، سيظهر هدف 🎯 في مكان عشوائي بعد وقت قصير، وعليك أن تضغط عليه بسرعة. كلما كنت أسرع، كانت نتيجتك أفضل!

<button id="startTarget">ابدأ اللعبة</button>
<div id="targetArea" style="height:200px; border:1px solid black; position:relative;"></div>
<p id="targetMsg"></p>

<script>
let appearTime;

document.getElementById("startTarget").addEventListener("click", function() {
    document.getElementById("targetMsg").textContent = "⏳ انتظر قليلاً...";
    document.getElementById("targetArea").innerHTML = "";

    setTimeout(function() {
        let target = document.createElement("div");
        target.textContent = "🎯";
        target.style.position = "absolute";
        target.style.left = Math.random() * 150 + "px";
        target.style.top = Math.random() * 150 + "px";
        target.style.fontSize = "40px";
        document.getElementById("targetArea").appendChild(target);

        appearTime = Date.now();

        target.addEventListener("click", function() {
            let reaction = (Date.now() - appearTime) / 1000;
            document.getElementById("targetMsg").textContent = 
                "🏆 أصبت الهدف في " + reaction + " ثانية!";
            target.remove();
        });
    }, 2000); // الهدف يظهر بعد ثانيتين
});
</script>

هل تستطيع إصابة الهدف بسرعة البرق؟ ⚡🎯

💡 أفكار ممتعة لتجربة setTimeout

• اعمل عد تنازلي من 5 إلى 1 قبل بدء لعبة.
• أظهر مفاجأة (صورة أو كلمة) بعد ثوانٍ معينة.
• استخدم clearTimeout لإلغاء حدث إذا تغيّرت الظروف.
• اجعل عدة مؤقتات تعمل معاً لعمل قصة أو تسلسل أحداث.

---

📝 الخلاصة

- setTimeout تجعل الكمبيوتر ينتظر وقتاً ثم ينفذ كود معين.
- الوقت يُكتب بالملّي ثانية (1000 = ثانية واحدة).
- يمكن استخدام clearTimeout لإلغاء المؤقت قبل عمله.
- باستخدام setTimeout يمكننا صنع ألعاب ممتعة مثل انفجار البالونات أو ألعاب السرعة.
- هذه الأداة تشبه "سحر الوقت" 🪄 تجعل ألعابك أكثر تشويقاً وتفاعلاً! 🚀