Hey all. I'm doing a memory game with Javascript using innerhtml to generate table where memory "cards" are depending on difficulty. The work for the code is still in progress as I have to make functions for gameplay as well. Though there's no sense to proceed if I can't get making the table to work.
Currently I've made tablecode for easy difficulty (helppo) however, when I click into image which should generate the code into div (id = pelialue), nothing happens. I'm not very experienced in javascript so there might be some simple thing I haven't noticed. Hope some of you can help me. Variables and function names are in my native language (finnish).
(PHP or Flash ain't option)
Here's the unfinished code entirely:
[HTML]<!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>
<title>
Muistipeli
</title>
<link rel="stylesheet" type="text/css"
href="tyyli.css" />
<script language=">
function Pala(nimi, kuva, monta){
this.nimi = nimi;
this.kuva = kuva;
this.monta = monta;
}
function valittu(nimi){
}
function kokoa(paloja){
var pelipalat = "";
var kerta = 0;
var valittuja = 0;
while (paloja > 0){
random = Math.ceil(Math.random() * (paloja/2));
if(palat[random-1].monta==2){valittuja++;}
if(!palat[random-1].monta===0 && !(valittuja>=(paloja/2))){
pelipalat = pelipalat + "<td><img src='Tausta.bmp' name='"+palat[random-1].nimi+"' onclick='valittu("+palat[random-1].nimi+");'></td>";
palat[random-1].monta--;
paloja--;
kerta++;
if(kerta==4){
pelipalat= pelipalat + "</tr><tr>";
kerta=0;
}
}
}
return pelipalat;
}
var palat = [];
palat[0] = new Pala("Kakku","Kakku.bmp", 2);
palat[1] = new Pala("Kummitus","Kummitus.bmp", 2);
palat[2] = new Pala("Kyna","Kyna.bmp", 2);
palat[3] = new Pala("Kirja","Kirja.bmp", 2);
palat[4] = new Pala("Kukka","Kukka.bmp", 2);
palat[5] = new Pala("Talo","Talo.bmp", 2);
function helppo(){
var helppous = "<table><tr>";
helppous = helppous + kokoa(12);
helppous = helppous + "</tr></table>";
document.getElementById('pelialue').innerHTML = helppous;
}
</script>
</head>
<body>
<table class="vaikeustaso">
<tr>
<th colspan="3">VALITSE UUSI PELI</th>
</tr>
<tr>
<td class="vaikeus" width="113px"><img class="vaikea" src="Helppo.bmp" alt="Aloita helppo peli" onMouseUp="document.helpponappi.src='Helppo.bmp'; helppo();" onMouseDown="document.helpponappi.src='Helppopain. bmp'; " onMouseOut="document.helpponappi.src='Helppo.bmp'; " name="helpponappi"></td>
<td class="vaikeus" width="142px"><img class="vaikea" src="Normaali.bmp" alt="Aloita normaali peli" onMouseUp="document.norminappi.src='Normaali.bmp'; normaali();" onMouseDown="document.norminappi.src='Normaalipain .bmp'; " onMouseOut="document.norminappi.src='Normaali.bmp' ;" name="norminappi"></td>
<td class="vaikeus" width="108px"><img class="vaikea" src="Vaikea.bmp" alt="Aloita vaikea peli" onMouseUp="document.vaikeanappi.src='vaikea.bmp'; vaikea();" onMouseDown="document.vaikeanappi.src='Vaikeapain. bmp'; " onMouseOut="document.vaikeanappi.src='Vaikea.bmp'; " name="vaikeanappi"></td>
</tr>
</table>
<div id="pelialue" align="center" class="pelialue">Pelialue
</div>
</body>
</html>[/HTML]