WeeHorse/hangman.js

## hangman.js
// Vi sätter de variabler vi vill ha tillgång till inifrån alla funktioner
// (tills vidare hårdkodar vi vårt hemliga ord)
var hemligtOrd = 'BRO';
var galgKroppDelar = [];
var doltOrd = [];
var anvandaBokstaver = [];
var maxAntalGissningar;


function display(str){
    displayBox.appendChild(document.createTextNode(str));
    displayBox.appendChild(document.createElement('br'));
}

function clearDisplay(){
    displayBox.innerHTML = '';
}

function initialize(){
    galgKroppDelar = ['kulle','stolpe','bjälke','tvärslå','rep','snara'];
    anvandaBokstaver = [];
    doltOrd = [];
    maxAntalGissningar = galgKroppDelar.length;
    for(var i = 0; i < hemligtOrd.length; i++){
        doltOrd.push('_');
    }
    display('Det gömda ordet har ' + (i) + ' bokstäver.');
    display('Max antal gissningar: ' + maxAntalGissningar);
}

function reset(str){
    clearDisplay();
    display(str);
    display('Ny omgång!');
    initialize();
}

function gissaBokstav(bokstav){
   jamforHemligtOrdMedGissadBokstav(bokstav);
}

function jamforHemligtOrdMedGissadBokstav(bokstav){
    anvandaBokstaver.push(bokstav);
    hittadeBokstav = false;
    // vi itererar över en sträng, tecken för tecken
    for(var i = 0; i < hemligtOrd.length;i++){
        if(hemligtOrd[i] == bokstav){
            hittadeBokstav = true;
            doltOrd[i] = bokstav;
        }
    }

    // vi hanterar och visar resultatet
    if(hittadeBokstav){ //titta på boleanska logiken och operatorerna här
        display(bokstav + ' fanns i det gömda ordet!');
    }else{
        display(bokstav + ' fanns tyvärr inte det gömda ordet');
        display('Ritar upp ' + galgKroppDelar.shift() + '. Du har ' + 'n' + ' gissningar kvar');
    }
    display(doltOrd.join(' '));
    display('(' + anvandaBokstaver.join(', ') + ')');
    kontrolleraStatus();
}

function kontrolleraStatus(){
    if(doltOrd.join('').indexOf('_') < 0){
        reset('Du vann!');
    }else if(galgKroppDelar.length < 1){
        reset('Du förlorade..');
    }
}

window.onload = function(){
  // utan jQuery så hämtar vi själva elementen och lagrar dem i variabler
  var body = document.getElementsByTagName('body')[0];
  var displayBox = document.getElementById('displayBox');
  var bokstavInput = document.getElementById('bokstav');
  initialize();
  // bind
  bokstavInput.onkeyup = function(){
    clearDisplay();
    var bokstav = bokstavInput.value.toUpperCase();
    bokstavInput.value = '';
    gissaBokstav(bokstav);
  };
};


/*
    övningar:
    1. Skriv ut hur många gissningar man har kvar.
    2. Skapa en lista med hemliga ord och använd ett nytt ord från listan för varje omgång.
    3. Skriv ut hur många vunna respektive förlorade omgångar vid slutet av varje omgång
    4. Skriv där också ut hur många ord det finns kvar att gissa på och se till att ett ord tas bort ifrån listan med nya ord när det används.
    5. Skriv slutligen ut när det inte finns fler ord att använda.
*/

## index.html
<html>
<head>
  <meta charset="utf-8"/>
  <title>Hänga gube</title>
  <script src="hangman.js"></script>
</head>
<body>
<h3>Hänga Gube</h3>
  <form><input id="bokstav" type="text"/></form>
  <div id="displayBox"></div>
</body>
</html>
	// Vi sätter de variabler vi vill ha tillgång till inifrån alla funktioner
	// (tills vidare hårdkodar vi vårt hemliga ord)
	var hemligtOrd = 'BRO';
	var galgKroppDelar = [];
	var doltOrd = [];
	var anvandaBokstaver = [];
	var maxAntalGissningar;


	function display(str){
	displayBox.appendChild(document.createTextNode(str));
	displayBox.appendChild(document.createElement('br'));
	}

	function clearDisplay(){
	displayBox.innerHTML = '';
	}

	function initialize(){
	galgKroppDelar = ['kulle','stolpe','bjälke','tvärslå','rep','snara'];
	anvandaBokstaver = [];
	doltOrd = [];
	maxAntalGissningar = galgKroppDelar.length;
	for(var i = 0; i < hemligtOrd.length; i++){
	doltOrd.push('_');
	}
	display('Det gömda ordet har ' + (i) + ' bokstäver.');
	display('Max antal gissningar: ' + maxAntalGissningar);
	}

	function reset(str){
	clearDisplay();
	display(str);
	display('Ny omgång!');
	initialize();
	}

	function gissaBokstav(bokstav){
	jamforHemligtOrdMedGissadBokstav(bokstav);
	}

	function jamforHemligtOrdMedGissadBokstav(bokstav){
	anvandaBokstaver.push(bokstav);
	hittadeBokstav = false;
	// vi itererar över en sträng, tecken för tecken
	for(var i = 0; i < hemligtOrd.length;i++){
	if(hemligtOrd[i] == bokstav){
	hittadeBokstav = true;
	doltOrd[i] = bokstav;
	}
	}

	// vi hanterar och visar resultatet
	if(hittadeBokstav){ //titta på boleanska logiken och operatorerna här
	display(bokstav + ' fanns i det gömda ordet!');
	}else{
	display(bokstav + ' fanns tyvärr inte det gömda ordet');
	display('Ritar upp ' + galgKroppDelar.shift() + '. Du har ' + 'n' + ' gissningar kvar');
	}
	display(doltOrd.join(' '));
	display('(' + anvandaBokstaver.join(', ') + ')');
	kontrolleraStatus();
	}

	function kontrolleraStatus(){
	if(doltOrd.join('').indexOf('_') < 0){
	reset('Du vann!');
	}else if(galgKroppDelar.length < 1){
	reset('Du förlorade..');
	}
	}

	window.onload = function(){
	// utan jQuery så hämtar vi själva elementen och lagrar dem i variabler
	var body = document.getElementsByTagName('body')[0];
	var displayBox = document.getElementById('displayBox');
	var bokstavInput = document.getElementById('bokstav');
	initialize();
	// bind
	bokstavInput.onkeyup = function(){
	clearDisplay();
	var bokstav = bokstavInput.value.toUpperCase();
	bokstavInput.value = '';
	gissaBokstav(bokstav);
	};
	};




	/*
	övningar:
	1. Skriv ut hur många gissningar man har kvar.
	2. Skapa en lista med hemliga ord och använd ett nytt ord från listan för varje omgång.
	3. Skriv ut hur många vunna respektive förlorade omgångar vid slutet av varje omgång
	4. Skriv där också ut hur många ord det finns kvar att gissa på och se till att ett ord tas bort ifrån listan med nya ord när det används.
	5. Skriv slutligen ut när det inte finns fler ord att använda.
	*/
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Hänga gube</title>
	<script src="hangman.js"></script>
	</head>
	<body>
	<h3>Hänga Gube</h3>
	<form><input id="bokstav" type="text"/></form>
	<div id="displayBox"></div>
	</body>
	</html>