CS 1335 Processing java script

Processing Coding Questions
1

Write code for the flip tile game; here is how the game is played :

Basically there are 2 images…

  1. To begin with, one of the 2 images are randomly displayed in each cell of the grid.
  2. The user clicks on a cell to toggle between the 2 images.
  3. Game comes to an end when all the cells in the grid show the same image.

Watch the video to recall how the game is played.

You will need a 2D array board that stores either a 1 or 2 to let us know what image is being currently shown in a cell.

Inside setup :

  1. Randomly populate board with either 1 or 2.
  2. Do the visual representation of what is inside board (1 means show your first image on that tile in the canvas & 2 means show your second image on that tile in the canvas )

Inside mousePressed:

  1. Find clickedRow & clickedCol - both of that put together gives the user selected tile.

  2. Check what is being currently displayed in the user selected tile ( check the content of board at location determined by step 1).

  3. If it is showing image1(ie. board has a 1 in that position) then

  4. change the board content at that position to 2

  5. write code to reflect this change visually by showing image2 in that cell on the canvas

  6. else // means that tile is showing image2.

  7. change the board content at that position to 1

  8. write code to reflect this change visually by showing image1 in that cell on the canvas

  9. If game is over,

  10. close the game

Game over condition :

  1. Find how many tiles display image1 - giving 2 ways to do this.

  2. Maintain a variable that keeps count of # of image1 being displayed. (involves a couple of steps in mousePressed - I have not included that.)

  3. OR Count the number of 1 occurs inside the 2D array board (involves searching in the 2D array board )

  4. If the number determined in step 1 is same as number of tiles in the whole canvas (ie. all tiles are showing image1) OR that count is 0 (ie. all tiles are showing image2) then

  5. game has come to an end.

  6. else

  7. game needs to continue.

I’m really struggling with this homework problem and would greatly appreciate the help.

2

This is my code so far

final int NUM_TILES = 4;
PImage baseImage;
PImage image1, image2;
PImage [][] board;
PImage [][] mainCopy;
int sqSide;
int numClicks=0;
int clickedRow, clickedCol, releasedRow, releasedCol;
int currentlyShowing;

void setup(){
  size(500,500);
  sqSide= width/NUM_TILES;
  //displayPuzzle();
  
  image1 = loadImage("dog.jpg");
  image2 = loadImage("bunny.jpg");
  
  image1.resize (width, height);
  image2.resize (width, height);

  image(image1, 0, 0);
 
  mainCopy= new PImage [NUM_TILES][NUM_TILES];
  board= new PImage [NUM_TILES][NUM_TILES];
  surface.setTitle("Click on the image to get the game going");
  
  currentlyShowing = 1;

}

void draw(){}


void mousePressed(){
  if(currentlyShowing == 1){
    image(image2, 0, 0); 
    currentlyShowing = 2; 
  }else if(currentlyShowing == 2){
    image(image1, 0, 0); 
    currentlyShowing = 1; 
  }
}
1 Like
3

Right now, your board variable is a 2D array that store PImages. This is not what you want. You want to store the values of 1 or 2 in it! So it needs to be a 2D array of ints!

Then you need to fill it with 1’s and 2’s. This means you will need a couple of for loops to visit every position on it. Put a 1 or 2 in each position based on some randomness!

Then use that array with a couple more for loops to draw your images.

1 Like