Midterm project | Ear Puzzle Experience

Interaction & Page design

Each page is a separate function named as displayGamePage_. Users interact with my functions by clicking the mouse & the keys.

1. Press the canva to enter the game stage;
2. Click M to go back to main;
3. Click on the right arrow to enter the next game page;
4. Click F to enter full screen.

By having small design details, such as having the icon of the cursor also as a mouse, choosing the font & the background music, and having poetry about ears at the beginning and the end, the Ear Puzzle aims to strengthen the idea of deconstruction. Putting familiar yet unfamiliar objects to a space where users view it from an unusual perspective allows them to reflect on their own relationship with the objects.

Link to full screen.

Realization & Difficulties

The most difficult part about the code is, as what I expected, checking the WIN CONDITION. 

For this initial sketch I have, the page will allow the win condition but only by chances.

I thought the issue was on the rotation(). However, I tested the same rotation logic and it worked fine for the final work. Major reason could be that I tried to cut all the images in one function in the main js sketch. Even when the user wins, the refreshing of the next page does not follow up.

function startNewGame() {
  

  let imageIndex = gameIndex - 1; // initially gameIndex = 1
  let numPiecesOptions = [4];  // number of pieces per image
  numPieces = numPiecesOptions[imageIndex]; // an array containing the number of pieces for each image
  
  let img = images[imageIndex]; // access an element in the images array at the index specified by imageIndex
  pieces = [];
  correctRotation = 0;
    
  
/////////////////////////////////////////////maybe no need
  let pieceWidth = img.width / 2
  let pieceHeight = img.height / 2

  let scaledPieceWidth = width / 2
  let scaledPieceHeight = height / 2
/////////////////////////////////////////////maybe no need

  
  // create puzzle pieces with random rotations

  for (let x = 0; x < sqrt(numPieces); x++) {
    for (let y = 0; y < sqrt(numPieces); y++) {
      let imgSection = img.get(x * pieceWidth, y * pieceHeight, pieceWidth, pieceHeight);
      let scaledX = x * scaledPieceWidth;
      let scaledY = y * scaledPieceHeight;
      let piece = new PuzzlePiece(scaledX, scaledY, scaledPieceWidth, scaledPieceHeight, imgSection);
      pieces.push(piece);
    }
  }
}

Traumatized by the chaos, I decided to break down every variable so that they don’t overrun each other. Initially, I was using square root of puzzle-pieces as an indicator of the cut. For this new (also the final) implementation, I decided to use numbers.

I also gave up on making it a win/lose situation, meaning that users won’t enter the next page automatically as they get the rotation right. The game changes to an experience, and the users have to press the right arrow to enter the next page. Honestly I don’t think it changes the concept of my game since users are still able to play with the rotation, and their eyes will tell them if it’s correct or no.

Some small issues including not being able to add the sound effect I want or not being able to avoid collision between the image and the text. Something I wanna fix in the future. Though full screen stretches the image, I still think it’s important to have it because I changed it into an experience.