Score beim Tetris Game?
Hi Community
1) Ich bin noch ein ziemlicher Anfänger, was JavaScript betrifft
Ich habe durch ein Tutorial Tetris programmiert und durch eigene Kenntnisse noch andere Dinge hinzugefügt (Musik, etc...). Nun würde ich gerne ein Score machen, dass, wenn unten eine ganze Reihe verschwindet, an der Seite im Textfeld "Score" der Score "100" angegeben wird und jedes mal, wenn eine weitere Reihe verschwindet, + 100 Punkte dazu gerechnet werden, dass dann der Score z.B: irgendwann bei 500 liegt. Kann mir da jemand helfen? Wenn möglich auch den Quelltext so umschreiben, dass der Score angezeigt wird?
Danke im Voraus, PS: Ich muss ein Link verwenden, der Quellcode ist zu lang
https://drive.google.com/file/d/1xoSpCj5Fyd6Br7YKsELD0EoBcO_Nn-kV/view?usp=sharing
1 Antwort
Du brauchst eine Variable, die sich die Punktzahl merkt und eine Referenz auf das Element, in welchem du die Punktzahl anzeigen möchtest. Beide würde ich global anlegen, sie werden ja eh das ganze Spiel über benötigt.
let score = 0;
const scoreView = document.getElementById("score-points");
Das Markup würde ich an der Stelle noch ein wenig umstrukturieren. Ziel wäre es, die Punktzahl von jeglichen anderen Inhalten zu separieren, sodass später auch nur sie beim Aktualisieren des Werts gesetzt werden muss.
<div class="score" id="score">
score<br><br><span id="score-points"></span>
</div>
Auf die HTML Entities würde ich im Übrigen verzichten (daher habe ich sie im Snippet auch schon entfernt). Um einen Abstand nach links zu schaffen, gibt es das CSS-Property padding-left.
Nun könnte man sich noch eine Funktion schreiben, die die Punktzahl aktualisiert.
function updateScore(points) {
score += points;
scoreView.textContent = score.toString().padStart(4, '0');
}
Mit padStart werden so viele Nullen vor den Wert gehängt, wie nötig sind, um einen String mit der Länge von vier Zeichen zu erhalten. Je nachdem, wie du den höchsten Highscore einschätzt, kannst du die Länge ja noch anpassen.
Die Funktion kannst du nun jedenfalls überall dort aufrufen, wo es Punkte zu vergeben gilt.
Zuletzt noch zwei Anmerkungen zu deinem bestehenden Code:
- Der style-Tag gehört ausschließlich in den head-Bereich.
- Jedesmal wenn das volume-Property über die Grenze seines Wertebereichs läuft, kommt es zu einem Laufzeitfehler. Wie man den Ton sicher regulieren kann, habe ich gestern in dieser Antwort gezeigt.
Du hast in deinem Media Query eine Regel, die alle span-Elemente betrifft, sie unsichtbar macht. Das span-Element für den Score sollte davon ausgenommen werden.
span:not(#score-points) {
Wo schreibe ich dien Tag hin? Tut mir leid, das ich frage
Das ist kein Tag, sondern ein CSS-Selektor. Gemessen an deinem Google Docs-Dokument liegt er in Zeile 490.
Dann wird die Funktion updateScore wohl nie aufgerufen. Sie setzt wie schon geschrieben den Score in das Element ein.
könntest du mir vlt helfen, dass, wenn eine Reihe verschwindet, dem score 100 punkte dazu getan werden ? Ich wäre dir wirklich dankbar
Ich habe es genau so gemacht, wie es in der Antwort steht. Der Score wird aber noch nicht angezeigt