Corona Killer Spiel Anleitung

Einführung

Diese Anleitung wird dich durch die Erstellung eines Corona Killer-Spiels führen, bei dem du Kugeln schießt, um Viruselemente zu zerstören, die den Bildschirm hinunterwandern.

HTML-Struktur

Unten ist die grundlegende HTML-Struktur für unser Spiel:

<div id="container">
    <div id="pointsDiv">Punkte: 0 ||| Verloren: 0</div>
    <div id="injection"></div>
</div>

Dieser Code erstellt ein Container-Div, das die Punkteanzeige und das Injektions-Element enthält, das zum Schießen von Kugeln verwendet wird.

JavaScript-Code

Der JavaScript-Code übernimmt die Spiellogik, einschließlich der Generierung von Viruselementen, deren Bewegung, dem Schießen von Kugeln und der Kollisionserkennung.

1. Einrichtung der Spielumgebung

Wir beginnen damit, die erforderlichen HTML-Elemente auszuwählen:

// HTML-Elemente abrufen
const container = document.querySelector('#container');
const injection = document.querySelector('#injection');
const pointsDiv = document.querySelector('#pointsDiv');

2. Bewegung des Injektions-Elements

Wir fügen dem Container einen Ereignis-Listener hinzu, um das Injektions-Element mit der Maus zu bewegen:

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

3. Generierung von Viruselementen

Wir erstellen ein Array, um Virusobjekte zu speichern, und verwenden ein Intervall, um Viruselemente zu generieren:

// Array zum Speichern von Corona-Objekten erstellen
const coronaArr = [];

// Intervall zum Generieren von Corona-Divs
setInterval(() => {
    // Corona-Div erstellen und zum Container hinzufügen
    ...
}, 1000);

4. Bewegung der Viruselemente

Wir verwenden ein weiteres Intervall, um die Viruselemente den Bildschirm hinunterzubewegen:

setInterval(() => {
    // Durch coronaArr schleifen, um die Oberseite der Corona-Elemente zu ändern
    ...
}, 50);

5. Schießen von Kugeln

Wir fügen einen Klick-Event-Listener hinzu, um Kugel-Elemente zu erstellen und zu bewegen:

container.addEventListener('click', e => {
    // BulletDiv erstellen und bewegen
    ...
});

6. Kollisionserkennung

Wir definieren die explode-Funktion, um Kollisionen zwischen Kugeln und Viruselementen zu erkennen:

function explode(bulletElement, interval) {
    // Durch coronaArr schleifen, um Kollisionen zu überprüfen
    ...
}

Kompletter JavaScript-Code

Hier ist der vollständige JavaScript-Code zur Referenz:

// HTML-Elemente abrufen
const container = document.querySelector('#container');
const injection = document.querySelector('#injection');
const pointsDiv = document.querySelector('#pointsDiv');

// Ereignis-Listener hinzufügen, um die Injektions-Position zu steuern
container.addEventListener('mousemove', e => {
    injection.style.left = (e.clientX - 12.5) + 'px';
})

// Array zum Speichern von Corona-Objekten erstellen
const coronaArr = [];

// Intervall zum Generieren von Corona-Divs
setInterval(() => {
    // Corona-Div erstellen und zum Container hinzufügen
    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;

// Intervall zum Bewegen der Corona-Divs
setInterval(() => {
    let containerHeight = container.offsetHeight;
    coronaArr.forEach((element, idx) => {
        if (element.top > containerHeight) {
            container.removeChild(element.coronaElement);
            coronaArr.splice(idx, 1);
            lost++;
            pointsDiv.innerHTML = 'Punkte: ' + score + ' ||| Verloren:' + lost;
        } else {
            element.top += 10;
            element.coronaElement.style.top = element.top + 'px';
        }
    })
}, 50);

// Kugelschall erstellen
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);

// Spielton erstellen
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);

// Klick-Ereignis-Listener hinzufügen, um die Kugel zu erstellen
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);
})

// Explosionston erstellen
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 = 'Punkte: ' + score + ' ||| Verloren:' + 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 + d2_height;
    var d2_distance_from_left = $div2.offsetLeft + d2_width;
    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;
};

Kompletter CSS-Code

Hier ist der vollständige CSS-Code zur Referenz:

*{
   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;
}