Implementiere die Spielfunktionalität
Anforderungen:
- Beherrschung von JavaScript-Schleifen und -Bedingungen.
- Kenntnisse bei der Manipulation des DOM mit JavaScript.
Funktionalität:
- Entwerfe die Kernspielmechaniken.
- Planne Szenarien für das Spielende.
- Implementiere Mechanismen für das Erstellen und Bewegen von Blöcken.
Schritte:
- Prüfe, ob der Spieler auf einen schwarzen oder weißen Block geklickt hat. Aktualisiere den Spielstatus basierend auf dem Spielerinput.
// Bestimme, ob auf einen schwarzen oder weißen Block geklickt wurde
function judge(ev) {
if (
ev.target.className.indexOf("black") == -1 &&
ev.target.className.indexOf("cell") !== -1
) {
ev.target.parentNode.pass1 = 1; // Definiert das pass-Attribut, das angibt, dass der weiße Block dieser Zeile angeklickt wurde
}
if (ev.target.className.indexOf("black") !== -1) {
// Klicken auf ein Element mit "black" im Klassenamen ist ein schwarzer Block
ev.target.className = "cell";
ev.target.parentNode.pass = 1; // Definiert das pass-Attribut, das angibt, dass der schwarze Block dieser Zeile angeklickt wurde
score();
}
}
- Bestimme, wann das Spiel vorbei ist, basierend auf Spielerinteraktionen. Lösse Endspieleaktionen aus, wenn das Spiel vorbei ist.
// Prüfe, ob das Spiel vorbei ist
function over() {
var rows = con.childNodes;
if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {
fail();
}
for (let i = 0; i < rows.length; i++) {
if (rows[i].pass1 == 1) {
fail();
}
}
}
// Spiel vorbei
function fail() {
clearInterval(clock);
flag = false;
confirm("Das Endspielstand ist " + parseInt($("score").innerHTML));
var con = $("con");
con.innerHTML = "";
$("score").innerHTML = 0;
con.style.top = "-408px";
}
- Generiere Reihen von Blöcken für das Spielgeschehen. Positioniere den "schwarzen" Block zufällig unter anderen.
// Erstelle eine <div class="row"> mit vier Kindern <div class="cell">
function createrow() {
var con = $("con");
var row = creatediv("row"); // Erstelle div: className=row
var arr = createcell(); // Definiere den Klassenamen der div-Zelle, wobei eine von ihnen cell black ist
con.appendChild(row); // Füge das Kindknoten mit row als con hinzu
for (var i = 0; i < 4; i++) {
row.appendChild(creatediv(arr[i])); // Füge die Kindknoten der Zeilenzelle hinzu
}
if (con.firstChild == null) {
con.appendChild(row);
} else {
con.insertBefore(row, con.firstChild);
}
}
// Erstelle ein Array von Klassenamen; einer von ihnen ist "cell black", die anderen sind "cell"
function createcell() {
var temp = ["cell", "cell", "cell", "cell"];
var i = Math.floor(Math.random() * 4); // Generiere zufällig die Position des schwarzen Blocks Math.random() Funktionsparameter 0~1 Zufallszahl
temp[i] = "cell black";
return temp;
}
- Lasse die Blöcke kontinuierlich nach unten bewegen. Lösche alte Zeilen, wenn sie außerhalb des Sichtfelds geraten.
// Bewege die schwarzen Blöcke nach unten
function move() {
var con = $("con");
var top = parseInt(window.getComputedStyle(con, null)["top"]);
if (speed + top > 0) {
top = 0;
} else {
top += speed;
}
con.style.top = top + "px"; // Halte den Top-Wert bei der Bewegung so, dass er sich bewegt
over();
if (top == 0) {
createrow();
con.style.top = "-102px";
delrow();
}
}
// Lösche eine Zeile
function delrow() {
var con = $("con");
if (con.childNodes.length == 6) {
con.removeChild(con.lastChild);
}
}
