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

🌈 التحكم في الصفحة بـ JavaScript – DOM وManipulation (الجزء الثاني)

---

🎊 أهلاً بكم من جديد يا أبطال!

في الجزء الأول تعلمنا كيف نغيّر النصوص، الصور، ونضيف أو نحذف عناصر في الصفحة باستخدام DOM. اليوم في الجزء الثاني، سنذهب لمستوى أمتع: سنتعلم كيف نضيف حركات (Animations)، نلوّن الأزرار والخلفيات، ونصنع لعبة صغيرة فيها مفاجآت! 🚀

---

🎨 تغيير ألوان الصفحة

هل جربت أن تجعل صفحتك مثل لوحة رسم؟ لنغيّر لون خلفية الصفحة عند الضغط على زر:

let colorBtn = document.getElementById("colorBtn");

colorBtn.addEventListener("click", function() {
    document.body.style.backgroundColor = "lightblue";
});

يمكنك أن تجعل الألوان عشوائية! 😍

function getRandomColor() {
    let colors = ["pink", "lightgreen", "lightyellow", "lightblue", "lavender"];
    let randomIndex = Math.floor(Math.random() * colors.length);
    return colors[randomIndex];
}

document.getElementById("colorBtn").addEventListener("click", function() {
    document.body.style.backgroundColor = getRandomColor();
});

---

✨ تحريك العناصر

لنحرك مربعاً صغيراً يمشي في الصفحة:

let box = document.getElementById("box");
let position = 0;

document.getElementById("moveBtn").addEventListener("click", function() {
    position += 20; // يتحرك 20 بكسل
    box.style.left = position + "px";
});

وتحتاج أن تجعل المربع position: relative أو absolute في CSS.

---

💡 إظهار وإخفاء العناصر

يمكنك جعل صورة تختفي وتظهر عند الضغط على زر:

let img = document.getElementById("myImg");

document.getElementById("hideBtn").addEventListener("click", function() {
    img.style.display = "none"; // إخفاء
});

document.getElementById("showBtn").addEventListener("click", function() {
    img.style.display = "block"; // إظهار
});

---

🎮 لعبة "البالونات الطائرة"

لنصنع لعبة بسيطة: بالونات تظهر وعليك أن تنقر عليها لتختفي!

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

<script>
document.getElementById("addBalloonBtn").addEventListener("click", function() {
    let balloon = document.createElement("div");
    balloon.textContent = "🎈";
    balloon.style.position = "absolute";
    balloon.style.left = Math.random() * 250 + "px"; // مكان عشوائي
    balloon.style.top = Math.random() * 250 + "px";
    balloon.style.fontSize = "30px";

    // عند النقر على البالون يختفي
    balloon.addEventListener("click", function() {
        balloon.remove();
    });

    document.getElementById("gameArea").appendChild(balloon);
});
</script>

كل مرة تضغط الزر، سيظهر بالون جديد في مكان عشوائي. حاول النقر عليه بسرعة! 😃

---

🍪 لعبة "التقاط الكوكيز"

في هذه اللعبة ستظهر كوكيز عشوائية على الشاشة، وعليك أن تنقر عليها لتجمع النقاط!

<div id="cookieArea" style="height:300px; border:1px solid brown; position:relative;"></div>
<button id="addCookieBtn">أضف كوكيز 🍪</button>
<p>النقاط: <span id="score">0</span></p>

<script>
let score = 0;

document.getElementById("addCookieBtn").addEventListener("click", function() {
    let cookie = document.createElement("div");
    cookie.textContent = "🍪";
    cookie.style.position = "absolute";
    cookie.style.left = Math.random() * 250 + "px";
    cookie.style.top = Math.random() * 250 + "px";
    cookie.style.fontSize = "30px";

    cookie.addEventListener("click", function() {
        cookie.remove();
        score++;
        document.getElementById("score").textContent = score;
    });

    document.getElementById("cookieArea").appendChild(cookie);
});
</script>

اضغط على الكوكيز بسرعة واجمع أكبر عدد ممكن من النقاط! 🏆

---

🌟 لعبة "النجمة السحرية"

في هذه اللعبة ستظهر نجوم في أماكن عشوائية، لكن هناك نجمة سحرية ✨ إذا نقرت عليها ستحصل على 5 نقاط دفعة واحدة!

<div id="starArea" style="height:300px; border:1px solid blue; position:relative;"></div>
<button id="addStarBtn">أضف نجمة ⭐</button>
<p>النقاط: <span id="starScore">0</span></p>

<script>
let starScore = 0;

document.getElementById("addStarBtn").addEventListener("click", function() {
    let star = document.createElement("div");

    // احتمال 20% أن تكون النجمة سحرية ✨
    if (Math.random() < 0.2) {
        star.textContent = "✨";
        star.dataset.magic = "true";
    } else {
        star.textContent = "⭐";
    }

    star.style.position = "absolute";
    star.style.left = Math.random() * 250 + "px";
    star.style.top = Math.random() * 250 + "px";
    star.style.fontSize = "30px";

    star.addEventListener("click", function() {
        if (star.dataset.magic) {
            starScore += 5; // نجمة سحرية
        } else {
            starScore++;
        }
        document.getElementById("starScore").textContent = starScore;
        star.remove();
    });

    document.getElementById("starArea").appendChild(star);
});
</script>

---

احذر! ليست كل النجوم متساوية. حاول العثور على النجمة السحرية واحصل على نقاط إضافية! 💫

🌟 أفكار إبداعية

• غيّر حجم البالون عند النقر بدل أن يختفي.
• أضف صوتاً عند ظهور البالون (يمكنك استخدام ملفات صوتية صغيرة).
• اجعل البالونات تتحرك للأعلى باستخدام setInterval.
• ادمج بين الألوان والحركات لصنع لعبة احتفالية! 🎆

---

📝 الخلاصة

- تعلمنا اليوم كيف نغيّر الألوان، نخفي ونظهر العناصر.
- عرفنا كيف نحرّك العناصر لجعل الصفحة أكثر متعة.
- صنعنا لعبة البالونات لتجربة كل ما تعلمناه.
- باستخدام DOM يمكنك تحويل أي صفحة عادية إلى عالم تفاعلي مليء بالمفاجآت! 🌍✨