Commit 1d7cb041 authored by Sorrel Harriet's avatar Sorrel Harriet
Browse files

minor update to readme

parent 720d52e8
......@@ -16,3 +16,4 @@ Other notes
You can only play the game as player 1 because, as yet, no login system has been implemented.
It is supposed here that a login script would pass player_id to other views as a GET parameter.
You don't *have* to do it like that...in fact, you're free to edit any of this application code as you see fit!
*HOWEVER* it is probably not in your interests to edit hangman.js or hangman.css, since you aren't being credited for client-side scripting.
/* Source: https://jsfiddle.net/phollott/x29ym2ag/ */
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* Keep it simple - improvement would be to not display characters */
.letter {
display: inline-block;
list-style: none;
width: 20px;
margin: 0 5px;
border-bottom: 1px solid black;
text-align: center;
color: white;
}
.current-word {
list-style: none;
}
.output {
opacity: 0;
transition: opacity 1s ease;
}
.correct {
background-color: green;
transition: all 1s ease;
}
.error {
color: red;
opacity: 1;
}
.warning {
color: orange;
opacity: 1;
}
.win {
color: green;
opacity: 1;
}
.hint {
font-style: italic;
}
// Adapted from: https://jsfiddle.net/phollott/x29ym2ag/
function playHangman(word, hint, player_id) {
"use strict";
var availableLetters, guessInput, guess, guessButton, hintButton, lettersGuessed, lettersMatched, output, man, letters, lives, currentWord, numLettersMatched, messages;
/* update the value of the player_id and word fields in the form */
document.getElementById("player_id").value = player_id;
document.getElementById("guessed_word").value = word;
function setup() {
/* start config options */
availableLetters = "abcdefghijklmnopqrstuvwxyz";
lives = 5;
currentWord = word.toLowerCase();
messages = {
win: 'You win!',
lose: 'Game over!',
guessed: ' already guessed, please try again...',
validLetter: 'Please enter a letter from A-Z',
hint: hint
};
/* end config options */
lettersGuessed = lettersMatched = '';
numLettersMatched = 0;
/* make #man and #output blank, create vars for later access */
output = document.getElementById("output");
man = document.getElementById("man");
guessInput = document.getElementById("letter");
man.innerHTML = 'You have ' + lives + ' lives remaining';
output.innerHTML = '';
document.getElementById("letter").value = '';
/* attach click behaviour to hint button */
document.getElementById("hint").onclick = function () {
document.getElementById("hintText").innerHTML = messages.hint;
}
/* make sure guess button is enabled */
guessButton = document.getElementById("guess");
guessInput.style.display = 'inline';
guessButton.style.display = 'inline';
/* set up display of letters in current word */
letters = document.getElementById("letters");
letters.innerHTML = '<li class="current-word">Current word:</li>';
var letter, i;
for (i = 0; i < currentWord.length; i++) {
letter = '<li class="letter letter' + currentWord.charAt(i).toUpperCase() + '">' + currentWord.charAt(i).toUpperCase() + '</li>';
letters.insertAdjacentHTML('beforeend', letter);
}
}
function gameOver(win) {
if (win) {
output.innerHTML = messages.win;
output.classList.add('win');
/* update the value of won field to true */
document.getElementById("won").value = "1";
/* submit form to database */
document.getElementById("hangman").submit();
} else {
output.innerHTML = messages.lose;
output.classList.add('error');
/* submit form to database */
document.getElementById("hangman").submit();
}
guessInput.style.display = guessButton.style.display = 'none';
guessInput.value = '';
}
/* Start game */
setup();
/* reset letter to guess on click */
guessInput.onclick = function () {
this.value = '';
};
/* main guess function when user clicks #guess */
document.getElementById('hangman').onsubmit = function (e) {
if (e.preventDefault) e.preventDefault();
output.innerHTML = '';
output.classList.remove('error', 'warning');
guess = guessInput.value.toLowerCase();
/* does guess have a value? if yes continue, if no, error */
if (guess) {
/* is guess a valid letter? if so carry on, else error */
if (availableLetters.indexOf(guess) > -1) {
/* has it been guessed (missed or matched) already? if so, abandon & add notice */
if ((lettersMatched && lettersMatched.indexOf(guess) > -1) || (lettersGuessed && lettersGuessed.indexOf(guess) > -1)) {
output.innerHTML = '"' + guess.toUpperCase() + '"' + messages.guessed;
output.classList.add("warning");
}
/* does guess exist in current word? if so, add to letters already matched, if final letter added, game over with win message */
else if (currentWord.indexOf(guess) > -1) {
var lettersToShow;
lettersToShow = document.querySelectorAll(".letter" + guess.toUpperCase());
for (var i = 0; i < lettersToShow.length; i++) {
lettersToShow[i].classList.add("correct");
}
/* check to see if letter appears multiple times */
for (var j = 0; j < currentWord.length; j++) {
if (currentWord.charAt(j) === guess) {
numLettersMatched += 1;
}
}
lettersMatched += guess;
if (numLettersMatched === currentWord.length) {
gameOver(true);
}
}
/* guess doesn't exist in current word and hasn't been guessed before, add to lettersGuessed, reduce lives & update user */
else {
lettersGuessed += guess;
lives--;
man.innerHTML = 'You have ' + lives + ' lives remaining';
if (lives === 0) gameOver();
}
}
/* not a valid letter, error */
else {
output.classList.add('error');
output.innerHTML = messages.validLetter;
}
}
/* no letter entered, error */
else {
output.classList.add('error');
output.innerHTML = messages.validLetter;
}
return false;
};
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment