Erklärungsdatei // variables var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; var password; // global variable to store password var passwords = ['ALICIA', 'BONAVENTURA', 'RONALDO', 'DEULOFEU', 'BALOTELLI', 'IBRAHIMOVIC', 'GRIEZMANN', 'BOATENG', 'RAMOS', 'NEYMAR']; var iFails = 3; // number of wrong guesses are allowed // text line which counts your amount of failures document.getElementById("failures").innerHTML = "Noch " + iFails + " Fehler erlaubt"; // create line of buttons for all letters for (var i = 0; i < alphabet.length; i++) { // a) create buttons var button = document.createElement("button"); button.setAttribute ("id", "id-" + alphabet[i]); // Für jeden einzelnen Buchstaben einen Button erstellt button.innerHTML = alphabet[i]; // b) append somewhere var body = document.getElementsByTagName("p")[2]; // n-

to replace, zero-based // Auf Buttons zugreifen body.appendChild(button); // c) add event handler button.addEventListener("click", clickLetter); // Event Handler heisst, was genau passiert, wenn man auf einen Button drückt. Bei mit zb. das er eine bestimmte Farbe bekommt. } // create password (each sign appends to one '-') // Jeder richtige Buchstabe gehört dann zu einem -. document.getElementById("password").setAttribute("secret", passwords[1]); // secret heisst, Geheimnis, also dass das Passwort nicht angezeigt wird,(also das Lösungswort) for (var j = 0; j < passwords[1].length; j++) { // a) create sign (-> '-') var text = document.createElement("text"); // Das Format der Buchstaben die für das Lösungswort eingesetzt werden. text.setAttribute ("id", "id-" + passwords[1].charAt(j)); text.innerHTML = "- ".fontsize(10); // b) append somewhere var body = document.getElementsByTagName("p")[3]; // n-

to replace, zero-based // dass das Lösungswort erscheinen wird. append=erscheinen body.appendChild(text); } // create a reset button var button = document.createElement("button"); // erstellen eines Reset Buttons. Wenn man den Reset Button drückt, wird die Seite neu geladen. button.setAttribute("id", "id-Reset") button.innerHTML = "Reset".fontsize(5); var body = document.getElementById("reset"); body.appendChild(button); button.addEventListener("click", clickReset); // was passiert wenn man auf den Reset Button drückt // when user click on a letter fires this function clickLetter(e) { password = document.getElementById("password").getAttribute("secret"); var pressedLetter = this.innerHTML; // Falls man auf einen Buchstaben klickt, wird er angezeigt var existLetter = false; // check if hangman game already finished if (document.getElementById("failures").style.visibility != "hidden") { // check if letter already clicked if (this.style.backgroundColor == "") { //Buchstabe wird grün falls er im Wort vorkommt for (var k = 0; k < password.length; k++) { if (pressedLetter == password.charAt(k)) { document.getElementsByTagName("text")[k].innerHTML = pressedLetter.fontsize(10) + " "; existLetter = true; } } if (existLetter) { this.style.backgroundColor = "#7FFF00"; // light green //Buchstabe wird grün falls richtig checkCorrect(); } else { this.style.backgroundColor = "#CCCCCC"; // gray // Buchstabe wird grau falls bereits angeklickt aber falsch. iFails--; document.getElementById("failures").innerHTML = "Noch " + iFails + " Fehler erlaubt"; checkFails(); // Wieviele Fehler noch erlaubt sind. } } } } // invoke that when a button is a fail function checkFails() { if (iFails <= 0) { for (var i = 0; i < alphabet.length; i++) { var btnLetter = document.getElementsByTagName("button")[i]; if (btnLetter.style.backgroundColor == "") { // if button is not clicked already var bBtnMissed = false; // Wenn Buchstabe nicht angeklickt, bleibt Weiss for (var k = 0; k < password.length; k++) { // check if the button would be a correct one if (btnLetter.innerHTML == password.charAt(k)) { // Checkt ob der Buchstabe im Wort enthalten ist. bBtnMissed = true; document.getElementsByTagName("text")[k].innerHTML = password.charAt(k).fontsize(10) + " "; } } if (bBtnMissed) { btnLetter.style.backgroundColor = "#FF6464" // light red } else { btnLetter.style.backgroundColor = "#CCCCCC" // gray } } } } } // invoke that when a button is correct function checkCorrect() { if (document.getElementById("password").textContent.search("-") == -1) { document.getElementById("failures").style.visibility = "hidden"; alert("gotcha!"); } } // when user clicks on reset button function clickReset() { window.location.reload(true); // Seite wird neu geladen, wenn man auf Reset klickt }