Plaats de stylesheet in de head-sectie van jouw pagina. Vervang de (start)body-tag door het exemplaar hieronder aangegeven, en plaats de html-code en het javascript in de body-sectie van de pagina. En als je daar geen zin in hebt, speel je gewoon boter-kaas-en-eieren op de kompoos.nl.
<style type="text/css">
form{
margin-left:10px}
button:hover{
cursor:pointer}
input:hover{
cursor:pointer}
.rechts{
text-align:right}
input{
margin:3px}
select{
background:#060;
color:#000;}
option{
color:#000;
background:#060;
border:0}
.tic_tac_toe_klein{
font-size:0.7em;
background:#022;
color:#090}
.tic_tac_toe_groot{
font-size:1.5em;
background:#022;
color:#090}
table{
margin:0.5em;
background:#041;
color:#82B282}
.tic_tac_vak{
width:100px;
height:100px;
border:10px solid #030;
background-color:inherit;
color:#ddd;
font-size:4em;
font-family:monospace;
font-weight:bold}
.tic_tac_toe_bord{
margin-right:50px}
.hoeveelwin{
color:#fff;
background-color:#020;
border:none}
.tic_tac_toe_speler{
font-family:monospace;
font-size:160%}
.adjust{
height:110px}
</style>
<body onload="maak_tic_tac_bord();tic_tac_toe_statistieken();nieuwe_boter_kaas_eieren();">
<form name="hetbord" onsubmit="return false;">
<table><tr><td>
<table class="tic_tac_toe_bord">
<tr>
<td><input class="tic_tac_vak" name="vak1" type=button onclick="zet_tac(this);blur();"></td>
<td><input class="tic_tac_vak" name="vak2" type=button onclick="zet_tac(this);blur();"></td>
<td><input class="tic_tac_vak" name="vak3" type=button onclick="zet_tac(this);blur();"></td>
<td class="adjust"></td>
</tr><tr>
<td><input class="tic_tac_vak" name="vak4" type=button onclick="zet_tac(this);blur();"></td>
<td><input class="tic_tac_vak" name="vak5" type=button onclick="zet_tac(this);blur();"></td>
<td><input class="tic_tac_vak" name="vak6" type=button onclick="zet_tac(this);blur();"></td>
<td class="adjust"></td>
</tr><tr>
<td><input class="tic_tac_vak" name="vak7" type=button onclick="zet_tac(this);blur();"></td>
<td><input class="tic_tac_vak" name="vak8" type=button onclick="zet_tac(this);blur();"></td>
<td><input class="tic_tac_vak" name="vak9" type=button onclick="zet_tac(this);blur();"></td>
<td class="adjust"></td>
</tr>
</table>
</td><td>
<table>
<tr>
<th>speler</th>
<th>begint</th>
<th></th>
<th>gewonnen</th>
</tr><tr>
<th class="tic_tac_toe_speler">X</th>
<td><label for="boter"></label><input id="boter" type=radio name="eerstezet_tac" value="X" checked onchange="nieuwe_boter_kaas_eieren();"></td>
<td><label for="en"></label><select id="en" name=speler1 onchange="nieuwe_boter_kaas_eieren()">
<option value=1 selected>speler
<option value=2>beginner
<option value=3>gevorderd
<option value=4>topper
<option value=5>expert
</select></td>
<td class="rechts"><input type="button" name="x_gewonnen" class="hoeveelwin" value="0"></td>
</tr><tr>
<th class="tic_tac_toe_speler">O</th>
<td><label for="kaas"></label><input id="kaas" type=radio name="eerstezet_tac" value="O" onchange="nieuwe_boter_kaas_eieren();"></td>
<td><label for="eieren"></label><select id="eieren" name=speler2 onchange="nieuwe_boter_kaas_eieren()">
<option value=1>speler-2
<option value=2>beginner
<option value=3 selected>gevorderd
<option value=4>topper
<option value=5>expert
</select></td>
<td class="rechts">
<input type=button name="o_gewonnen" class="hoeveelwin" value="0"></td>
</tr><tr>
<th><input class="tic_tac_toe_klein" type="button" value="reset" onclick="nieuwe_statistieken();blur();"></th>
<th></th>
<th>gelijk spel</th>
<td class="rechts"><input type="button" name="gelijk_spel" class="hoeveelwin" value="0"></td>
</tr>
</table>
<pre>
</pre>
<p><input class="tic_tac_toe_groot" type="button" value="spelen" onclick="blur();nieuwe_boter_kaas_eieren();return(false);"><p>
</td></tr>
</table>
</form>
<script>
var beurt = -1, i, j,
x_gewonnen = 0,
o_gewonnen = 0,
gelijk_spel = 0,
bord, eenzet_boter_kaas_eieren, zet_boter_kaas_eieren, zet_tac, zet_de_waarde;
function maak_tic_tac_bord() {
var dob = document.hetbord;
bord = [dob.vak7, dob.vak8, dob.vak9, dob.vak4, dob.vak5, dob.vak6, dob.vak1, dob.vak2, dob.vak3];
}
function haal_cookie(name) {
var prefix = name + "=";
var begin = document.cookie.indexOf("; " + prefix);
if (begin == -1) {
begin = document.cookie.indexOf(prefix);
if (begin !== 0) {
return null;
}
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = document.cookie.length;
}
return encodeURI(document.cookie.substring(begin + prefix.length, end));
}
function schrijf_score() {
var dob = document.hetbord;
dob.x_gewonnen.value = x_gewonnen;
dob.o_gewonnen.value = o_gewonnen;
dob.gelijk_spel.value = gelijk_spel;
var cookie = ':' + x_gewonnen + ':' + o_gewonnen + ':' + gelijk_spel;
var expires = new Date();
expires.setTime(expires.getTime() + 365 * 24 * 60 * 60 * 1000);
document.cookie = ('bke' + '=' + encodeURI(cookie) + '; expires=' + expires.toGMTString());
}
function tic_tac_toe_statistieken() {
var cookie = haal_cookie('bke');
if (cookie !== null && cookie.length > 1) {
var stats = cookie.substring(1, cookie.length);
if (stats !== null) {
var splits_de_waarden = stats.split(':');
var temp;
if (splits_de_waarden.length == 3) {
var re = new RegExp("^([0-9]*)$");
var sp0 = splits_de_waarden[0];
var sp1 = splits_de_waarden[1];
var sp2 = splits_de_waarden[2];
if (re.test(splits_de_waarden[0])) {
x_gewonnen = sp0;
}
if (re.test(splits_de_waarden[1])) {
o_gewonnen = sp1;
}
if (re.test(splits_de_waarden[2])) {
gelijk_spel = sp2;
}
schrijf_score();
}
}
}
}
function hoe_toestand() {
var tic_tac_toe_stand = 0;
for (i = 0; i < 9; i++) {
var tac_vak = bord[i];
var value = 0;
if (tac_vak.value.indexOf('X') != -1) {
value = 0x3;
}
if (tac_vak.value.indexOf('O') != -1) {
value = 0x2;
}
tic_tac_toe_stand |= value << (i * 2);
}
return tic_tac_toe_stand;
}
function check_tic_zet(tic_tac_toe_stand) {
var de_zetjes = 0;
for (i = 0; i < 9; i++) {
if ((tic_tac_toe_stand & (1 << (i * 2 + 1))) === 0) {
de_zetjes |= 1 << i;
}
}
return de_zetjes;
}
function show_winnen(tic_tac_toe_stand) {
if ((tic_tac_toe_stand & 0x3F000) == 0x3F000) {
return 0x13F000;
}
if ((tic_tac_toe_stand & 0x3F000) == 0x2A000) {
return 0x22A000;
}
if ((tic_tac_toe_stand & 0x00FC0) == 0x00FC0) {
return 0x100FC0;
}
if ((tic_tac_toe_stand & 0x00FC0) == 0x00A80) {
return 0x200A80;
}
if ((tic_tac_toe_stand & 0x0003F) == 0x0003F) {
return 0x10003F;
}
if ((tic_tac_toe_stand & 0x0003F) == 0x0002A) {
return 0x20002A;
}
if ((tic_tac_toe_stand & 0x030C3) == 0x030C3) {
return 0x1030C3;
}
if ((tic_tac_toe_stand & 0x030C3) == 0x02082) {
return 0x202082;
}
if ((tic_tac_toe_stand & 0x0C30C) == 0x0C30C) {
return 0x10C30C;
}
if ((tic_tac_toe_stand & 0x0C30C) == 0x08208) {
return 0x208208;
}
if ((tic_tac_toe_stand & 0x30C30) == 0x30C30) {
return 0x130C30;
}
if ((tic_tac_toe_stand & 0x30C30) == 0x20820) {
return 0x220820;
}
if ((tic_tac_toe_stand & 0x03330) == 0x03330) {
return 0x103330;
}
if ((tic_tac_toe_stand & 0x03330) == 0x02220) {
return 0x202220;
}
if ((tic_tac_toe_stand & 0x30303) == 0x30303) {
return 0x130303;
}
if ((tic_tac_toe_stand & 0x30303) == 0x20202) {
return 0x220202;
}
if ((tic_tac_toe_stand & 0x2AAAA) == 0x2AAAA) {
return 0x300000;
}
return 0;
}
function random_zet(de_zetjes) {
var aantal_zetten = 0;
for (i = 0; i < 9; i++) {
if ((de_zetjes & (1 << i)) !== 0) {
aantal_zetten++;
}
}
if (aantal_zetten > 0) {
var tzetnum = Math.ceil(Math.random() * aantal_zetten);
aantal_zetten = 0;
for (j = 0; j < 9; j++) {
if ((de_zetjes & (1 << j)) !== 0) {
aantal_zetten++;
}
if (aantal_zetten == tzetnum) {
zet_tac(bord[j]);
return;
}
}
}
}
function zet_beginner() {
var tic_tac_toe_stand = hoe_toestand();
var winnaar = show_winnen(tic_tac_toe_stand);
if (winnaar === 0) {
random_zet(check_tic_zet(tic_tac_toe_stand));
}
}
function open_boter_kaas(tic_tac_toe_stand) {
var mask = tic_tac_toe_stand & 0x2AAAA;
if (mask === 0x00000) {
return 0x1FF;
}
if (mask == 0x00200) {
return 0x145;
}
if (mask == 0x00002 || mask == 0x00020 || mask == 0x02000 || mask == 0x20000) {
return 0x010;
}
if (mask == 0x00008) {
return 0x095;
}
if (mask == 0x00080) {
return 0x071;
}
if (mask == 0x00800) {
return 0x11C;
}
if (mask == 0x08000) {
return 0x152;
}
return 0;
}
function slimme_zet() {
var tic_tac_toe_stand = hoe_toestand();
var winnaar = show_winnen(tic_tac_toe_stand);
if (winnaar === 0) {
var de_zetjes = open_boter_kaas(tic_tac_toe_stand);
if (tic_tac_toe_stand === 0) {
de_zetjes = 0x145;
}
if (de_zetjes === 0) {
de_zetjes = eenzet_boter_kaas_eieren(tic_tac_toe_stand);
}
random_zet(de_zetjes);
}
}
function tic_tac_tussenzet() {
var tic_tac_toe_stand = hoe_toestand();
var winnaar = show_winnen(tic_tac_toe_stand);
if (winnaar === 0) {
random_zet(eenzet_boter_kaas_eieren(tic_tac_toe_stand));
}
}
function volgende_beurt() {
beurt = -beurt;
if (beurt == 1) {
if (document.hetbord.speler1.selectedIndex == 1) {
zet_beginner();
}
if (document.hetbord.speler1.selectedIndex == 2) {
tic_tac_tussenzet();
}
if (document.hetbord.speler1.selectedIndex == 3) {
slimme_zet();
}
if (document.hetbord.speler1.selectedIndex == 4) {
zet_boter_kaas_eieren();
}
} else {
if (document.hetbord.speler2.selectedIndex == 1) {
zet_beginner();
}
if (document.hetbord.speler2.selectedIndex == 2) {
tic_tac_tussenzet();
}
if (document.hetbord.speler2.selectedIndex == 3) {
slimme_zet();
}
if (document.hetbord.speler2.selectedIndex == 4) {
zet_boter_kaas_eieren();
}
}
}
function verplaatsstat(tic_tac_toe_stand, zet_tac, volgende_beurt) {
var value = 0x3;
if (volgende_beurt == -1) {
value = 0x2;
}
return (tic_tac_toe_stand | (value << (zet_tac * 2)));
}
function nieuwe_statistieken() {
x_gewonnen = 0;
o_gewonnen = 0;
gelijk_spel = 0;
schrijf_score();
}
function schrijf_statistieken(tic_tac_toe_stand) {
var winnaar = show_winnen(tic_tac_toe_stand);
if ((winnaar & 0x300000) !== 0) {
if ((winnaar & 0x300000) == 0x100000) {
x_gewonnen++;
} else if ((winnaar & 0x300000) == 0x200000) {
o_gewonnen++;
} else {
gelijk_spel++;
}
schrijf_score();
}
for (i = 0; i < 9; i++) {
var value = '';
if ((tic_tac_toe_stand & (1 << (i * 2 + 1))) !== 0) {
if ((tic_tac_toe_stand & (1 << (i * 2))) !== 0) {
value = 'X';
} else {
value = 'O';
}
}
if ((winnaar & (1 << (i * 2 + 1))) !== 0) {
if (bord[i].style) {
bord[i].style.backgroundColor = '#025';
} else {
value = 'Z' + value + 'Z';
}
} else {
if (bord[i].style) {
bord[i].style.backgroundColor = '#040';
}
}
bord[i].value = value;
}
}
function zet_tac(tac_vak) {
if (tac_vak.value === '') {
var tic_tac_toe_stand = hoe_toestand();
var winnaar = show_winnen(tic_tac_toe_stand);
if (winnaar === 0) {
for (i = 0; i < 9; i++) {
if (bord[i] == tac_vak) {
tic_tac_toe_stand = verplaatsstat(tic_tac_toe_stand, i, beurt);
}
}
schrijf_statistieken(tic_tac_toe_stand);
volgende_beurt();
}
}
}
function zet_boter_kaas_eieren() {
var tic_tac_toe_stand = hoe_toestand();
var winnaar = show_winnen(tic_tac_toe_stand);
if (winnaar === 0) {
var de_zetjes = check_tic_zet(tic_tac_toe_stand);
var tac_toe = -999;
var goeiezet_tacen = open_boter_kaas(tic_tac_toe_stand);
if (goeiezet_tacen === 0) {
for (i = 0; i < 9; i++) {
if ((de_zetjes & (1 << i)) !== 0) {
var value = zet_de_waarde(tic_tac_toe_stand, i, beurt, beurt, 15, 1);
if (value > tac_toe) {
tac_toe = value;
goeiezet_tacen = 0;
}
if (tac_toe == value) {
goeiezet_tacen |= (1 << i);
}
}
}
}
random_zet(goeiezet_tacen);
}
}
function zet_de_waarde(istate, zet_tac, doe_het_voor, volgende_beurt, limiet, depth) {
var tic_tac_toe_stand = verplaatsstat(istate, zet_tac, volgende_beurt);
var winnaar = show_winnen(tic_tac_toe_stand);
if ((winnaar & 0x300000) == 0x300000) {
return 0;
} else if (winnaar !== 0) {
if (doe_het_voor == volgende_beurt) {
return 10 - depth;
}
else {
return depth - 10;
}
}
var tac_toe = 999;
if (doe_het_voor != volgende_beurt) {
tac_toe = -999;
}
if (depth == limiet) {
return tac_toe;
}
var de_zetjes = check_tic_zet(tic_tac_toe_stand);
for (i = 0; i < 9; i++) {
if ((de_zetjes & (1 << i)) !== 0) {
var value = zet_de_waarde(tic_tac_toe_stand, i, doe_het_voor, -volgende_beurt, 10 - Math.abs(tac_toe), depth + 1);
if (Math.abs(value) != 999) {
if (doe_het_voor == volgende_beurt && value < tac_toe) {
tac_toe = value;
} else if (doe_het_voor != volgende_beurt && value > tac_toe) {
tac_toe = value;
}
}
}
}
return tac_toe;
}
function detecteer_zet(tic_tac_toe_stand, tac_vaknummer, volgende_beurt) {
var value = 0x3;
if (volgende_beurt == -1) {
value = 0x2;
}
var tnieuwestat = tic_tac_toe_stand | (value << tac_vaknummer * 2);
return show_winnen(tnieuwestat);
}
function eenzet_boter_kaas_eieren(tic_tac_toe_stand) {
var de_zetjes = check_tic_zet(tic_tac_toe_stand);
for (i = 0; i < 9; i++) {
if ((de_zetjes & (1 << i)) !== 0) {
if (detecteer_zet(tic_tac_toe_stand, i, beurt)) {
zet_tac(bord[i]);
return 0;
}
}
}
for (j = 0; j < 9; j++) {
if ((de_zetjes & (1 << j)) !== 0) {
if (detecteer_zet(tic_tac_toe_stand, j, -beurt)) {
zet_tac(bord[j]);
return 0;
}
}
}
return de_zetjes;
}
function tel_boter_kaas_eieren(tic_tac_toe_stand) {
var count = 0;
for (i = 0; i < 9; i++) {
if ((tic_tac_toe_stand & (1 << (i * 2 + 1))) !== 0) {
count++;
}
}
return count;
}
function nieuwe_boter_kaas_eieren() {
var tic_tac_toe_stand = hoe_toestand();
var winnaar = show_winnen(tic_tac_toe_stand);
if (winnaar === 0 && tel_boter_kaas_eieren(tic_tac_toe_stand) > 1) {
if (beurt == 1) {
o_gewonnen++;
}
else {
x_gewonnen++;
}
schrijf_score();
}
schrijf_statistieken(0);
if (document.hetbord.eerstezet_tac[0].checked == '1') {
beurt = -1;
} else {
beurt = 1;
}
volgende_beurt();
}
</script>