Auch dieses Kapitel startet mit dem Grundgerüst. Dieses sollte ungefähr wie nebenstehend aussehen.
Um die Punkte zu zählen, muss vor dem Loop eine neue Variable definiert werden. Meist kann der Startwert auf 0 gesetzt werden.
Die Punktzahl muss im Loop hochgezählt werden. Das kann entweder bei einer Kollision passieren, oder wenn eine bestimmte Position erreicht wird oder bei beliebigen anderen Ereignissen. In diesem Beispiel wird die Punktzahl hochgezählt, wenn der Spieler den Rand des Spielfelds berührt.
Um die Punktzahl anzeigen zu können, muss im HTML-Code ein Element zur Anzeige erstellt werden. Dieses Element muss im JS-Code vor dem Loop mit querySelector ausgewählt werden.
Die Anzeige muss dann aktualisiert werden. Dies geschieht jeweils dort im Loop, wo die Punktzahl geändert wird.
.playground {
position: relative;
width: 400px;
height: 400px;
border: 1px solid blue;
}
.player {
position: absolute;
background-color: red;
width: 20px;
height: 20px;
}
<head>
<link rel="stylesheet" href="game.css">
</head>
<p class="punkte">0</p>
<div class="playground">
<div class="player"></div>
</div>
<script src="game.js"></script>
var spieler = document.querySelector('.player')
var punkteAnzeige = document.querySelector('.punkte')
var score = 0
function loop() {
if(parseInt(spieler.style.left) > 200) {
score = score + 1
punkteAnzeige.textContent = score
}
window.requestAnimationFrame(loop)
}
window.requestAnimationFrame(loop)