Want to add extra images to memory game...

[artistalinda]

Hi,
Hope I'm not being repetitive... I tried the search function and didn't find what I was looking for....

I am not very familiar with scripting, but I want to add a Concentration/Memory game on my web site. I chose a simple script which can be found here:
http://javascript.internet.com/games/concentration.html

I installed it on a page on my site and it works great. However, the script for this game uses the same 18 images each time for each game. They are randomized into different squares each time, but they are the same 18 images. Because I am an artist, I would like to "showcase" more than 18 of my own images in the game. There are 36 squares and there can only be 18 images in each game - I understand that. BUT... I would like the script to choose from a pool of MORE than 18 images for each game, so that each game not only has the matches in different locations, but has some different images as well.

Hope that makes sense.

Is this possible with this script? If so, which lines do I change? I tried to contact the author himself of the script, but I received a "404-file not found" error for his web site.

Thanks,
Linda

[PhotoJoe47]

Hi "artistalinda"

I will give you a starting place, but let you finish the code. You know you learn by doing? :)

First add more image files to where you loaded the first 18 and keep the number system the same 1, 2, 3 .... 18, 19, 20, ... etc. You don't have make it even sets of 18.

In this part of the code:

<!-- Begin
var pics = new Array();
for (i = 0; i <= 18; i++) {
pics[i] = new Image();
pics[i].src = 'image' + i + '.gif';
}

just before the for loop create a random number and do the math logic to make it an interger great than but equal to 1 but 18 less than the number of image files you have available.

This will cause the array of images used by the game to be different everytime the game is run.

Hope this helps,
PhotoJoe

[artistalinda]

Thanks! I have already added extra images to the same location. I understand what you are saying and where to add the line, but I'm totally new to scripting and still don't know how to write the code, exactly...

But yes, I love learning new things and I love to learn by doing, so I will poke around and figure it out.

Thanks again! :thumbsup:

[PhotoJoe47]

Thanks! I have already added extra images to the same location. I understand what you are saying and where to add the line, but I'm totally new to scripting and still don't know how to write the code, exactly...

But yes, I love learning new things and I love to learn by doing, so I will poke around and figure it out.

Thanks again! :thumbsup:

Ok, but if you get stuck I'll give you hand. Just post what you are doing and what seems to be the problem. And don't struggle to long with this.

Here is a little more help.

You want the random number to be between 0 and 18 less than the total number of images you have available. This will give you a starting place for the first image to be used. Chage the for loop so it will use this variable. There a couple of ways that you can you can use the variable in the for loop. 1. Used it to modified the start and ending values of "i". 2. In the block section of the loop let "i" modified the variable to choose which image to add to the array. Either one should work.

Also if this is the only change you make the image set will stay the same for each session that the user is on that page. But a differen set will be loaded everytime the page is loaded. Now if you want a different set every time the game is played you will need make this into a function that the function init() can call. That way a new set of images will be used for everygame (but remember sometimes ramdom number could be the same)

Hope this helps, but if you get stuck and just want the code let me know.

PhotoJoe

[artistalinda]

Okay, I happen to have 36 images, so I added this line (before the for loop)...

var pics = new Array();
var ran_number=Math.round(Math.random()*18);
for (i = 0; i <= 18; i++) {
pics[i] = new Image();
pics[i].src = 'image' + i + '.gif';

But nothing has changed, I guess because I haven't associated the random number with the pics variable?

::sigh:: Sorry, I am totally new at this and I think this is way over my head. I was originally thinking I could maybe change some variables in the original script and make it work, but I can see now that isn't how it's done. I don't want to take up too much of your time.

Thanks again.

[PhotoJoe47]

Okay, I happen to have 36 images, so I added this line (before the for loop)...

var pics = new Array();
var ran_number=Math.round(Math.random()*18);
for (i = 0; i <= 18; i++) {
pics[i] = new Image();
pics[i].src = 'image' + i + '.gif';

But nothing has changed, I guess because I haven't associated the random number with the pics variable?

::sigh:: Sorry, I am totally new at this and I think this is way over my head. I was originally thinking I could maybe change some variables in the original script and make it work, but I can see now that isn't how it's done. I don't want to take up too much of your time.

Thanks again.

Ok, you got the first part right!

Now change the for loop to use the variable ran_number.

Use this:

var pics = new Array();
var ran_number=Math.round(Math.random()*18);
for (i = 0; i <= 18; i++) {
pics[i] = new Image();
pics[i].src = 'image' +(ran_number + i) + '.gif';

Now the best way do this, I think, is to make this section of code a function.

Do it this way:

function sel_Img()
{
var pics = new Array();
var ran_number=Math.round(Math.random()*18);
for (i = 0; i <= 18; i++)
{
pics[i] = new Image();
pics[i].src = 'image' + (ran_number + i) + '.gif';
}
}

Then in the function init() add a call to your new function sel_Img() like this:

function init() {
clearTimeout(id);
sel_Img();
...
....

I edited this message to take out some misleading information. Sorry guys

PhotoJoe

[artistalinda]

Okay here's what I got so far... I guess I did something wrong, because the game isn't working now... timer won't start.

You are a very patient person because obviously I am an idiot. lol.

function sel_Img()
{
var pics = new Array();
var ran_number=Math.round(Math.random()*18);
for (i = ran_number; i <= (ran_number + 18); i++) {
pics[i] = new Image();
pics[i].src = 'image' + i + '.gif';
}
var map=new Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18);
var user = new Array();
var temparray = new Array();
var clickarray = new Array(0, 0);
var ticker, sec, min, ctr, id, oktoclick, finished;
function init() {
clearTimeout(id);
sel_Img();
for (i = 0; i <= 35 ;i++) {
user[i] = 0;
}
ticker = 0;
min = 0;
sec = 0;
ctr = 0;
oktoclick = true;
finished = 0;
document.f.b.value = "";
scramble();
runclk();
for (i = 0; i <= 35; i++) {
document.f[('img'+i)].src = "image0.gif";
}

[PhotoJoe47]

Sorry I goofed.

Use the second method for the for loop. I will go back an edit my response so as not to confuse others who might read this thread later.

Again I'm sorry about the goof.

PhotoJoe


I discovered another goof I made I "a$$ u me" that the orginal coder was going to use the array variable of images "pics[]" in his code. But he was only using it to preload the images to the browser. In the code he is accessing the images directly. So it only using the images 1 - 18. Image0.gif is the grey box on top of the playing area. I'm working on a solution now. Get back with you later.

[artistalinda]

Hmmm. Okay, now the game works again, but it is still selecting only the first 18 images... I have my images all in the same location on my server, and they are named correctly... image1.gif, image2.gif, and so on up to image36.gif. But it is still selecting only the image files 1-18.

Any ideas?

:)

oops just saw your edit. Yup, image0.gif is the grey box. My art images are image1.gif through image36.gif.

Thanks again.

[PhotoJoe47]

Ok,

I have the page done now.

To see the results in action:

http://www.photojoe.ws/test/concentration1.htm

I have change it so near the top in the script you can change a few values for the variables and change the size of the playing board. Like 4 x 4, 7 x 6, ect. Just read the notes and the only thing you would need to change is the values for:

rows
columns
imgcount

Let me know what you think?

PhotoJoe

[artistalinda]

Hey that is very cool! I tried yours out and it does indeed load random images... more than just the original 18... Great! It's too late for me to try to get it on my own site tonight, but I'll do it tomorrow and put a link here for you if I am successful.

Thanks so much!!! :thumbsup:


::edit:: okay, I couldn't wait to try it out on my own site... it looks like you've got it! I really, really, appreciate all your help. Excellent work. Thank you very, very much!!

http://falge.us/memory.html