Memory game

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Memory game

Post by papa »

Hi,

I'm currently coding a memory game to practise some JS. I got stuck pretty fast however and need some input to move forward.

Instead of using an html form I wanted to try using JS instead so clicking on an image displays the image randomly generated. I now need to:
1. When 2 images are displayed and dont' match, go back to default image (blank image).
2. When 2 images are displayed and match, OK, move forward.

Very simple things, but I'm not that savy with JS. :)

I've tried a couple of different solutions, but as the html code doesn't change I don't really know what to look for when validating my matches.

Code: Select all

 
<?php
/*
SPECS
 
- A grid on 4x3, 4x4 or 4x5 (12,16,20)
- 20 different icons.
- Match icons 2 and 2.
 
*/
class Memory {
    
    public $icons = array();
 
    function __Construct($grid_size) {
        $this->grid_size = $grid_size;
        $this->icons = $this->generateGrid(); 
    }
    
    public function displayGrid() {
        for($i=0; $i<$this->grid_size; $i++) {
            
            if($i%4 == 0) echo "<br />\n";
            echo "<a href=\"#\" onclick=\"showIcon(".$this->icons[$i].", $i)\"><img src=\"./icons/icon_back.png\" id=\"icon".$i."\" width=\"32\" height=\"32\" alt=\"icon\" title=\"icon\" border=\"0\" /></a>\n";
        }
    }
    
    public function generateGrid() {
        $icons = range(1,20);
        shuffle($icons);
        $icons = array_slice($icons, 0, $this->grid_size / 2);
        return array_merge($icons, $icons);;
    }
}
 
 
//THE GAME
$m = new Memory(20);
 
print_r($m->icons);
 
?>
<html>
 
<head>
 
<title>Memory</title>
 
</head>
 
<body>
 
<?php $m->displayGrid(); ?>
 
<script type="text/javascript">
 
function showIcon(img, id) {
    var image = document.getElementById("icon"+id);
    image.src="./icons/"+img+".png";
}
 
</script>
</body>
 
</html>
 
 
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Memory game

Post by kaszu »

I got exited and wrote it.
Game: http://www.skudra.eu/kasis/memory-game/
Source: http://www.skudra.eu/kasis/memory-game/source.txt

Instead of inline calls to functions I used link.onclick and image id I set in link anchor as "#IMAGE_ID".
When link is clicked, I check if 1 image is not visible already, if not, then show the one on which user clicked and save link/imageId. If there is already 1 visible, then check if both imageId matches. If they don't then hide both images.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Memory game

Post by califdon »

Very nice, kaszu! Of course, papa will probably want to kick your butt because he wanted to be the first! :lol:

Nice logic and it works slick.

A few years ago I made a little JS 'game', although it was quite different, but I wanted to learn how to use JS. It's based on a California driver's test booklet and although it doesn't really test your reaction time, that's what I called it:
http://ravey.net/reactiontime/

The JS can be viewed in the source, of course, but if anyone wants further info, PM me.
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Memory game

Post by papa »

kaszu wrote:I got exited and wrote it.
Game: http://www.skudra.eu/kasis/memory-game/
Source: http://www.skudra.eu/kasis/memory-game/source.txt

Instead of inline calls to functions I used link.onclick and image id I set in link anchor as "#IMAGE_ID".
When link is clicked, I check if 1 image is not visible already, if not, then show the one on which user clicked and save link/imageId. If there is already 1 visible, then check if both imageId matches. If they don't then hide both images.
Haha you bastard, I'll take a look. Thanks!!! :D


edit: I have reviewed the code now and it's looks very nice, hope you don't mind me re-using it. :)
Cool that you saved the little php code I did. ;)
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Memory game

Post by papa »

A beta is up and running if you are bored:
http://craven-studio.com/Memory.php

:D
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Memory game

Post by califdon »

papa wrote:A beta is up and running if you are bored:
http://craven-studio.com/Memory.php

:D
Nice job, papa! Now I know where to come when I'm bored! ;)
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Memory game

Post by kaszu »

Looks really nice!

After several attempts I gave up, can't do it in 10 tries. Once again my memory let me down :D
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Memory game

Post by papa »

Hehe thanks guys, even though I think Kaszu should get most of the credit. Very good for my learning curve though. :)

I'm going to add a select box for level (easy, medium, hard) for us senile people, also haven't figured out a good way to end the game when you win yet. 8)
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Memory game

Post by califdon »

papa wrote:Hehe thanks guys, even though I think Kaszu should get most of the credit. Very good for my learning curve though. :)

I'm going to add a select box for level (easy, medium, hard) for us senile people, also haven't figured out a good way to end the game when you win yet. 8)
How about a cash prize?? :wink:

By the way, I'm surely older than all of you, by far, but I got it in 8 out of 10 tries!
pdpullmn
Forum Newbie
Posts: 5
Joined: Wed Jan 14, 2009 5:05 pm

Re: Memory game

Post by pdpullmn »

Hey, cool game. Don't know if you notice but you can see the number of each box in the bottom left of the browser even before you click on it. Not that I'm cheating, just thought I'd let you know. :D
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Memory game

Post by papa »

pdpullmn wrote:Hey, cool game. Don't know if you notice but you can see the number of each box in the bottom left of the browser even before you click on it. Not that I'm cheating, just thought I'd let you know. :D
Haha wtf! I'll take a look, thanks for noticing. :)
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Memory game

Post by papa »

So I realized that mozilla doesn't seem to support window status unless you activate it yourself. Do you guys know any way to get around this? Can't have cheaters playing my game!
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Memory game

Post by kaszu »

When the game is loaded, place the number as node property and remove from the url or even better use some other attribute like "name".
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: Memory game

Post by papa »

kaszu wrote:When the game is loaded, place the number as node property and remove from the url or even better use some other attribute like "name".
Ok, so now I've changed it to name attribute, so you can only cheat by viewing the source code, which is good enough at this point. I've also implemented the game level so you can choose between easy, medium etc...

Your coding is a little over my head but tried to create a function which looks to see wether all images are displayed and not to determine if the user has completed the game. Got stuck however and would appreciate some pointers to get back on track. :)

After writing this function nothing works... 8O

Code: Select all

//See if all images are displayed
MemoryGame.prototype.gamOver = function () {
    var images = this.container.getElementsByTagName('img');
    
    //Loops thru images
    for(var i=0,j=images.length; i<j; i++) {
        //If image still hidden, end loop
        if(images[i].src == './php/Classes/Memory/icons/icon_back.png'; {
            return 0;
            break;
        } else {
            //Returns 1 all images are displayed 
            return 1;
        }
    }
}
 
Source Code

Thanks!
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Memory game

Post by kaszu »

In your code if first image is revealed it will return 1 and 0 if it's not, instead of going through all images.
Change:

Code: Select all

} else {
    //Returns 1 all images are displayed
    return 1;
}
into:

Code: Select all

}
 
//Returns 1 all images are displayed
return 1;
 
Post Reply