Concept

I have come to the decision to change my initial idea with Piano Tiles to one that had more connection with me and my interest. And TA-DA here I go again connecting my project to favorite Friends show. The reason I switched is because I knew it would be easier to create a project that you will have fun building and also passionate about. In this project, I wanted to highlight key moments from the show through the perspective of the characters, since each of them has a different story and individuality. There are six main characters in the show, and creating a game for each of them was kind of challenging and time inefficient, so I came up with different interactive project ideas for characters. I would like to stop on each one:

1. Phoebe
   I started from creating a page for Phoebe. I still wanted to work with music in my midterm, so I chose a famous song sang by Phoebe, called Smelly Cat. I wanted to make it similar to karaoke, so I implemented an interactive element, where the user could press the specific keys to get the singing of specific lines of the song. So, there is only a karaoke version of the song playing in the background and to make the song complete, the user should add the lyrics sounds by pressing on keys. This page took me a lot of time working and correcting the code, because the sounds in p5js are pretty hard to handle. First of all, I separated the song to the lyrics sound and to the instrumental part, then I cut the lyrics sound to the lines, and assigned each line a specific key. But the hardest part now comes with the playing of the sounds.

   let soundPlayed = {
     'S': false,
     'W': false,
     'F': false,
     'T': false,
     'R': false,
     'Y': false,
     'N': false
   };
   
   
   function smellykeys() {
     // converting the pressed key to uppercase
     let pressedKey = key.toUpperCase();
   
     // logic is to play a specific sound and stop the rest
    if (pressedKey === 'S' && !smelly.isPlaying() && !soundPlayed['S']) {
       stopAllSoundsExcept('smelly');
       smelly.setVolume(0.2);
       smelly.playMode('untilDone');
       smelly.play();
       soundPlayed['S'] = true;
     } else if (pressedKey === 'W' && !whatarethey.isPlaying() && !soundPlayed['W']) {
       stopAllSoundsExcept('whatarethey');
       whatarethey.setVolume(0.2);
       whatarethey.playMode('untilDone');
       whatarethey.play();
       soundPlayed['W'] = true;
     } else if (pressedKey === 'F' && !itsnot.isPlaying() && !soundPlayed['F']) {
       stopAllSoundsExcept('itsnot');
       itsnot.setVolume(0.2);
       itsnot.playMode('untilDone');
       itsnot.play();
       soundPlayed['F'] = true;
     } else if (pressedKey === 'T' && !theywont.isPlaying() && !soundPlayed['T']) {
       stopAllSoundsExcept('theywont');
       theywont.setVolume(0.2);
       theywont.playMode('untilDone');
       theywont.play();
       soundPlayed['T'] = true;
     } else if (pressedKey === 'R' && !yourobv.isPlaying() && !soundPlayed['R']) {
       stopAllSoundsExcept('yourobv');
       yourobv.setVolume(0.2);
       yourobv.playMode('untilDone');
       yourobv.play();
       soundPlayed['R'] = true;
     } else if (pressedKey === 'Y' && !youmay.isPlaying() && !soundPlayed['Y']) {
       stopAllSoundsExcept('youmay');
       youmay.setVolume(0.2);
       youmay.playMode('untilDone');
       youmay.play();
       soundPlayed['Y'] = true;
     } else if (pressedKey === 'N' && !yournot.isPlaying() && !soundPlayed['N']) {
       stopAllSoundsExcept('yournot');
       yournot.setVolume(0.2);
       yournot.playMode('untilDone');
       yournot.play();
       soundPlayed['N'] = true;
     }
   }
   
   function stopAllSoundsExcept(keep) {
    
     for (let key in soundPlayed) {
       soundPlayed[key] = false;
     }
     // stop all sounds except the currently selected one
     if (keep !== 'smelly' && smelly.isPlaying()) {
       smelly.stop();
     }
     if (keep !== 'whatarethey' && whatarethey.isPlaying()) {
       whatarethey.stop();
     }
     if (keep !== 'itsnot' && itsnot.isPlaying()) {
       itsnot.stop();
     }
     if (keep !== 'theywont' && theywont.isPlaying()) {
       theywont.stop();
     }
     if (keep !== 'yourobv' && yourobv.isPlaying()) {
       yourobv.stop();
     }
     if (keep !== 'youmay' && youmay.isPlaying()) {
       youmay.stop();
     }
     if (keep !== 'yournot' && yournot.isPlaying()) {
       yournot.stop();
     }
   }
   

   It is surely part of the code I’m really proud of. It took me couple of days to understand how to solve a problem of repeating sounds and lagging . Some sounds would block others and code didn’t work at all. By introducing variables with boolean values, I could create a check points in the code to get what I wanted (f.e. when the key is pressed, the sound plays only ones and doesn’t repeat until it is called out again) .

2.  Chandler
   When I thought about Chandler’s character, I immediately thought about his sarcastic sense of humor. So, I decided, I want to prompt the user to ask a question by typing it in the input line, and get an answer from “Chandler’ by sending the question. So, basically how I did it was by creating csv.file with all sarcastic punch lines Chandler character could actually say in the show. I wanted really to appeal to Friends fans, so I tried to create realistic Chandler’s responses. There wasn’t much difficulty with this page.
3. Joey
   I was confused with what could I possible introduce for Joey character, apart from his immense love for food, especially pizza. I decided to tie it to his character quality of not sharing food with anyone. I wanted to represent it directly in the interaction. So on his page, the user can place pizza slice wherever they want to except place, where actually the user’s plate is located. In that way, I am implying that if they go with Joey to the restaurant, they won’t get even a slice of his pizza to their own plate. For this page, I used arrays.
4. Rachel
   I definitely wanted to work with “fashion” part of Rachel’s character. As I watching the show myself, I was always inspired by the looks that were created for this character. So, for this page I decided to make a journal layout, where all Rachel’s outfits are collected and sorted by the purposes, like casual, festive, office. This page really reminded me of the scrapbook, and I find it pretty aesthetic.
5. Ross
   What I remember brightly about Ross’ character is his lines, especially “We were on a break!” one. So, I decided to focus on that side. I decided to implement OOP for this page to introduce more movement on the screen. So basically, when a user presses on this phrase, he will get a happy face of Ross, since by this phrase he used to make excuse of his cheating. And there is another phrase “It is a big deal!”, said by his ex, which made him angry, so when the user presses on it, there are bubbles with Ross’ angry face.
6. Monica
   When I thought about Monica’s character, I was struck by many ideas, because of so many qualities that she was presented in the show. So I decided to compile them all together. I came up with the creative text that would describe one of the main activities that Monica does during the show, like cleaning, cooking, dancing, organizing.

I extensively used Canva for this assignment to get high quality images.

Also to follow the aesthetics, I chose a color palette for my project and also selected the fonts (Helvetica and Friends theme font).

Final Version

https://editor.p5js.org/aa11832/full/JSemZD8wC

Hopefully, I could convince you to watch at least one episode of Friends!

Future Improvements

• For the future improvement of the project, I would really like to work on the sound accompaniment across different pages, not only Phoebe one. I could implement sounds starting from Friends show theme song to the sound of the specific key character lines, like maybe adding the sound of line “We were on a break!” to Ross page. I believe that would enhance user’s immersion to Friends universe.
• I would also to expand my work with object oriented programming in different parts of the project. I feel like there is a room for working with different objects as a parts of the background or the main interaction.
• I would also like to transfer my project to the full screen.
• I think what this project lacks is gamification. While there are many ways to interact with the project, there are no scored activities that are usually appealing most to the user. For example there are ways to gamify the karaoke page by evaluating how exact was the user in pressing the keys to match the song lyrics.
• I would also like to improve the immersion of the user to the show environment. What I created in my project captures very shallow part of the whole Friends show. Adding more unique content and games, I can address this problem.

Concept:

People often have a certain impression of certain places from hearing about it on social media, where people tend to only focus on the good and hide the bad. Meet Madison. Madison is a social media influencer who has fallen victim to the glamorized and romanticized New York City. With such ambition to pursue her career in the huge city, Madison impulsively moved to New York because of the beautiful Christmas movie scenes and “just because it’s New York.”  Now that she has moved to NYC, she is met with several true NYC obstacles…rats, trash, and crackheads. Help Madison escape from New York by preventing her from crashing into the obstacles!

How it Works:

“Escape From New York” is a relatively easy game to learn how to play. After reading the tutorial, users just have to move their arrow keys left, right, up, or down to help Madison avoid the nasty NYC obstacles. If you run into an obstacle, you lose one of your three lives. If you crash three times, you lose and Madison is stuck in the streets of New York. If you manage to stay alive for 1 minute 30 seconds, you win and have successfully helped Madison get out of New York and back to the suburbs!

Highlights:

Project: Overall, I’m quite proud of this project and how I was able to bring the idea to life in the way I had planned it out to be. The idea for the game was something I found funny to me as a Native New Yorker, who has seen and heard many mixed feelings about NYC. It was nice to create a project on a topic that resonates with me and part of my identity. I’m proud of myself in general for being able to create a literal game with code, two things I thought would be impossible for me to do let alone both at the same time. Even though I got a lot of help from the professor and from other students, I’m still proud of myself for piecing everything together and gaining more experience in this new field.

Code:

// Constrain character's Y position to the range [200, height]
charY = constrain(charY, 175, height - charHeight);

// Constrain character's X position to the range [0, width]
charX = constrain(charX, 0, width - charWidth);

The piece of code that I would like to highlight is this small piece of code that helps constrain Madison to the roads. It really bothered me that she was able to drive up into the buildings and to the sides and hide from the obstacles in frame, so I knew I just had to find a way to constrain her so that it looks more logically correct. Not only would it look right, it would also make it harder for players to cheat and win.

The Piece:

Issues & Improvements:

A lot of the issues I faced were due to some silly mistakes from having a } in the wrong place or having old code that wasn’t cleaned up mixed up with my new code. For example, I was extremely frustrated with my project for a solid hour and a half, trying to figure out why the game and sounds loaded, but nothing happened if I pressed anywhere on the screen. It had to do with a missing } that I put in a random space to get rid of the red error. Instead of seeing where the actual problem came from, I tried taking the easy (but wrong) way out that led to more harm than good. I also had issues with music overlapping, which I later realized because of the professor that I had overlapping codes, hence, overlapping music. I also struggled to come up with a creative way to implement a shape into my project, as all of the visuals come from images. I thought of doing confetti for the winner’s page, but it ended up being too messy and complicating. In the end, I ended up just making two “points” to use some kind of shape to make the colon on the “Tutorial” page. Although I could’ve easily just used an actual colon, I couldn’t think of any other way to incorporate a shape.

Although I’m quite satisfied with the outcome of the project, there are many improvements I wish I had the time to make, and would like to implement into my future projects. For one, the game is 1 minute 30 seconds, but the audio is 1 minute 33 seconds, where the last three seconds are pitch silence. This affected the flow of the suspenseful finale, but I didn’t have time to trim and reupload the audio. Another thing would be to make the canvas bigger and be able to resize with the user’s window size, as well as being able to full screen it. This would really help with the overall game experience by making it feel more engaging and fulfilling. One last improvement would be to stop the ending sounds to loop so frequently, as it gets really repetitive and annoying to hear the same sound on loop after every 4 seconds with no silence in between.

Concept

For my midterm I created a simple game inspired by the movie “Cloudy with a Chance of Meatballs.” The goal of the game is to avoid the falling meatballs. The longer the player survives without getting hit, the higher their score will be and the harder it will become. The game consists of a start screen, avatar selection, the main gameplay, and an end screen showing the player’s final score.

Sketch

https://editor.p5js.org/fatimy/sketches/8T66V9Gl1

Mechanics

1. Avatar Selection: Players choose between two avatars, Flint or Sam.
2. Gameplay: Meatballs fall randomly from the top of the screen. The Player is controlled by the mouse. Users must react quickly to dodge the falling meatballs.
3. Scoring System: users earn points for surviving longer without getting hit by a meatball. The score increases based how many meatballs avoided. The game tracks the users best score, stored locally, encouraging players to improve their survival time in future attempts.
4. End of Game: The game ends when the player is hit by a meatball, triggering the “Game Over” screen. The users current score is displayed along with the best score.
5. Music and Sound Effects:  light background music plays during the start and player selection screens. Fast-paced music plays during the gameplay to heighten the tension as players dodge the meatballs. Both audios are soundtracks from the movie.

 

Highlighted code

Im happy with the speed of the meatball. even though it does seem pretty slow at first, I like how it increases and gets difficult after a while. Making it difficult to beat the best score.

Im also happy with the look of the end screen. I found it hard to choose the background, fonts and colors to try to make it look good, and im still not satisfied with the overall look of the game, but I tried my best to make it look ok.

  // reset ball position and increase speed if it goes off the screen
  if (y > height) {
    // check if the ball goes off-screen
    y = -20; // reset the ball to the top of the screen
    speed += 0.5; // increase the ball's speed
    score += 1; // add to score
    pickRandom(); // randomize ball's x-position
  }
}

// end screen (screen 3)
function endScreen() {
  background(0);
  fill("rgb(177,10,10)");
  textAlign(CENTER);
  textFont(myFont1);
  textSize(60);
  stroke("red");
  text("GAME OVER", width / 2, height / 2 - 40);
  fill(255);
  textFont(myFont2);
  textSize(30);
  stroke("red");
  text("YOUR SCORE = " + score, width / 2, height / 2 + 20);
  // check if the player's score is a new best score
  if (score > bestScore) {
    bestScore = score; // update
    localStorage.setItem("bestScore", bestScore); // save it to localStorage
  }
  fill(255);
  stroke("red");
  text("BEST SCORE = " + bestScore, width / 2, height / 2 + 60); // display best score
  // detect hover for "PLAY AGAIN"
  if (
    mouseX > width / 2 - 100 &&
    mouseX < width / 2 + 100 &&
    mouseY > height / 2 + 100 &&
    mouseY < height / 2 + 160
  ) {
    fill("red");
    textSize(40); // make "PLAY AGAIN" bigger when hovered
  } else {
    fill(225);
    textSize(30);
    noStroke();
  }
  text("PLAY AGAIN", width / 2, height / 2 + 150);
}

 

 

Improvements

The selection for the Avatar isn’t perfect and the collision detection isn’t perfect. Also I didn’t include the fullscreen function (I tried, didn’t work).

I wrote everything in one javascript, I kept saying I’ll organize it when Im done. Once I was done I didn’t want to change a lot of things to not affect the gameplay etc. I wish I created classes for the balls, avatar and had everything organized. I also think I could’ve written my code a lot simpler.

I think adding sound when the collision happens would be good. Also having other foods fall other than meatballs or having powers ups, to make the game more interesting and fun.

Problems

The main problems I faced were

1. the images (for some reason they only showed on the top left corner) RESOLVED
2. Full screen didn’t work (I tried different types of fullscreen functions (maybe its just my laptop) NOT SOLVED
3. problems with the audio overlapping and lagging RESOLVED
4. P5.js kept saying that image or sound wasn’t loaded even though it was (very frustrating)
5. trying to figure out the area for the player selection and collision HALF SOLVED

Sources

https://editor.p5js.org/ehersh/sketches/Hk52gNXR7

chat-gpt:

• saving best score to local storage
• song playing (to fix overlapping problem)

Concept

HBO’s Game of Thrones has countless iconic scenes that have been forever ingrained in the memory of 21st century pop culture, but arguably one of the most iconic and significant is the fall that crippled Bran Stark and set off the ripple of scandals that made the series’s plot as complicated as it is. While I obviously do not condone acts of violence against minors, I found the scene quite funny because of how absurd everything was: a 10 year old child who somehow managed to climb up the exterior of a tower accidentally witnesses an incestuous affair and then gets thrown out of a window.

I figured that I would eternalize this scene in a more lighthearted way by creating a simple game in which multiple Brans will fall and the player, with their mouse, has to catch the boy by moving a pile of hay as a cushion for him to fall on. At the same time, players will also have to avoid catching the severed head of Bran’s father Ned Stark. Each game lasts 45 seconds; for every Bran saved, the score increases by one, and for every Ned head caught, the score decreases by one.

Highlights:

I illustrated most of the visual assets for the game in Procreate on iPad, employing a more cartoonish art style that I felt was fitting for the simplicity of the game despite the gritty aesthetic of Game of Thrones.

– Background: I tried to keep the whole image simple and not too crowded with details as to not affect the visibility of the falling Brans and Ned heads.
– Bran Stark

– Hay cushion

• Ned Stark’s severed head

In terms of gameplay, Ned’s falling heads were not part of the initial concept. However, after a few play-throughs it became apparent that having saving bran as the sole objective proved to be quite dull, so I decided to introduce obstacles in the form of Ned’s heads. While the mechanisms for Ned’s heads were almost identical to the falling Brans’, I think it’s an important addition as it adds to the stakes and makes the gameplay a bit more interesting.

As for the code, there wasn’t anything particularly challenging, but I am proud of having incorporated a countdown timer that resets with every new game; I used this video by flanniganable as a reference for the timer and added additional parameters to have it reset automatically.

let startTime; //track when the game starts
let timeLimit = 45; //countdown timer duration
let countdown;
let gameState = "start";

function drawGame() {
  //start 45 second countdown
  let currentTime = int((millis() - startTime) / 1000);
  countdown = timeLimit - currentTime;
  
  //end game after time is up 
  if (countdown < 0) {
    gameState = "end";
  }

  //display score and countdown in real time
  fill(0);
  textFont("times new roman");
  text("Score:" + score, 500, 60);
  text("Time:" + countdown, 500, 80);
}

function restartGame() {
  //reset countdown and Brans and Neds
  score = 0;
  startTime = millis();
  timeLimit = 45;
  countdown = timeLimit;
  gameState = "start";
}

function keyPressed() {
  if (gameState == "start") {
    // Start the game
    startTime = millis();
    gameState = "playing";
  } else if (gameState == "end") {
    restartGame();
  }
  // preventing the key press from being counted again
  return false;
}

Finished Game:

Areas for Improvement:

• The gameplay becomes repetitive and there is very little replay value as of now; expanding on the game with increasingly difficult levels and power-ups as incentives would greatly add to the replay value.
• I was not able to add fullscreen display for the game, as I had already illustrated the background image before we learned about fullscreen in class. Enabling fullscreen would allow players to see the falling Brans more clearly.

Sketch:

https://editor.p5js.org/lj2369/full/LBmJSPAC2

Concept:

A significant portion of my time outside of class is spent in my dorm— listening to music, playing games, browsing through my closet, and experimenting with making music. When brainstorming ideas for my midterm project, I realized how much of my life revolves around these everyday activities. This inspired me to recreate that personal experience in my project, aiming to capture the essence of my time in the dorm.

Description: 

At the title screen of my project, you are greeted to 3 doors, the 2 dorms surrounding me, and my dorm, 705. The sketch highlights the dorm you are supposed to enter when you hover over it(it will not open the other doors). Once you step foot in the dorm, you are greeted with an amazing(AI photograph) of a dorm room.  In the Dorm, there are 5 things you can access, the computer, the photo above the computer, the speaker, the bed and the closet. If you mouse hover either one of those, the border of each will highlight, prompting you to click on it.

If you press on the computer, a menu page with a wallpaper and text greets you. If you follow the prompt on the computer, pressing 1 brings you to a drum machine/ beat sequencer and pressing 2 brings you to a menu page of a game of snake. The beat sequencer page has 6 different rows of different instruments, and 16 grids for each part of a drum. For each grid you select, when you press play, the specific part of the drum will play if you have selected the grid. In snake, you press enter to start the game, and control your snake using WASD. The objective is just trying to eat as many fruits as you can and grow as big as you can. In both applications, it will bring you back to the computer menu page if you press escape. Pressing escape on the menu page will bring you back to the dorm.

If you select the closet, you will enter a closet, where you can browse through my clothes. There are buttons on each side of the closet. The left button brings you to the previous clothing item, and the button on the right displays the next clothing item available. Once again, you can exit back to the dorm by pressing escape.

If you select the speaker, a music playback page is displayed, with a spinning record in the middle. I derived this part from a previous assignment where I drew 2 spinning records. However, I altered its functionality to fit what I wanted. It plays back a few songs I have selected and play/pause, next and previous track buttons work as you expect it to. The records spin while music is playing and stops when music stops. The color ring of the record corresponds to the color of the album in which the song was found on.  There is also a vertical slider for volume, and a horizontal one, to skip forwards or backwards into the track, and to watch how far into a song you are.

If you click on the bed, a stickman will be sleeping on the bed.

Lastly, if you click on the photo frame above the computer, an image of my favorite album cover will show.

Code Highlight: 

  //drum machine setup
  
  // Initialize grid with "off" cells
  for (let i = 0; i < numRows; i++) {
    grid[i] = [];
    for (let j = 0; j < numCols; j++) {
      grid[i][j] = false; 
      }
  }
   //Calculate the interval between steps based on BPM
  interval = (60 / bpm) * 1000 / (4); // Divide by 4 for 16th notes
  
  playPauseButton = createButton('Play');
  playPauseButton.position(3,320);
  playPauseButton.mousePressed(togglePlayPause);
  playPauseButton.hide();
  
  // Start sequencer
  setInterval(playStep, interval);
  
  // Define different colors for each row
  rowColors = [
    color(255, 100, 100),   // Red for Kick
    color(100, 255, 100),   // Green for Snare
    color(100, 100, 255),   // Blue for Open Hat
    color(255, 255, 100),   // Yellow for Closed Hat
    color(255, 100, 255),   // Pink for Crash
    color(100, 255, 255)    // Cyan for Clap
  ];


function playStep() {
  if (isPlaying) {
    // Play sounds for the active beats in the current step
    for (let i = 0; i < numRows; i++) {
      if (grid[i][currentStep +1 ]) {  // Adjust for the dead node
        
        soundFiles[i].play();
      }
    }
  
    // Move to the next step
    currentStep = (currentStep + 1) % numCols;
  }
}

This segment of code is responsible for the core functions of the Drum Machine/ beat sequencer. In the setup, the grids are initialized to an off position. Interval is set to create an even spacing between each note on the grid to a 16th note, based on the bpm initialized. The setInterval function(native to JS) is called, where the first parameter is our function, and the second parameter being the delay that we set. The function playStep checks whether our drum machine is playing, then checks if each row is selected, and plays the instruments that are selected, then moves on to the next step. It loops back once it reaches the last step.

Problems/Improvements: 

A problem I encountered multiple times while working on this project is, when entering and leaving a different scene, the strokeweight or stroke color is not reset, resulting in some of the artwork being messed up. However, i fixed this by resetting the stroke weight and stroke colors at the escape function when leaving the scene, or at the end of the draw functions.

For my hover detection, since the picture is 3D on a 2D space, for my hover detection, as i was using a rectangle to define the coordinates, it results in some inaccuracy. I was unable to come up with a solution.

Another problem I encountered was not having my code be as organized, resulting in difficulty debugging. I fixed some of this by creating classes, as opposed to having them be functions within the sketch file. However, I didn’t do this for all my different scenes, so that is a future improvement.

 

 

 

 

 

Sketch:
link to fullscreen: https://editor.p5js.org/GhadirMadani/full/e7SLueayo

Concept:

The concept of my project was to make the user interact with more than one game using only one game. So my idea was to make an arcade game with five arcade machines, and when the user clicks on the screen of one of the arcade machines they will be able to play the game linked to that screen, and then they can go back to the arcade room to play the other games. By creating this game, I incorporated a lot of what we have studied in class and I made it more user-friendly and interactive.

How the Project Works:

When you enter the game this is the first screen that is shown, if you follow the instructions correctly it will link you to the arcade room code.

This is the arcade room. You can go back to the instructions page by clicking the “Instructions” button and it will link you back to the instructions code. Or you can play on the screen of one of the arcade machines (as mentioned in the instructions page) to play the game linked to it.

function mousePressed() {
  
    // Check clicks only when in the arcade room
    // First arcade machine (redirects to skeleton.html)
    if (mouseX >= 60 && mouseX <= 160 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "skeleton.html";
    }

    // Second arcade machine (redirects to squares.html)
    if (mouseX >= 190 && mouseX <= 290 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "squares.html";
    }

    // Third arcade machine (redirects to error.html)
    if (mouseX >= 320 && mouseX <= 420 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "error.html";
    }

    // Fourth arcade machine (redirects to jukebox.html)
    if (mouseX >= 450 && mouseX <= 550 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "jukebox.html";
    }

    // Fifth arcade machine (redirects to jackpot.html)
    if (mouseX >= 580 && mouseX <= 680 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "jackpot.html";
    }
  
  // Check if the "Instruction" button is clicked
  if (mouseX >= 20 && mouseX <= 120 && mouseY >= height - 60 && mouseY <= height - 10) {
    // Redirect to the arcade home page 
    window.location.href = "index.html"; 
  }
  }

 

The code I am mostly proud of is linking each screen with a different game, for example the first one is linked to the skeleton game, the second to the squares and so on.

When you click on the first screen you are directed to the skeleton game. You will have an instruction page before playing the game and if you follow the instructions carefully you will be able to play the game. The way this game works is you have to move the skeleton (spritesheet) to collect the bones, when you reach 10 points you win the game and you can press the “R” key to restart the game. But you can also lose the game if you touch the borders of the screen and you can also restart the game by pressing the “R” key. If you want to go back to the arcade room you have to press the “Home” button.

The second game (the second arcade machine) is a previous assignment that I added to this project. You will have to press on the mouse to let the squares change and press it again to change the speed of the squares. What I added to this project was the instruction page, where if you follow the instructions you will be able to play the game. If you want to restart the game you will have to press the spacebar twice, one to stop the game and one to reset the squares and then you will be able to play the game again. If you want to go back to the arcade room you have to press on the “Home” button.

For my third game I created non functional game, and this is because whenever I go to an arcade room most of the machines are broken. You can go back to the arcade room by pressing the “Home” button.

For my fourth game I created a jukebox, this was to implement music to my game. When you click on one of the “Play” buttons the corresponding music will be played and if you press on the stop button the music will stop playing. You can control the volume levels using the “Volume Control” slider. You can go back to the arcade room by pressing the “Home” button.

For my last game I created a Jackpot where you have to press your mouse so the wheel spins. You can then go back to the arcade room by pressing the “Home” button.

Areas of Improvement and Problems:

Since my project had many javascript codes and the games were dependent on the size of the screen that was chosen (width=800 and height=400), it was really difficult for me to code all the different javascripts to be in full size and responsive to the size of the screen. So as an improvement for my future project I want to implement the full screen option and make my project responsive to the size of the screen being used.

Concept & Inspiration.

For my midterm project, I got inspired by the mini-game I used to play as a child online: a treasure hunt that trains memorisation.

As a huge fan of Lilo & Stitch animated feature, I decided to create an authentic version of the game with my favourite character. The (so fat intended) rules of the game are as follows:

Stitch has to collect 5 shells, moving by one sand square with each step from start to finish. The sand squares can hide hazards – dead fish bones – which make the progress fall down to 0 and restart the game.

At the beginning of the game, the player has 5 seconds to take a look at the “revealed” danger zones. After that, all sand squares will be closed, and players will have to rely on their memory not to entrap themselves into a dead fish bone on the way.

Below, I attached two images which I designed in Figma: (1) showing the game interface after 5 seconds, and (2) showing the interface at the very beginning, when the dead fish bones are just revealed.

Uncertainties.

As we have never touched upon working with a timer inside p5.js, I am unsure if I will be able to implement the timer in the way I initially wanted to. Nonetheless, I believe that I will be able to find a solution that will eventually satisfy me (even though it might not be according to what I initially planned).

Also, I had perpetual struggles with uploading images to my canvas throughout the process of working on the first draft. I am still figuring out how to fix this issue, because otherwise some of the icons (including the character) and the background can suddenly disappear during the actual game.

In my first draft of the project, I have only managed to create the user interface (without some of the icons) and make some kind of movement for Stitch with the key arrow presses. I have also included the soundscape, using the music from the original Lilo & Stitch film: to turn it off, user can click the mouse at any part of the canvas.

Embedded Sketch.

Key functions to implement:

• • Add the missing icons (including the shells & fish bones).
  • Make the music respond to the button.
  • Make a pop-up window with game instructions.
  • Implement a timer (or its equivalent).
  • Make Stitch move on the sand squares more precisely.
  • Add a sound effect for the failure.
  • Make the fish bones appear as soon as Stitch touches the sand squares with them.
  • Make the shell count as soon as Stitch touches them.

Concept & User Interaction

Choosing a dish in the restaurant is always difficult, especially if you have food allergies or follow a specific diet. Inspired by the photograph of a long dining table (Figure 1) and a scene from Ralph Breaks The Internet with a “Bunny Pancake Kitty Milkshake” video game (Figure 2), I decided to represent how complex it can be for the server to manage the flow of orders and requests.

My game features two people sitting on the opposite sides of a long dining table. Each person has their own preferences in food, which update several times – e.g. vegetarian, vegan, meat-based dishes. Depending on their preferences, the player has to use two plates on the table to catch appropriate dishes that are falling on the table and serve them to the visitors. The customised background music was created using I Miss My Cafe website, where I set up the volume of different actions, so that the sound would mimic the restaurant environment and the experience would be more immersive for the user.

Figure 1: Nissa Snow, n.d., https://ru.pinterest.com/pin/697635798561628823/

Figure 2: Slash Film, 2018, https://www.slashfilm.com/562530/ralph-breaks-the-internet-easter-eggs/

Highlight of the code

When working on the interactive part, I have spent more time than expected on creating the classes for the Plate and the FallingDish. Movement of both types of objects are dependent on the actions of the user, so I decided to implement mousePressed(), mouseReleased(), mouseDragged(), and define my own functions to control the interdependence of moving objects.

function mousePressed() {
  // checking if the mouse is over a plate
  for (let plate of plates) {
    if (plate.isMouseOver()) {
      plate.isDragging = true;
      plateDragged = plate;
      break;
    }
  }
}

function mouseReleased() {
  // the plate stops moving when the mouse is released
  if (plateDragged) {
    plateDragged.isDragging = false;
    plateDragged = null;
  }
}

function mouseDragged() {
  // dragging the plate with the mouse moves it
  if (plateDragged) {
    plateDragged.move(mouseX);
  }
}

Sketch

Uncertainties & Complexities

Since this sketch is the prototype of the final game, I have used simplified graphics, with geometric shapes symbolising the dishes and without the visitors’ figures. In the future development, I will import my own illustrations of the dishes and figures of people.

For now the main unresolved challenge is related to the release of the dish when the plate approaches the end of the table. I did not manage to come up with an algorithm that would make the shape disappear, as if the person consumed it, when the user drags the plate to one side of the table, so I plan to continue research and sign up for an office hour with the professor to discuss possible solutions.

Risk Reduction

By relying on the general concept of an existing popular video game, I ensure that the playing mechanism of my mini game is not confusing for the user.

The most challenging part was to implement the collision detection mechanism in order to make the falling dishes (represented as a triangle and a square in this prototype) stick to the plates when caught. I will continue working on the look of the plate with the dish on it, changing the location of the figure.