[1] Inleiding:
Ik heb gister middag een steen papier schaar scriptje gemaakt en hem gratis weg gegeven. Toen ik hoorde dat iedereen er positief over was, en sommigen er zelfs een aantal punten voor over hadden dacht ik; "Waarom kunnen die anderen niet zoiets simpels? Het is echt niet veel werk." Ik bedacht dus om het jullie ook maar eens te leren. Dit is de eerste keer dat ik ooit een tutorial heb gemaakt dus ik heb geen ervaring met uitleggen. Het scriptje is xHTML valid en gebruikt Javascript. Verder zijn er geen andere talen nodig. Een voorbeeld hiervan is te vinden op http://steenpapierschaar.s1.one2xs.com/.
TIP: Typ zo veel mogelijk over in plaats van te kopiëren en te plakken. Daar leer je meer van.
[2] Inhoudsopgave:
-[1] Inleiding
-[2] Inhoudsopgave
-[3] Voorafgaand werk
-[4] HTML
-[5] Javascript
-[6] Scorebord (Extra)
-[7] Slot
[3] Voorafgaand werk:
Je hebt natuurlijk eerst de plaatjes nodig. Hieronder staan 3 links naar plaatjes. Sla ze alledrie op door op de links te klikken en met uw rechter muisknop op te slaan. U kunt natuurlijk ook andere plaatjes gebruiken.
Steen Papier Schaar
Je hebt natuurlijk ook een html bestand nodig. Als je bijvoorbeeld de php extentie gebruikt werkt dat ook. Maak nu dus een bestand dat index.html heet. Zet daarin het volgende stukje code. Dit is de basis van een script en dit vereist neit verdere uitleg.
[4] HTML:
Nu beginnen we pas echt. We beginnen met de plaatjes te weergeven. Dat doe je natuurlijk tussen de body tag, want de plaatjes moet je zien. Plaats dit dus in je script:
Je ziet dat hier de plaatjes naast elkaar worden gezet omdat er geen
tussen de plaatjes staat. Als je nu de pagina bekijkt zie je dat de plaatjes alleen wel erg dicht bij elkaar staan. Dit los je gewoon simpel op door er een paar spaties tussen te zetten. Het probleem is helaas dat html spaties negeert als je meer dan 1 spatie hebt staan. Gelukkig is daar wel een oplossing voor. Dat is namelijk . Als je dit in je html script zet word er een spatie weergegeven. We zetten dus tussen het eerste en het tweede plaatje een paar keer zon spatie en tussen de tweede en de derde. Dat gaat er zo uit zien:
Als je nu je script bekijkt zie je dat het veel mooier is. Indien je het anders wilt kun je het op eigen smaak veranderen.
We willen nu dat als je op het plaatje wijst dat je muis dan veranderd zodat je ziet dat het een link is. Dat doe je door de style van de muis te veranderen. Dat doe je met style="cursor: pointer;". Dat moet je dus in de image tags zetten op dezelfde manier als src="" en alt="". Hoe dit moet begrijp je vast wel. Indien je nog niet begrijpt waar het moet kun je na de volgende stap wel bij het voorbeeld zien waar het staat.
Nu willen we dat er iets gebeurd als je op een plaatje klikt. Die actie doen we met een Javascript functie die we later in deze tutorial gaan maken. Die functie gaat choose heten omdat choose Engels voor kiezen is. We voeren die actie uit als er op het plaatje word geklikt dus we gebruiken onclick="". De Javascript actie die uitgevoerd word is choose(), dus er moet onclick="choose()" staan. Natuurlijk moet de functie wel weten welke keuze je hebt gemaakt dus dat moet tussen de haakjes staan. Als het goed is heb je dan dit:
[5] Javascript:
We zijn nu bij het javascript gedeelte beland. We willen namelijk dat er gecontroleerd word of je wint of niet als je op een plaatje klikt. De Javascript moet natuurlijk in tussen de head tags op de volgende manier:
Wat ik nu ga zeggen en laat zien in de volgende voorbeeld codes moet je neerzetten op de plaats waar nu "Hier komt de Javascript code" staat.
We maken als eerst een functie met de naam choose. In de html hebben we tussen de haakjes de keuze staan en die keuze noemen we in de Javascript selection. Het word dus zo:
We gaan nu ervoor zorgen dat de computer een willekeurige keuze maakt. We stoppen de keuzes in een Array. Die array zit natuurlijk in een variabel en die noemen we options. Daarin zetten we de keuzes die de computer kan maken. Dat zijn natuurlijk steen, papier en schaar. Dit moet dus in de functie komen:
Options[0] is dan dus steen, options[1] is papier en options[2] is schaar. We maken nu een variabel met de naam i die een willekeurig cijfer bevat die onder de 3 zit. Dat doe je zo:
De variabel i bevat dus een willekeurig getal. Als we dan options[i] doen krijgen we dus een willekeurige optie. We weten nu dus dat select jouw keuze is en options[i] de keuze van de computer. We moeten nu dus controleren wie de winnaar is. Voordat we dat doen gaan we eerst even een div maken waar de melding in komt. Dit zet je boven of onder de plaatjes. De div krijgt als id message omdat het bericht daarin komt. In de code hieronder staat alles wat je tot nu toe hebt.
Nu komt de controle. We kijken als eerst of jij en de computer dezelfde keuze hebben gemaakt. Dat doen we zo:
Als dat het geval is moet er in de div met het id "message" een melding komen. Dat doe je zo:
Nu willen we controleren of je hebt verloren. We moeten dus dan alle combinaties controleren waarmee je wint. Dat doe je dus zo. Ik heb nu de melding er al direct bij gezet, omdat je dat nu snapt.
Nu willen we natuurlijk nog voor de zekerheid controleren of je werkelijk hebt gewonnen. Daarvoor doe je natuurlijk het tegenovergestelde als zonet. Dat is dus dit:
Als het goed is heb je nu dus dit:
[6] Scorebord (extra):
Het script werkt nu, maar we willen natuurlijk ook dat hij bijhoud hoevaak je hebt gewonnen, verloren en gelijk gespeeld hebt. Dat zet je het beste onder de plaatjes. De getallen kunnen het beste dikgedrukt, want dan is het veel overzichtelijker. Aangezien ik xHTML werk in plaats van HTML doen we dat met en niet met . We geven de s ook even ids zodat we de inhoud daarvan met Javascript kunnen veranderen. Je body code moet er dan ongeveer zo uit zien:
Nu moeten we natuurlijk via Javascript de score veranderen als je wint, verliest of gelijk speelt. Dit is erg makkelijk, omdat je de controles al hebt gemaakt. Laten we maar beginnen met gelijk spelen. Hier is de code die je dan krijgt:
Ik zal nog even uitleggen wat er is gebeurd voor als je het niet helemaal begreep. We hebben onder de melding dat je gelijk hebt gespeelt ervoor gezorgt dat er 1 bij de div met het id draw word opgeteld. Dit is standaard 0, dus 0 + 1 = 1. In het scorebord staat nu dus 1 op de plaats waar de gelijke standen staan. Als je nog een keer gelijk speelt komt er dus nog een keer 1 bij dus dan heb je 2. Dit doen we net zo bij verliezen en winnen, dus het word zo:
[7] Slot:
Ik hoop dat jullie veel van deze tutorial hebben geleerd. Ik heb tenminste wel geleerd dat een tutorial echt veel langer duurt dan scripten. Indien er spellingsfouten zijn of als er verbeterpunten zijn sta ik open voor commentaar. Zolang het maar geen extreem negatief comentaar is. Jullie kunnen stemmen in de poll. Doe dit alleen als u deze tutorial echt heeft doorgelezen en niet als eerste indruk. Ik heb graag dat als jullie stemmen dat jullie ook argumenten plaatsen in reacties.
Jullie mogen dit script zelf gebruiken voor eigen sites maar jullie hebben niet de rechten om deze tutorial en/of het script te verveelvoudigen op welke wijze dan ook.
Wietse de Vries
//16-05-2012: Fout aangepast met dank aan Xjessex
Ik heb gister middag een steen papier schaar scriptje gemaakt en hem gratis weg gegeven. Toen ik hoorde dat iedereen er positief over was, en sommigen er zelfs een aantal punten voor over hadden dacht ik; "Waarom kunnen die anderen niet zoiets simpels? Het is echt niet veel werk." Ik bedacht dus om het jullie ook maar eens te leren. Dit is de eerste keer dat ik ooit een tutorial heb gemaakt dus ik heb geen ervaring met uitleggen. Het scriptje is xHTML valid en gebruikt Javascript. Verder zijn er geen andere talen nodig. Een voorbeeld hiervan is te vinden op http://steenpapierschaar.s1.one2xs.com/.
TIP: Typ zo veel mogelijk over in plaats van te kopiëren en te plakken. Daar leer je meer van.
[2] Inhoudsopgave:
-[1] Inleiding
-[2] Inhoudsopgave
-[3] Voorafgaand werk
-[4] HTML
-[5] Javascript
-[6] Scorebord (Extra)
-[7] Slot
[3] Voorafgaand werk:
Je hebt natuurlijk eerst de plaatjes nodig. Hieronder staan 3 links naar plaatjes. Sla ze alledrie op door op de links te klikken en met uw rechter muisknop op te slaan. U kunt natuurlijk ook andere plaatjes gebruiken.
Steen Papier Schaar
Je hebt natuurlijk ook een html bestand nodig. Als je bijvoorbeeld de php extentie gebruikt werkt dat ook. Maak nu dus een bestand dat index.html heet. Zet daarin het volgende stukje code. Dit is de basis van een script en dit vereist neit verdere uitleg.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Steen papier schaar</title>
</head>
<body>
</body>
</html>[4] HTML:
Nu beginnen we pas echt. We beginnen met de plaatjes te weergeven. Dat doe je natuurlijk tussen de body tag, want de plaatjes moet je zien. Plaats dit dus in je script:
<img src="steen.png" alt="Steen" />
<img src="papier.png" alt="Papier" />
<img src="schaar.png" alt="Schaar" />Je ziet dat hier de plaatjes naast elkaar worden gezet omdat er geen
tussen de plaatjes staat. Als je nu de pagina bekijkt zie je dat de plaatjes alleen wel erg dicht bij elkaar staan. Dit los je gewoon simpel op door er een paar spaties tussen te zetten. Het probleem is helaas dat html spaties negeert als je meer dan 1 spatie hebt staan. Gelukkig is daar wel een oplossing voor. Dat is namelijk . Als je dit in je html script zet word er een spatie weergegeven. We zetten dus tussen het eerste en het tweede plaatje een paar keer zon spatie en tussen de tweede en de derde. Dat gaat er zo uit zien:
<img src="steen.png" alt="Steen" />
<img src="papier.png" alt="Papier" />
<img src="schaar.png" alt="Schaar" />Als je nu je script bekijkt zie je dat het veel mooier is. Indien je het anders wilt kun je het op eigen smaak veranderen.
We willen nu dat als je op het plaatje wijst dat je muis dan veranderd zodat je ziet dat het een link is. Dat doe je door de style van de muis te veranderen. Dat doe je met style="cursor: pointer;". Dat moet je dus in de image tags zetten op dezelfde manier als src="" en alt="". Hoe dit moet begrijp je vast wel. Indien je nog niet begrijpt waar het moet kun je na de volgende stap wel bij het voorbeeld zien waar het staat.
Nu willen we dat er iets gebeurd als je op een plaatje klikt. Die actie doen we met een Javascript functie die we later in deze tutorial gaan maken. Die functie gaat choose heten omdat choose Engels voor kiezen is. We voeren die actie uit als er op het plaatje word geklikt dus we gebruiken onclick="". De Javascript actie die uitgevoerd word is choose(), dus er moet onclick="choose()" staan. Natuurlijk moet de functie wel weten welke keuze je hebt gemaakt dus dat moet tussen de haakjes staan. Als het goed is heb je dan dit:
<img style="cursor:pointer;" onclick="choose(steen)" src="steen.png" alt="Steen" />
<img style="cursor:pointer;" onclick="choose(papier)" src="papier.png" alt="Papier" />
<img style="cursor:pointer;" onclick="choose(schaar)" src="schaar.png" alt="Schaar" />[5] Javascript:
We zijn nu bij het javascript gedeelte beland. We willen namelijk dat er gecontroleerd word of je wint of niet als je op een plaatje klikt. De Javascript moet natuurlijk in tussen de head tags op de volgende manier:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Steen papier schaar</title>
<script>
<!--
Hier komt de Javascript code
//-->
</script>
</head>Wat ik nu ga zeggen en laat zien in de volgende voorbeeld codes moet je neerzetten op de plaats waar nu "Hier komt de Javascript code" staat.
We maken als eerst een functie met de naam choose. In de html hebben we tussen de haakjes de keuze staan en die keuze noemen we in de Javascript selection. Het word dus zo:
function choose(select) {
}We gaan nu ervoor zorgen dat de computer een willekeurige keuze maakt. We stoppen de keuzes in een Array. Die array zit natuurlijk in een variabel en die noemen we options. Daarin zetten we de keuzes die de computer kan maken. Dat zijn natuurlijk steen, papier en schaar. Dit moet dus in de functie komen:
var options = new Array("steen", "papier", "schaar");Options[0] is dan dus steen, options[1] is papier en options[2] is schaar. We maken nu een variabel met de naam i die een willekeurig cijfer bevat die onder de 3 zit. Dat doe je zo:
var i = Math.floor(3*Math.random())De variabel i bevat dus een willekeurig getal. Als we dan options[i] doen krijgen we dus een willekeurige optie. We weten nu dus dat select jouw keuze is en options[i] de keuze van de computer. We moeten nu dus controleren wie de winnaar is. Voordat we dat doen gaan we eerst even een div maken waar de melding in komt. Dit zet je boven of onder de plaatjes. De div krijgt als id message omdat het bericht daarin komt. In de code hieronder staat alles wat je tot nu toe hebt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Steen papier schaar</title>
<script>
<!--
function choose(select) {
var options = new Array("steen", "papier", "schaar");
var i = Math.floor(3*Math.random())
}
//-->
</script>
</head>
<body>
<div id="message"></div>
<br />
<img style="cursor:pointer;" onclick="choose(steen)" src="steen.png" alt="Steen" />
<img style="cursor:pointer;" onclick="choose(papier)" src="papier.png" alt="Papier" />
<img style="cursor:pointer;" onclick="choose(schaar)" src="schaar.png" alt="Schaar" />
</body>
</html>Nu komt de controle. We kijken als eerst of jij en de computer dezelfde keuze hebben gemaakt. Dat doen we zo:
if(select == options[i]) {
}Als dat het geval is moet er in de div met het id "message" een melding komen. Dat doe je zo:
if(select == options[i]) {
document.getElementById(message).innerHTML = U koos + select + en de computer ook. Dit betekent dat jullie gelijk hebben gespeelt.;
}Nu willen we controleren of je hebt verloren. We moeten dus dan alle combinaties controleren waarmee je wint. Dat doe je dus zo. Ik heb nu de melding er al direct bij gezet, omdat je dat nu snapt.
if((select == "steen" && options[i] == "papier") || (select == "papier" && options[i] == "schaar") || (select == "schaar" && options[i] == "steen")) {
document.getElementById(message).innerHTML = U koos + select + en de computer + options[i] + . Dit betekent dat u heeft verloren.;
}Nu willen we natuurlijk nog voor de zekerheid controleren of je werkelijk hebt gewonnen. Daarvoor doe je natuurlijk het tegenovergestelde als zonet. Dat is dus dit:
if((select == "steen" && options[i] == "schaar") || (select == "papier" && options[i] == "steen") || (select == "schaar" && options[i] == "papier")) {
document.getElementById(message).innerHTML = U koos + select + en de computer + options[i] + . Dit betekent dat u heeft gewonnen!.;
}Als het goed is heb je nu dus dit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Steen papier schaar</title>
<script>
<!--
function choose(select) {
var options = new Array("steen", "papier", "schaar");
var i = Math.floor(3*Math.random())
if(select == options[i]) {
document.getElementById(message).innerHTML = U koos + select + en de computer ook. Dit betekent dat jullie gelijk hebben gespeelt.;
}
if((select == "steen" && options[i] == "papier") || (select == "papier" && options[i] == "schaar") || (select == "schaar" && options[i] == "steen")) {
document.getElementById(message).innerHTML = U koos + select + en de computer + options[i] + . Dit betekent dat u heeft verloren.;
}
if((select == "steen" && options[i] == "schaar") || (select == "papier" && options[i] == "steen") || (select == "schaar" && options[i] == "papier")) {
document.getElementById(message).innerHTML = U koos + select + en de computer + options[i] + . Dit betekent dat u heeft gewonnen!.;
}
}
//-->
</script>
</head>
<body>
<div id="message"></div>
<br />
<img style="cursor:pointer;" onclick="choose(steen)" src="steen.png" alt="Steen" />
<img style="cursor:pointer;" onclick="choose(papier)" src="papier.png" alt="Papier" />
<img style="cursor:pointer;" onclick="choose(schaar)" src="schaar.png" alt="Schaar" />
</body>
</html>[6] Scorebord (extra):
Het script werkt nu, maar we willen natuurlijk ook dat hij bijhoud hoevaak je hebt gewonnen, verloren en gelijk gespeeld hebt. Dat zet je het beste onder de plaatjes. De getallen kunnen het beste dikgedrukt, want dan is het veel overzichtelijker. Aangezien ik xHTML werk in plaats van HTML doen we dat met en niet met . We geven de s ook even ids zodat we de inhoud daarvan met Javascript kunnen veranderen. Je body code moet er dan ongeveer zo uit zien:
<div id="message"></div>
<br />
<img style="cursor:pointer;" onclick="choose(steen)" src="steen.png" alt="Steen" />
<img style="cursor:pointer;" onclick="choose(papier)" src="papier.png" alt="Papier" />
<img style="cursor:pointer;" onclick="choose(schaar)" src="schaar.png" alt="Schaar" /><br />
<br />
U heeft <strong id="win">0</strong> keer gewonnen.<br />
U heeft <strong id="lose">0</strong> keer verloren.<br />
U heeft <strong id="draw">0</strong> keer gelijk gespeelt.Nu moeten we natuurlijk via Javascript de score veranderen als je wint, verliest of gelijk speelt. Dit is erg makkelijk, omdat je de controles al hebt gemaakt. Laten we maar beginnen met gelijk spelen. Hier is de code die je dan krijgt:
if(select == options[i]) {
document.getElementById(message).innerHTML = U koos + select + en de computer ook. Dit betekent dat jullie gelijk hebben gespeelt.;
document.getElementById(draw).innerHTML++;
}Ik zal nog even uitleggen wat er is gebeurd voor als je het niet helemaal begreep. We hebben onder de melding dat je gelijk hebt gespeelt ervoor gezorgt dat er 1 bij de div met het id draw word opgeteld. Dit is standaard 0, dus 0 + 1 = 1. In het scorebord staat nu dus 1 op de plaats waar de gelijke standen staan. Als je nog een keer gelijk speelt komt er dus nog een keer 1 bij dus dan heb je 2. Dit doen we net zo bij verliezen en winnen, dus het word zo:
if(select == options[i]) {
document.getElementById(message).innerHTML = U koos + select + en de computer ook. Dit betekent dat jullie gelijk hebben gespeelt.;
document.getElementById(draw).innerHTML++;
}
if((select == "steen" && options[i] == "papier") || (select == "papier" && options[i] == "schaar") || (select == "schaar" && options[i] == "steen")) {
document.getElementById(message).innerHTML = U koos + select + en de computer + options[i] + . Dit betekent dat u heeft verloren.;
document.getElementById(lose).innerHTML++;
}
if((select == "steen" && options[i] == "schaar") || (select == "papier" && options[i] == "steen") || (select == "schaar" && options[i] == "papier")) {
document.getElementById(message).innerHTML = U koos + select + en de computer + options[i] + . Dit betekent dat u heeft gewonnen!.;
document.getElementById(win).innerHTML++;
}[7] Slot:
Ik hoop dat jullie veel van deze tutorial hebben geleerd. Ik heb tenminste wel geleerd dat een tutorial echt veel langer duurt dan scripten. Indien er spellingsfouten zijn of als er verbeterpunten zijn sta ik open voor commentaar. Zolang het maar geen extreem negatief comentaar is. Jullie kunnen stemmen in de poll. Doe dit alleen als u deze tutorial echt heeft doorgelezen en niet als eerste indruk. Ik heb graag dat als jullie stemmen dat jullie ook argumenten plaatsen in reacties.
Jullie mogen dit script zelf gebruiken voor eigen sites maar jullie hebben niet de rechten om deze tutorial en/of het script te verveelvoudigen op welke wijze dan ook.
Wietse de Vries
//16-05-2012: Fout aangepast met dank aan Xjessex
, zeker een 9 waard.
)
