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

JavaScript memory game!

P: 1
I've a memory game. It cannot work. It can only be refreshed and show all. The tile image cannot be flipped. It should be turned over by clicking the tile image with the mouse click.
If the player turns over twp tiles with the same image, the tiles remain face up.
If the player turns over tiles with different images, the tiles are flipped over in 0.8 seconds.

I've uploaded my files into the following links:


below is the js file:

Expand|Select|Wrap|Line Numbers
  1. var x = new Array();
  2. x[0]=0;
  3. x[1]=1;
  4. x[2]=2;
  5. x[3]=3;
  6. x[4]=4;
  7. x[5]=5;
  8. x[6]=6;
  9. x[7]=7;
  10. x[8]=8;
  11. x[9]=9;
  12. x[10]=10;
  13. x[11]=11;
  14. x[12]=12;
  15. x[13]=13;
  16. x[14]=14;
  17. x[15]=15;
  19. for (i=0;i<=15;i++) {
  20. ri=Math.floor(Math.random()*(16-i))+i;
  21. temp=x[ri];
  22. x[ri]=x[i];
  23. x[i]=temp;
  24. }
  26. var Tiles = new Array();
  27. Tiles[0]=new Image();
  28. Tiles[1]=new Image();
  29. Tiles[2]=new Image();
  30. Tiles[3]=new Image();
  31. Tiles[4]=new Image();
  32. Tiles[5]=new Image();
  33. Tiles[6]=new Image();
  34. Tiles[7]=new Image();
  35. Tiles[8]=new Image();
  36. Tiles[9]=new Image();
  37. Tiles[10]=new Image();
  38. Tiles[11]=new Image();
  39. Tiles[12]=new Image();
  40. Tiles[13]=new Image();
  41. Tiles[14]=new Image();
  42. Tiles[15]=new Image();
  44. Tiles[x[0]].src="image1.jpg";
  45. Tiles[x[1]].src="image2.jpg";
  46. Tiles[x[2]].src="image3.jpg";
  47. Tiles[x[3]].src="image4.jpg";
  48. Tiles[x[4]].src="image5.jpg";
  49. Tiles[x[5]].src="image6.jpg";
  50. Tiles[x[6]].src="image7.jpg";
  51. Tiles[x[7]].src="image8.jpg";
  52. Tiles[x[8]].src="image1.jpg";
  53. Tiles[x[9]].src="image2.jpg";
  54. Tiles[x[10]].src="image3.jpg";
  55. Tiles[x[11]].src="image4.jpg";
  56. Tiles[x[12]].src="image5.jpg";
  57. Tiles[x[13]].src="image6.jpg";
  58. Tiles[x[14]].src="image7.jpg";
  59. Tiles[x[15]].src="image8.jpg";
Sep 24 '08 #1
Share this Question
Share on Google+
3 Replies

Expert 100+
P: 392
Please do not post your homework on the forum.
Sep 25 '08 #2

P: 607
Hi Man, u can very well do that, if you are constructing 4X4 table means u will be using 16 images (i.e. 1 image twice so u will be using only 8 images), use random function to generate an integer no from 1 to 8, have a count variable for all the no. bcause no no. should be repeated more than twice. After placing all the images place 16 div with dark color background all over the cells on click of the div check its even no click or odd no click - if it is a odd no click hide the div which is placed over the image and display the image if it is even no. click just get the img src from both the image and check wether they are same if not means use the setTimeout() to make the div display over the image. If the user had selected the correct pair decrement the total no of image so that when all the images are found correctly with that counter value u can alert some messages. Any doubts post it i will try to help u out.

Ramanan Kalirajan
Sep 26 '08 #3

Expert Mod 15k+
P: 16,027
If this is homework, post just the part that you are having problems with and what you've tried. See the site policy on homework questions: Posting Homework or Coursework questions and answers.

Sep 26 '08 #4

Post your reply

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