# CS 1335 Processing java script

**URL:** <https://discourse.processing.org/t/cs-1335-processing-java-script/32769>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 12, 2021, 3:08am UTC](https://discourse.processing.org/t/cs-1335-processing-java-script/32769 "2021-10-12T03:08:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![amna24688](https://avatars.discourse-cdn.com/v4/letter/a/aca169/32.png) [@amna24688](https://discourse.processing.org/u/amna24688)\
**Post date:** [October 12, 2021, 3:08am UTC](https://discourse.processing.org/t/cs-1335-processing-java-script/32769/1 "2021-10-12T03:08:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![amna24688](https://avatars.discourse-cdn.com/v4/letter/a/aca169/32.png) [@amna24688](https://discourse.processing.org/u/amna24688)\
**Post date:** [October 12, 2021, 3:10am UTC](https://discourse.processing.org/t/cs-1335-processing-java-script/32769/2 "2021-10-12T03:10:03Z")

</div>

This is my code so far

```auto
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; 
  }
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 12, 2021, 3:52am UTC](https://discourse.processing.org/t/cs-1335-processing-java-script/32769/3 "2021-10-12T03:52:26Z")

</div>

> [@amna24688](#):
>
> Randomly populate **board** with either 1 or 2.

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 `int`s!

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.