Midterm Project – NewJeans’ Escape

Concept

Something I always love talking about is my obsession with music. I love collecting cassette tapes, vinyl records, and CDs. I ensure everyone knows about this because I find it so cool. Among the thousands of artists I listen to, only a couple stick out, and among these artists is NewJeans, a group that is made up of 5 members. in 2023’s July, NewJeans made a comeback after almost six months of releasing no music. With that came my all-time favorite music video of theirs, where they collaborated with Cartoon Network’s PowerPuffGirls, called NewJeans by NewJeans. This song is a testament to the creativity and unique musical style that NewJeans is known for. Its distinctive arrangement and innovative lyrics, along with the exciting collaboration, made “New Jeans” another successful hit for the group.

In this music video, there’s a particular scene where the girls are turned into a video game. When I heard that I would be able to make a game-like sketch for my midterm project, my mind immediately went to that scene. Of course, at first, I wanted to make more of something that resembles one of my favorite arcade games, Dance Dance Revolution, but after I spent countless hours trying my hardest to make it work, I just stumbled into too many obstacles that made me realize that I would not have the time to figure it out. So, I went back to my previous idea: To use the concept from the music video. However, I wanted to get creative with the structure of it. I decided to go with a “Choose your Character” title screen, which seemed to be the most crucial part for me. Then for the actual playing part, I wanted their song to be a part of it, so I made it so that the player could win solely by surviving the flying obstacles for the entirety of the song.

Check out the music video!!

 

This is the part of the music video I was inspired by:


Design

Since the character designs were already avaliable, I did not have a hard time picking the character design. However, I could not find a high quality PNG of the charactes so I had to retrce it but it was not challenging at all.

Challenges

Putting NewJeans’ Escape together forced me to face many challenges:
  1. The “Choose Your Character” Disaster: This was primarily the most significant part of the whole game for me. I was really passionate about this, and I would not continue if it had not worked. After countless hours of searching online and watching useless YouTube videos, I turned to ChatGPT, who taught me to use an Index, which I am very, very proud of myself for getting the hang of. I used the mouseClicked(); function to check the position of the mouse and which character it corresponds to and I stored that character into a variable i named “characterIndex” which displays in the ‘play’ state and once the player chooses the character, the game state will change to ‘play’.

I’m very proud of myself for getting it figured out.

// Function to handle mouse clicks
function mouseClicked() {
  if (gameState === "start") {
    // Check if mouse click is on a character
    for (let i = 0; i < 5; i++) {
      if (mouseX > (width / 5) * i && mouseX < (width / 5) * (i + 1)) {
        characterIndex = i; // Set selected character
        gameState = "play"; // Change game state to play
        break;
      }
    }
  }

 

2. The Time Loss Incident: “I just wanted a timer to be displayed at the top right of the screen. Is that too much to ask?” said Rashed as he was on the brink of quitting. Having a timer that would countdown with the song, for some reason, was not cooperating with what I wanted to do. I wanted to directly connect it to the music to have it automatically calculate when the music would start and countdown till its end, but I could not figure it out. I decided to code the timer separately instead of figuring that out and that’s what I did. It turns out this was the most straightforward way, and I wish I had thought of this before where I had two variables, “timeLeft” and “long duration,” which both equal 108 (The duration of the song in seconds), and had them decrease by the current time of the song.

Very proud of myself for not giving up.

// Display remaining time
timeLeft = songDuration - song.currentTime();
let minutes = Math.floor(timeLeft / 60);
let seconds = Math.floor(timeLeft % 60);
let timeString = nf(minutes, 2) + ":" + nf(seconds, 2);
textAlign(RIGHT);
text("Time: " + timeString, width - 10, 30);

 

3. The Collision Colliding Collision: The only thing I wanted was for when the objects hit the player, lives would decrease, but in so many tries, for some reason, it would not work well. No matter hoe many times I try, nothing would work. until I found the miracle of the dist(); function. The function calculates the distance between two points. The coordinates(obj.x + 75, obj.y + 50) represent the center of the current object (adjusted for its size, this was torture). The coordinates(80, characterY + 30) represent the center of the character (adjusted for its size, torture part. 2). This means that if the distance is less than 30 pixels (which represents a collision radius), it means the object and the character have collided.

 

objects.push(createObject());
 }
 for (let obj of objects) {
 obj.x -= objectSpeed; // Move object from right to left
 // Draw the object (evil bunny)
 image(evilBunny, obj.x, obj.y, 150, 100);

 // Check collision with character
 if (dist(obj.x + 75, obj.y + 50, 80, characterY + 30) < 30) { 
   lives--; // If collision happens, decrease lives
   objects.splice(objects.indexOf(obj), 1); // Remove object

 

The Game

FullScreen Link

 

Overall

I am very, very proud of myself and very happy with how this turned out. I hope to continue working on my skills, and one day, I could code a rhythm game.

Leave a Reply