Memory Game Help

ROCCOSMODERN

Hey, I just have a question having to do with processing. I'm working on a memory game and the hardest problem I am having right now is getting the images to appear. I have a MouseClicked function, however, the picture will change no matter where I hit on the screen. I'm trying to get it so the picture will only change if you press the mouse on the certain area. Here's my code so far:

//Variables

// Load images and sounds
var img;
var loadImage;
function preload() 
    img = loadImage("bird.jpg");
    img = loadImage("dog.jpg");
    img = loadImage("fox.jpg");
    img = loadImage("cat.jpg");
    img = loadImage("hipp.jpg");
    img = loadImage("quogga.jpg");



// Run once at the start
function setup() {
  var canvas = createCanvas(1000, 800);
  canvas.parent('sketch');
  background (100,200,100);



}
// Run forever after setup

function draw() {
    fill(155,10,10);
    rect (150,100,100,150);
    rect (350,100,100,150);
    rect (550,100,100,150);
    rect (750,100,100,150);
    rect (150,300,100,150);
    rect (350,300,100,150);
    rect (550,300,100,150);
    rect (750,300,100,150);
    rect (150,500,100,150);
    rect (350,500,100,150);
    rect (550,500,100,150);
    rect (750,500,100,150);


}

function mouseClicked(){
  loadImage("quogga.jpg", function(img) {image(img,150,100,100,150);})
  loadImage("quogga.jpg", function(img) {image(img,750,300,100,150);})
  loadImage("dog.jpg", function(img) {image(img,550,100,100,150);})
  loadImage("dog.jpg", function(img) {image(img,350,500,100,150);})
  loadImage("bird.jpg", function(img) {image(img,350,100,100,150);})
  loadImage("bird.jpg", function(img) {image(img,750,500,100,150);})
  loadImage("fox.jpg", function(img) {image(img,550,300,100,150);})
  loadImage("fox.jpg", function(img) {image(img,750,100,100,150);})
  loadImage("cat.jpg", function(img) {image(img,150,500,100,150);})
  loadImage("cat.jpg", function(img) {image(img,350,300,100,150);})
  loadImage("hipp.jpg", function(img) {image(img,150,300,100,150);})
  loadImage("hipp.jpg", function(img) {image(img,550,500,100,150);})
}

Thanks again in advance!

Chrisir

first edit your post: select entire code and hit ctrl-k

empty lines before and after

Chrisir

when mousePressed in thisfunction say

if(mouseX>xvalue && mouseX<xvalue+widthValue &&
   mouseY>yvalue && mouseY<yvalue+heightValue) {

see examples

PhiLho

Chose a category and formatted code for you, but try to do it yourself next time.

Chrisir

this is actually more complicate than you might think

I suggest you read a bit into arrays

you can store x and y coords of all rects in 2 different parallel arrays

a third array might tell you if one card is opened (boolean)

a 4th array might hold the images

• load all images in setup

• when displaying the images loop over the arrays, use 3rd to determine whether rect or image is to be shown. When image, use array 4.

• when mousepressed, for-loop over all arrays and check them, similar to what I did above. When card is found, open it (set third array entry to true)

later you turn to OOP....

Chrisir ;-)

Chrisir

solved?