Creating a Matching Card Game

tseelbinder · October 2016

Hello! I am currently learning processing in what is supposed to be an introductory level course for non-computer science majors who have no experience with coding/java at all. However they lab assignments given to us (with little to know assistance from TAs/Instructor, are far beyond what we have cover in class and what we should know coming into this "intro" course).

I am currently working on a lab and am quite stumped. We need to create a 2x2 grid "memory game" which works like your typical matching game: user clicks a card, an image pops up, they click another, and if they match they stay on the screen. If they don't match, the user clicks the "next" button to turn them back over (per the lab description).

This is the lab description we were given, to help clarify:

Problem Statement: You are required to build 3 versions of the memory game that has nXn tiles where n is even. The tiles have two faces, one is closed and the other has an image. Exactly two tiles of the nXn will have the same image. Initially all the tiles are covered. You goal is to open a pair of tiles one at a time with the aim of finding a matching pair. When you select a tile using the mouse, it flips to its image. After selecting two tiles, if the tiles do not have matching images they will revert back to the closed state. The game ends when all the tiles have been matches and there are no more tiles to flip open. We need some means for scoring the game. We will assume the number of tries to open up all the tiles as the overall score.Lower the score, the better is your “memory”. This means every time you guess wrong the count increases. Your game board will also have START and NEXT buttons and a place to display the score of the player. There are a lot ofother possible enhancements, but due to time limitations we will restrict it to a simple version. See figure 1 for a sample layout. The tile of the game can be at the bottom of the sketch. While n can be large, we will limit the maximum size to 6 X 6. Start by implementing a 2X2 game as a proof of concept; then move on to 4X4 and then to a 6X6 board. Images you have will have to be scaled to fit the tile size. You are required to provide a general solution using variables and parameterized functions wherever appropriate.

This is the code I have so far, which sets up the game board with the tiles. There are functions at the bottom of the code that the instructor included in the "suggested coding" section of the lab.

I am completely at a loss on how to identify when the mouse is clicking over a card, and how to randomly assigned images from an array, in pairs, without any duplicates.. Any help/suggestions on where to go next are greatly appreciated. I've never coded java before, and we have just barely been introduced to some of these constructs/methods. I've noticed a lot of examples from other people on here defining a "class" for the cards, but we have not covered this concept at all in the course and I have no idea how to use them.

Code so far:

//GLOBAL VARIABLES
int startX =0;
int nextX=150;
int scoreX=300;
int buttonY=500;
int buttonW= 100;
int buttonH=50;
int n=2;
int [] [] mapFill;
IntList images;
PImage [] master= new PImage[8];
int tileCount;
int score;
IntList tiles;
String matchT;
IntList indX;
IntList indY;
int tileW;
int tileH;


void setup(){
     indX=new IntList();
     indY=new IntList();
     size(400,600);
     
     tileW=(width/n);
     tileH=(height/n);
     
     mapFill=new int[n][n];
     tiles=new IntList();
     
     //setup the buttons, done in setup because it only needs to happen once
     //use Tools>Color Selector to pick a color and copy
     fill(#A8F59E);
     rect(startX, buttonY, buttonW, buttonH);
     textSize(32);
     fill(0);
     text("Start",startX+5,buttonY+30);
     
     fill(#F59E9E);
     rect(nextX, buttonY, buttonW, buttonH);
      textSize(32);
     fill(0);
     text("Next",nextX+5,buttonY+30);
     
     fill(#9EC9F5);
     rect(scoreX, buttonY, buttonW, buttonH);
      textSize(32);
     fill(0);
     text("Score",scoreX+5,buttonY+30);
    
    
      //Initialize the setup of the "gameboard"
      initializeBoard();
}

void draw(){}

void mousePressed(){}

tseelbinder · October 2016

These are the functions located at the bottom of my sketch. (I ran out of room on the original post). The blank functions, as well as the start of the "match" functions were suggestions provided by the instructor in class. ** the "(lessthan)" is actually the correct symbol "<". I had to change it to post the rest of the code because the forum was stopping my code at that symbol?

//FUNCTIONS

void initializeBoard(){ 
  //one single function
  //because it is parameterized on "n"
    for(int i=0; i(lessthan)n; i++){
        for(int j=0; j(lessthan)n; j++){
                int x=i(width/n);
                int y=j(width/n);
                int w=(width/n);
                int h=(width/n);
                fill(255);
                rect(x,y,w,h);
        }
    }
        //setup a flag array
    for(int i=0; i<n; i++){
        for(int j=0; j<n; j++){
                mapFill[i][j]=60;
        }
    }
} //END initializeBoard

void initializeTurn() { }

void selectTile1() { }

void selectTile2() { }

int mapSelectiontoIndex() { }

void matchTiles(){
      //matches the tiles selected
      //if matched, scores it
      //if match, MA, if not NM
      int tile2=tiles.get(1);
      int tile1=tiles.get(0);
      if( tile1==tile2){
              matchT="MA";

      }
      else{
              matchT="NM";
              score++;
      }
}//END matchTiles

void closeTiles() { }

void displayScore() { }

GoToLoop · October 2016

http://forum.Processing.org/two/discussion/8082/from-several-variables-to-arrays
http://forum.Processing.org/two/discussion/8081/from-several-arrays-to-classes

GoToLoop · October 2016

I've noticed a lot of examples from other people on here defining a "class" for the cards,

That's the sane thing to do. Games w/o OOP would be a mess to deal w/! =;
Gonna leave you w/ 3 online sketches which rely on defining a class to represent 1 element:

tseelbinder · October 2016

Thank you! Those links definitely clarify how to implement a class which seems like it will make things a lot easier ^:)^ . My other question is regarding tracking where the mouse clicks are and effectively turning over the "cards". Is there a simpler way than using several if statements to check the mouseX and mouseY positions and tying those to an instance of the "card" class to turn one over?

Also, In the code above the instructor had us create the

//setup a flag array
    for(int i=0; i(lessthan)n; i++){ //still don't know why I can't use the symbol on here
        for(int j=0; j(lessthan)n; j++){
                mapFill[i][j]=60;
        }
    }

and i honestly have no idea what this "mapFill flag array" is for.. using println, I determined that it creates pairs: [0][1], [1][0], [0][0], [1][1]. But all of those pairs are set to equal 60, and I haven't the slightest idea why..

GoToLoop · October 2016

http://JeffreyThompson.org/collision-detection/point-rect.php

Howdy, Stranger!

Categories

In this Discussion

Creating a Matching Card Game

Answers