<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.divvenster
{
width:100px;
height:100px;
border:solid 1px black;
float : left;
margin : 5px;
}
.grotediv
{
width:500px;
height:600px;
border:solid 1px black;
background-color : yellow;
}
</style>
<script>
var divisie;
var klikken = 0;
var klik1;
var klik2;
var array1;
var teller;
var keuze1;
var keuze2;
var hoeveelkeer = 0;
var ucant = false;
window.onload= function()
{
divisie = document.getElementById("grotediv");
Initieer();
}
function wijzigkleur(obj) {
if (array1[obj.id] != 0) {
klikken++;
}
if (klikken == 1) {
klik1 = obj.id;
keuze1 = document.getElementById(klik1);
keuze1.style.backgroundColor = array1[klik1];
//alert(obj.id);
}
if (klikken == 2) {
klik2 = obj.id;
if(klik2 == klik1){
keuze1.style.backgroundColor = 'white';
hoeveelkeer++;
klikken = 0;
klik1 = false;
klik2 = false;
}
else{
keuze2 = document.getElementById(klik2);
keuze2.style.backgroundColor = array1[klik2];
klikken = 0;
if(array1[klik1] == array1[klik2]){
array1[klik1] = 0;
array1[klik2] = 0;
// alert(obj.id);
hoeveelkeer++;
klik1 = false;
klik2 = false;
}
if(array1[klik1] != array1[klik2]) {
setTimeout("hide()", 1000);
// alert(klik1 + " en " + klik2);
klik1 = false;
klik2 = false;
}
}
}
}
function hide() {
keuze1.style.backgroundColor = 'white';
keuze2.style.backgroundColor = 'white';
hoeveelkeer++;
}
function Shuffle(o) {
for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j],o[j] = x);
return o;
}
function Initieer()
{
var resultaat = '';
divisie.innerHTML = resultaat;
for (teller = 0; teller < 12; teller++) {
resultaat += '<div id="' + teller + '"class="divvenster" onclick="wijzigkleur(this)" ></div>';
}
divisie.innerHTML = resultaat;
array1= new Array('blue', 'blue', 'orange', 'orange', 'red','red','yellow','yellow','green','green','purple','purple');
Shuffle(array1);
klikken = 0;
}
</script>
</head>
<body>
<div id="grotediv" ></div>
<button onclick="Initieer()">Shuffle</button>
</body>
</html>
