home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het javascript-menu

In Japan heet dit spelletje jan-ken-pon. Nou ja, spelletje.. In Japan wordt dit bloed-serieus genomen. Mensen proberen elkaar de loef af te steken met handgebaren die dan-wel de schaar (2 vingers), de steen (vuist) of het papier (open hand) uitbeelden. In de rest van de wereld zijn er nogal wat varianten (v.w.b. de naam) te vinden, maar het spelletje is eigenlijk universeel. Laten wij het maar bij rock paper scissors houden (steen papier schaar klinkt zo oubollig...). Zoals met de meeste spelletjes: de scripts stellen werkelijk niets voor. Des te meer een reden om ze foutloos te maken (voor JSLint).

Dit scriptje doet alles zonder graphics of andere vertragende factoren. Mocht je de behoefte voelen om jan-ken-pon op jouw website te zetten, plaats dan de onderstaande stylesheet in de head van jouw pagina:

<style type="text/css">
	form{margin-left:100px}
	table{border:2px solid #242;padding:1em;width:500px;margin-bottom:1.5em}
	th{margin:0;font-size:3em;text-decoration:none;padding:0.2em;border:0;background:inherit;color:#030}
	th a{text-decoration:none}
	.steen{font-style:italic;color:#766;background:#aaa;padding-left:0.5em;padding-right:0.5em;}
	.papier{color:#cdd;background:#eee;padding-left:0.3em;padding-right:0.3em}
	.schaar{color:#666;background:#aaa;padding-left:0.3em;padding-right:0.2em;}
	td{padding-left:2em;padding-bottom:1em}
	input{border:0;color:#afa;background:#020;font-weight:bold}
</style>

		

Ergens in de body van jouw pagina plaats je dan het onderstaande "form":

		
<form name=spel>
	<table>
		<tr>
			<th><a href="javascript:void(0);" onClick="doe(1);"><span class="steen">&#9677;</span></a></th>
			<th><a href="javascript:void(0);" onClick="doe(2);"><span class="papier">&#20872;</span></a></th>
			<th><a href="javascript:void(0);" onClick="doe(3);"><span class="schaar">&#9986;</span></a></th>
		</tr>
	</table>
	<input type=text name=msg size=65><br><br>
	<input type=text name=winnen readonly value="0">gewonnen    
	<input type=text name=verliezen readonly value="0">verloren      
	<input type=text name=gelijk readonly value="0">gelijk spel   
</form>
		
		

en zo laag mogelijk op de pagina voeg je als laatste het onderstaande stukje javascript in:

		
<script>
	function doe(keuze) {
		var o = window.document.spel,
		bbq = Math.round((Math.random() * 2) + 1); 
		var  cmpkeuze;
		if (bbq == 1) { cmpkeuze = "steen";}
		if (bbq == 2) { cmpkeuze = "papier";}
		if (bbq == 3) { cmpkeuze = "schaar";}
		o.msg.value = 'de computer kiest ' +  cmpkeuze + ';  ';
		switch(keuze) { 
			case 1 : 
				if (bbq == 1) {o.gelijk.value++; o.msg.value += 'het is gelijk spel.'; }
				if (bbq == 2) {o.verliezen.value++; o.msg.value += 'jij verliest..'; }
				if (bbq == 3) {o.winnen.value++; o.msg.value += 'jij wint !'; }
				break;	
			case 2 : 
				if (bbq == 1) {o.winnen.value++; o.msg.value += 'jij hebt gewonnen !'; }
				if (bbq == 2) {o.gelijk.value++; o.msg.value += 'het is gelijk spel.'; }
				if (bbq == 3) {o.verliezen.value++; o.msg.value += 'jij verliest..'; }
				break;
			case 3 : 
				if (bbq == 1) {o.verliezen.value++; o.msg.value += 'jij hebt verloren..'; }
				if (bbq == 2) {o.winnen.value++; o.msg.value += 'jij wint !'; }
				if (bbq == 3) {o.gelijk.value++; o.msg.value += 'het is gelijk spel.'; }
		}
		o.msg.value += '  nog een keer';
	}
</script>
		
		

Nog even een kleine uitleg bij het spelletje:
Het is de bedoeling dat je een symbool kiest wat sterker is dan het symbool wat (in dit geval) de computer kiest. De steen is sterker dan de schaar, want de schaar wordt bot van de steen en kan hem niet "knippen". De schaar is sterker dan het papier, want de schaar kan het papier knippen. Maar het papier is weer sterker dan de steen, omdat het papier de steen kan "omwikkelen". En de steen is weer sterker dan de schaar... Oeps.. de circel was al rond. Heb je de clou? Dan wens ik je veel plezier !

cache 16-09-2010