Programmiere einen einfachen Spielautomaten
Erstelle eine HTML-Seite, auf der der Besucher mit einem Klick einen Spiel- automaten starten kann. Der Automat soll, angelehnt an einen Einarmigen Banditen, aus drei Zahlenreihen je einen Wert zufällig auswählen. Stimmen die drei Werte überein, gewinnt der Spieler.
Du benötigst drei Elemente, in denen das Resultat ausgegeben wird, zB. ein <ul>, das drei <li> mit einzigartigen id-Attributen beinhaltet.
Die drei Wertepools der Maschine simulieren wir mit drei Arrays, die zB. so aussehen können:
var slot1 = [1,2,3,4,5,6,7,8,9];Mit einer Funktion lässt sich der Aufruf eines zufälligen Wertes aus einem der Arrays automatisieren:
let getSlot = function (slotNumber) {
const currentSlot = window["slot" + slotNumber];
const output = currentSlot[Math.floor(Math.random() * currentSlot.length)];
return output;
};Der Aufruf, zB. für Slot 2, sieht dann so aus:
let slot2Value = getSlot(2);Der Vergleich der drei Zufallswerte ist dann einfach:
if (slot1Value == slot2Value && slot2Value == slot3Value) {
console.log("Gewonnen!");
} else {
console.log("Leider nicht gewonnen.");
}Idealerweise hat man den kompletten Spielverlauf in einer einzigen Funktion, zB. runMachine(), dann ist es einfach, diese auf Knopfdruck auszuführen:
document.querySelector('a#button-id').addEventListener("click", function (event) {
event.preventDefault();
runMachine();
});Um dem Spieler Feedback zu geben, sollte man die drei Zufallswerte auf der Seite ausgeben, am besten in der vorbereiteten Liste. Das geht genau wie in Übung 1:
document.querySelector('li#deine-id').innerHTML = slot1Value;Bonusaufgabe:
- Finde einen Weg, Bilder statt Zahlen für die Werte anzuzeigen
- Modifiziere den Automaten so, dass je ein Klick nötig ist, um die nächste Zufallszahl auszulosen. Das vermittelt dem Spieler den Eindruck, er könnte das Geschehen beeinflussen und macht das Spiel interaktiver.
Die veranschlagte Bearbeitungszeit für diese Aufgabe beträgt 7 Tage, bis zur nächsten Kursstunde.
Die Abgabe dieser Aufgabe ist nicht vorgesehen und dient lediglich deiner eigenen Übung.
- Javascript for Web Designers (A Book Apart, englisch)
- Array
- function() (englisch)
- if/else
- addEventListener()