دليل لعبة قاتل كورونا

المقدمة

سيرشدك هذا الدليل إلى إنشاء لعبة قاتل كورونا حيث تطلق الرصاصات لتدمير عناصر الفيروس التي تتحرك لأسفل الشاشة.

هيكل HTML

فيما يلي هيكل HTML الأساسي للعبتنا:

<div id="container">
    <div id="pointsDiv">النتيجة: 0 ||| الخسارة: 0</div>
    <div id="injection"></div>
</div>

ينشئ هذا الكود div حاوية يحتوي على عرض النتيجة وعناصر الحقن المستخدمة في إطلاق الرصاصات.

كود JavaScript

يتعامل كود JavaScript مع منطق اللعبة، بما في ذلك توليد عناصر الفيروس وتحريكها، وإطلاق الرصاصات، واكتشاف التصادمات.

1. إعداد بيئة اللعبة

نبدأ باختيار العناصر اللازمة من HTML:

// الحصول على عناصر html
const container = document.querySelector('#container');
const injection = document.querySelector('#injection');
const pointsDiv = document.querySelector('#pointsDiv');

2. تحريك عنصر الحقن

نضيف مستمع حدث للحاوية لتحريك عنصر الحقن مع الفأرة:

container.addEventListener('mousemove', e => {
    injection.style.left = (e.clientX - 12.5) + 'px';
});

3. توليد عناصر الفيروس

ننشئ مصفوفة لحفظ كائنات الفيروس ونستخدم فاصلًا زمنيًا لتوليد عناصر الفيروس:

// إنشاء مصفوفة لحفظ كائنات كورونا 
const coronaArr = [];

// فاصل زمني لتوليد coronDivs
setInterval(() => {
    // إنشاء وإضافة coronaDiv إلى الحاوية
    ...
}, 1000);

4. تحريك عناصر الفيروس

نستخدم فاصلًا زمنيًا آخر لتحريك عناصر الفيروس لأسفل الشاشة:

setInterval(() => {
    // التكرار عبر coronaArr لتغيير الجزء العلوي من coronaElements
    ...
}, 50);

5. إطلاق الرصاصات

نضيف مستمع حدث للنقر لإنشاء وتحريك عناصر الرصاص:

container.addEventListener('click', e => {
    // إنشاء وتحريك bulletDiv
    ...
});

6. اكتشاف التصادمات

نحدد وظيفة الانفجار لاكتشاف التصادمات بين الرصاصات وعناصر الفيروس:

function explode(bulletElement, interval) {
    // التكرار عبر coronaArr للتحقق من التصادمات
    ...
}

كود JavaScript الكامل

إليك كود JavaScript الكامل للرجوع إليه:

// الحصول على عناصر html
const container = document.querySelector('#container');
const injection = document.querySelector('#injection');
const pointsDiv = document.querySelector('#pointsDiv');

// إضافة مستمع حدث mousemove للحاوية للتحكم في موضع الحقن
container.addEventListener('mousemove', e => {
    injection.style.left = (e.clientX - 12.5) + 'px';
})

// إنشاء مصفوفة لحفظ كائنات كورونا 
const coronaArr = [];

// فاصل زمني لتوليد coronDivs
setInterval(() => {
    // إنشاء وإضافة coronaDiv إلى الحاوية
    let containerWidth = container.offsetWidth;
    const coronaDiv = document.createElement('div');
    coronaDiv.classList.add('corona');
    let coronaLeft = Math.floor(Math.random() * containerWidth) + 1;
    coronaDiv.style.left = coronaLeft + 'px';
    container.append(coronaDiv);
    let coronaObj = { coronaElement: coronaDiv, top: 0, left: coronaLeft };
    coronaArr.push(coronaObj);
}, 1000)

let lost = 0;

// فاصل زمني لتحريك coronaDivs لأسفل
setInterval(() => {
    let containerHeight = container.offsetHeight;
    coronaArr.forEach((element, idx) => {
        if (element.top > containerHeight) {
            container.removeChild(element.coronaElement);
            coronaArr.splice(idx, 1);
            lost++;
            pointsDiv.innerHTML = 'النتيجة: ' + score + ' ||| الخسارة: ' + lost;
        } else {
            element.top += 10;
            element.coronaElement.style.top = element.top + 'px';
        }
    })
}, 50);

// إنشاء صوت الرصاصة
let bulletSound = document.createElement('audio')
bulletSound.src = './sounds/bullet.wav';
bulletSound.setAttribute('controls', 'none');
bulletSound.setAttribute('preload', 'auto');
bulletSound.style.display = 'none';
bulletSound.volume = 0.1;
container.append(bulletSound);

// إنشاء صوت اللعبة
let gameSound = document.createElement('audio')
gameSound.src = './sounds/game.mp3';
gameSound.setAttribute('controls', 'none');
gameSound.setAttribute('preload', 'auto');
gameSound.style.display = 'none';
gameSound.volume = 0.1;
gameSound.loop = true;
container.append(gameSound);

// إضافة مستمع حدث للنقر للحاوية لإنشاء الرصاصة
container.addEventListener('click', e => {
    gameSound.play();
    bulletSound.play();
    const bulletDiv = document.createElement('div');
    bulletDiv.classList.add('bullet');
    bulletDiv.style.left = e.clientX + 'px';
    container.append(bulletDiv);
    let bottom = 100;
    let containerHeight = container.offsetHeight;
    const interval = setInterval(() => {
        if (bottom > containerHeight) {
            clearInterval(interval);
            container.removeChild(bulletDiv);
        } else {
            bottom += 25;
            bulletDiv.style.bottom = bottom + 'px';
            explode(bulletDiv, interval);
        }
    }, 50);
})

// إنشاء صوت الانفجار
let explosionSound = document.createElement('audio')
explosionSound.src = './sounds/explosion.wav';
explosionSound.setAttribute('controls', 'none');
explosionSound.setAttribute('preload', 'auto');
explosionSound.style.display = 'none';
explosionSound.volume = 0.1;
container.append(explosionSound);

let score = 0;
function explode(bulletElement, interval) {
    coronaArr.forEach((corona, idx) => {
        if (is_colliding(bulletElement, corona.coronaElement)) {
            clearInterval(interval);
            container.removeChild(bulletElement);
            coronaArr.splice(idx, 1);
            container.removeChild(corona.coronaElement);
            score++;
            pointsDiv.innerHTML = 'النتيجة: ' + score + ' ||| الخسارة: ' + lost;
            explosionSound.play();
        }
    })
}

var is_colliding = function($div1, $div2) {
    var d1_height = $div1.offsetHeight;
    var d1_width = $div1.offsetWidth;
    var d1_distance_from_top = $div1.offsetTop + d1_height;
    var d1_distance_from_left = $div1.offsetLeft + d1_width;
    var d2_height = $div2.offsetHeight;
    var d2_width = $div2.offsetWidth;
    var d2_distance_from_top = $div2.offsetTop + د2 الارتفاع;
    var d2_distance_from_left = $div2.offsetLeft + د2 العرض;
    var not_colliding = (d1_distance_from_top < $div2.offsetTop || $div1.offsetTop > d2_distance_from_top || d1_distance_from_left < $div2.offsetLeft || $div1.offsetLeft > d2_distance_from_left);
    return !not_colliding;
};

كود CSS الكامل

إليك كود CSS الكامل للرجوع إليه:

*{
   padding: 0;
   margin: 0; 
   box-sizing: border-box;
}

body{
    overflow: hidden;
}

#container{
    width: 100vw;
    height: 100vh;
    background-image: url('../imgs/container.gif');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

#injection{
    position: absolute;
    width: 25px;
    height: 100px;
    bottom: 0;
    left: calc(50% - 12.5px);
    background-image: url('../imgs/syring.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;

}

.corona{
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url('../imgs/coronavirus.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.bullet{
    position: absolute;
    width: 2px;
    height: 10px;
    background-color: white;
    bottom: 100px;
}

#pointsDiv{
background-color: rgba(255, 255, 255, 0.747);
font-size: 50px;
height: 50px;
}