By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,461 Members | 1,135 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,461 IT Pros & Developers. It's quick & easy.

Javascript problem: Memory game

P: 42
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]
Aug 12 '08 #1
Share this Question
Share on Google+
10 Replies


acoder
Expert Mod 15k+
P: 16,027
The first problem is this line:
[html]<script language=">[/html]Replace that with:
[html]<script type="text/javascript">[/html]

PS. please use code tags when posting code. Thanks!
Aug 12 '08 #2

rnd me
Expert 100+
P: 427
document.helpponappi.src is not the propert way to point to a tag by id.

use document.getElementById("id") instead.
Aug 12 '08 #3

P: 42
Thanks for the help, and now I've managed to make it print some table cells with test clauses but it still doesn't get quite finished with the table. The problem is in function kokoa(), I believe.

In other words, it seems to stuck in eternal loop somehow.
Aug 13 '08 #4

acoder
Expert Mod 15k+
P: 16,027
That's probably because it doesn't meet the if condition to decrease the paloja value (to end the loop). What exactly is the while loop supposed to do, i.e. what are you expecting it to do, step by step?
Aug 13 '08 #5

P: 42
I think I solved it for now. Thanks for the help people. Indeed cause was in the if statement in kokoa function.

I'll ask here if I encounter new problems.
Aug 13 '08 #6

acoder
Expert Mod 15k+
P: 16,027
No problem. Glad to hear that you managed to solve it. Can you post the solution?
Aug 13 '08 #7

P: 42
Well, it didn't function properly actually after I did the fix. But now it works after I started to make a detailed post about the problem with code comments of it here (which made me double check and rethink most bits).

(Fixed) code for the function:

Expand|Select|Wrap|Line Numbers
  1. function kokoa(paloja){
  2.     var pelipalat = "";
  3.     var kerta = 0;
  4.     var tosipala = paloja;
  5.     var valittuja = 0;
  6.     var random;
  7.     while (paloja > 0){
  8.         random = Math.floor(Math.random() * palat.length);
  9.         while (palat[random].monta==0){random = Math.floor(Math.random() * palat.length);}
  10.         if(!(palat[random].monta==2 && valittuja>(tosipala/2))){
  11.             if(palat[random].monta==2){valittuja++;}
  12.             pelipalat = pelipalat + "<td><img src='Tausta.bmp' name='"+palat[random].nimi+"' onclick='valittu("+palat[random].nimi+");'></td>";
  13.             palat[random].monta = palat[random].monta - 1;
  14.             paloja--;
  15.             kerta++;
  16.             if(kerta==5){
  17.                 pelipalat= pelipalat + "</tr><tr>";
  18.                 kerta=0;
  19.             }
  20.         }
  21.     }
  22.     return pelipalat;
  23. }
I had changed it a bit but the real stupid oversight was this:

if(!(palat[random].monta==2 && valittuja>(paloja/2))){

Notice what was the problem?
Aug 13 '08 #8

acoder
Expert Mod 15k+
P: 16,027
Thanks for posting. It'd make it easier if you could translate the variable names for me to answer that question.
Aug 13 '08 #9

P: 42
Thanks for posting. It'd make it easier if you could translate the variable names for me to answer that question.
I don't think strict translations would be enough in that case, I'd have to explain them as well. But it isn't important. What is important is that I've completed this pairs game.

But the reason why it got stuck on the loop was valittuja > paloja / 2.
You see that I decrease paloja in the loop. This was the oversight that made it stuck in loop. That's why I added another variable tosipala, to replace paloja / 2, which doesn't get decreased.
Aug 15 '08 #10

acoder
Expert Mod 15k+
P: 16,027
Thanks for the explanation. There wasn't even a need for the translation - I could've just replaced the variables with x/y; just being a bit lazy ;)
Aug 17 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.