<html>
<head>
<title>MEMORY</title>
<style>
td {width:80px; height:80px; font-size:40; text-align:center; }
html, body {width: 100%;height: 100%;padding: 0;margin: 0;text-align:center;font-size:40;}
option, input {width:100px;height:30px;font-size:20px;text-align: center;}
</style>
</head>
<body>
<select size="2" id="sel"><option selected value="Tiere1">Tiere1</option><option value="Tiere2" >Tiere2</option></select><br>
Nach Neustart Felder anklicke, Ergebnisse auf unterem Balken.<br>
<table align="center" id="tblMain" border="1" style="cursor: pointer;">
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</table>
<input id="start" type="button" style="width: 400px;height: 40px; text-align:left;" value="Fehleranzeige">
<script>
var sel=document.getElementById('sel');
var start=document.getElementById('start');
var z=0;
var r=0;
var fc=0;
var myz0=0;var mys0=0;var myz1=0;var mys1=0;
switch(sel.value){
case 'Tiere1': var tab=[['Hamster','Katze','Igel','Tiger'],['Katze','Lama','Goldfisch','Löwe'],['Lama','Igel','Hase','Hamster'],['Löwe','Goldfisch','Hase','Tiger']];
mischen();
break;
case 'Tiere2': var tab=[['Spinne','Maulwurf','Esel','Rabe'],['Biene','Adler','Ratte','Rabe'],['Pony','Esel','Spinne','Adler'],['Pony','Ratte','Maulwurf','Biene']];
mischen();
break;
}
var tbl = document.getElementById('tblMain');//javascript Zugriff auf Tabelle, Ereignisauslösung bei Feldkontakt
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++){
tbl.rows[i].cells[j].onclick = function () {if(this.innerHTML=='')setval(this); };
}}
function setval(cel) {
if(z%2==0){
myz0=cel.parentElement.rowIndex;
mys0=cel.cellIndex;
cel.innerHTML=tab[myz0][mys0];
}
if(z%2==1){
myz1=cel.parentElement.rowIndex;
mys1=cel.cellIndex;
if(tab[myz0][mys0]!=tab[myz1][mys1])
{
fc++;
start.value=fc+'falsch/zuletzt:'+tab[myz0][mys0]+'<>'+tab[myz1][mys1];
tbl.rows[myz0].cells[mys0].innerHTML='';
tbl.rows[myz1].cells[mys1].innerHTML='';
}
else {cel.innerHTML=tab[myz1][mys1];}
}
z++;
}
function mischen(){
var z1=0,s1=0,z2=0,s2=0;
var cy='';
for(k=0;k<8;k++){
z1=Math.floor((Math.random() * 3));
s1=Math.floor((Math.random() * 3));
z2=Math.floor((Math.random() * 3));
s2=Math.floor((Math.random() * 3));
cy=tab[z1][s1];tab[z1][s1]=tab[z2][s2];tab[z2][s2]=cy;
}
}
</script>
</body>
</html>