Hangman HTML5.html

HTML icon omg.html — HTML, 1 KB (1938 bytes)

Dateiinhalt

<!DOCTYPE html>
<html>
<head>
<script>
var mywordlist=['feuerwehrhauptmann','katze','xylophon'];
var myword,thetest,errs;

function start()
{ var i;
	myword=mywordlist[Math.floor(Math.random()*mywordlist.length)];	
	thetest = '';
	for (i=0;i<myword.length;i++) 
		{
			thetest = thetest+' _';
		}	
	var it=document.getElementById('questy');
	it.innerHTML = thetest;
	errs=0;
}

function draw(x)
{
var canvas= document.getElementById('hangman');
var ctx= canvas.getContext('2d');
ctx.beginPath();
if (x>0) {ctx.moveTo(10,149); ctx.lineTo(90,149);}
if (x>1) {ctx.moveTo(30,149); ctx.lineTo(30,10);}
if (x>2) {ctx.lineTo(80,10);}
if (x>3) {ctx.moveTo(30,40); ctx.lineTo(50,10);}
if (x>4) {ctx.moveTo(75,10); ctx.lineTo(75,20);}
if (x>5) {ctx.moveTo(85,30); ctx.arc(75,30,10,0,2*Math.PI,false);}
if (x>6) {ctx.moveTo(75,40); ctx.lineTo(75,90);}
if (x>7) {ctx.moveTo(75,90); ctx.lineTo(55,130);}
if (x>8) {ctx.moveTo(75,90); ctx.lineTo(95,130);}
if (x>9) {ctx.moveTo(75,50); ctx.lineTo(55,80);}
if (x>10) {ctx.moveTo(75,50); ctx.lineTo(95,80);}

ctx.stroke();
if (x>10) alert('Verloren !');
}

function versuch()
{var i,found,won;
	found=1;
	won=1;
	var c=document.getElementById('guess').value;
	for(i=0;i<myword.length;i++)
	{
		if (myword.charAt(i)==c)
		{
			 thetest=thetest.substring(0,2*i+1)+c+thetest.substr(2*i+2);
			 found=0;
		}
		if (myword.charAt(i)!=thetest.charAt(2*i+1)) won=0;
	}
	errs+=found; 
	var it=document.getElementById('questy');
	it.innerHTML = thetest;
	document.getElementById('guess').value='';
	draw(errs);
	if (won==1){alert('gewonnen')};
	document.getElementById('guess').focus();
}
</script>  
</head>
<body onload="start();">
<canvas id="hangman" width="150" height="150"> </canvas>
<div id="questy">sdaf</div>
<input type="text" maxlength=1 size=1 id="guess">
<input type="button" value="klickme" onClick="versuch();">

</body>
</html>

Navigation

Hangman HTML5.html