My Midterm Assignment can be described in the following way: “A computer geeks dream”. Jokes aside, this is an Idea I have had on mind for a long time and I decided that this is the right time for me to make it reality. Let’s dive deep into it:

Ideation:

As the midterm assignment was approaching I was a little bit scared of what I should do. I heard people around me all say they are going to make a game or some visual artistic piece but I wanted to do something different. Then I realized, what is my first experience with computers and technology? The answer was clear and simple: WINDOWS XP (My first computer with a Pentium 3 and 1GB of ram Is one I will always remember)

Concept

The concept was pretty simple. Make a small Windows XP emulator that will include the original icons and sounds as well as display the infamous windows errors which don’t make sense (for example: Keyboard not found: Press some button – like how am I supposed to press a button on the keyboard if it’s disconnected???). Before Explaining the technical side, I will let you explore the project a little bit.

Execution

This assignment was done in a way that was very thought of and self reflective based on the readings we have done for the class in the past month. It is focused on human centered design as well as it incorporates many techniques like the obviousness of the design and the “lack of need for instructions”. It starts of simple with a power button which is familiar to everyone as well as the whole windows ecosystem which is easy to figure out. The icons have been made draggable, blue when clicked and with the original click sound, just like a real windows XP. For organization purposes they have been divided in different classes, as shown below:

class Icon {
  constructor(image, label, x, y, width, height) {
    this.image = image;
    this.label = label;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.isHighlighted = false;
    this.isDragging = false; // New property to track dragging state
    this.offsetX = 0; // Offset between mouse and icon x position during drag
    this.offsetY = 0; // Offset between mouse and icon y position during drag
    this.clickCount = 0;
  }

  draw() {
    push();
    if (this.isHighlighted || this.isDragging) {
      tint(0, 0, 255); // Tint for highlight
      fill("blue"); // Color for highlighted text
    } else {
      noTint();
      fill(255); // Default text color
    }

    image(this.image, this.x, this.y, this.width, this.height);
    text(this.label, this.x, this.y + this.height + 10); // Adjust text position below the icon
    pop();
  }

  contains(px, py) {
    return (
      px >= this.x &&
      px <= this.x + this.width &&
      py >= this.y &&
      py <= this.y + this.height
    );
  }

  click() {
    if (this.contains(mouseX, mouseY)) {
      this.isHighlighted = true;
      clickSound.play();

      // Check if the current icon is the last clicked icon
      if (lastIconClicked === this.label) {
        this.clickCount++; // Increment only if the same icon is clicked consecutively
      } else {
        // Reset all icons' click counts if a different icon is clicked
        icons.forEach((icon) => (icon.clickCount = 0));
        this.clickCount = 1;
        lastIconClicked = this.label; // Update the last clicked icon label
      }

      console.log(
        `Clicked on Icon: ${this.label}, Click Count: ${this.clickCount}`
      );

      // Check if the icon is clicked two times in a row
      if (this.clickCount % 2 == 0 && this.label === "midterm.exe") {
        errorImageLogic();
        this.clickCount = 0; // Reset click count after opening the icon
      } else if (this.clickCount % 2 == 0 && this.label === "My Computer") {
        myComputerLogic();
        this.clickCount = 0; // Reset click count after opening the icon
      } else if (this.clickCount % 2 == 0 && this.label === "Recycle Bin") {
        recycleBinLogic();
        this.clickCount = 0; // Reset click count after opening the icon
      } else if (this.clickCount == 1 && this.label === "errorImage") {
        spawnErrorImages();
        this.clickCount = 0; // Reset click count after spawning error images
      }
    } else {
      this.isHighlighted = false;
    }
  }

  mousePressed() {
    if (this.contains(mouseX, mouseY)) {
      this.isDragging = true;
      this.offsetX = this.x - mouseX;
      this.offsetY = this.y - mouseY;
    }
  }

  mouseReleased() {
    this.isDragging = false;
  }

  mouseDragged() {
    if (this.isDragging) {
      this.x = mouseX + this.offsetX;
      this.y = mouseY + this.offsetY;
    }
  }
}

Shown above is the class for the Icons which makes it easy to add them or take them away.

class Window {
  constructor(image, width, height) {
    this.image = image;
    this.width = width;
    this.height = height;
    this.x = 50;
    this.y = 50;
    this.closeButtonSize = 50; // Size of the close button
  }

  draw() {
    image(this.image, this.x, this.y, this.width, this.height);
  }

  clicked(mx, my) {
    // Check if close button is clicked
    if (
      mx > this.x + this.width - this.closeButtonSize &&
      mx < this.x + this.width &&
      my > this.y &&
      my < this.y + this.closeButtonSize
    ) {
      clickSound.play();
      specialWindow = null; // Close the window
    }

    // Check if the bottom half of the window is clicked
    if (
      this.image === errorImage &&
      mx >= this.x &&
      mx <= this.x + this.width &&
      my >= this.y + this.height / 2 &&
      my <= this.y + this.height
    ) {
      errorShouldSpawn = true;
      // Logic for clicking the bottom half of the error window
      for (let i = 0; i < 40; i++) {
        setTimeout(() => {
          spawnErrorImages();
        }, i * 100); // spawn more error windows over time
      }

      // Transition to blue screen after 2 seconds
      setTimeout(() => {
        loop();
        currentState = State.BLUE_SCREEN;
      }, 4000);
    }
  }
}

Shown above is the code for the Window class which displays the windows where the icons are clicked and also controls the behavior of the error prompts.

Challenges and closing statement

The main challenges included the clicking of the buttons and dragging them around as well as the behavior of the error messages shown.

Special thanks to Pi and Professor Aaron Sherwood for the help throughout the whole execution of the project. You guys really motivated me to make my childhood dream come true. If you showed this to 5 year old Darko and said he made that he would literally be so excited.

At the same time, thank YOU as a reader for “wasting” 5 minutes of your day to appreciate my work. Remember to put a smile on your face and appreciate very day as much as you can. Spread love with your family, friends, professors and even strangers cause you never know what tomorrow brings.

Darko Loves You <3

Stay Safe!

Concept and Gameplay

“UFO Escape” transports players into the role of a UFO pilot tasked with the critical mission of avoiding collision with perilously floating rocks in space. The game unfolds across a dynamic background that transitions from the tranquility of space to the adrenaline-pumping danger zone filled with obstacles. Players must use the arrow keys to maneuver their spacecraft, navigating the challenging asteroid field. Each successful dodge rewards the player with points, elevating the stakes and the satisfaction derived from setting new high scores.

Technical Achievements and Design Decisions

In my opinion, one of the game’s standout features is its seamless integration of visual and auditory elements to create an immersive experience, which was the vibe I was going for. The use of distinct background images for different game states — a peaceful space scene for the menu and game over screens and a more in-the-field backdrop for gameplay.

// Displays the space background image only during menu and game over states but displays a different image during gameplay
if (gameState === "MENU" || gameState === "GAME OVER") {
  background(bgImage);
} else if (gameState === "PLAYING") {
  background(gameplayBgImage);
}

The transition between these states is goofy because of its old-school UFO soundtrack that loops during gameplay. This adds a layer of nostalgia that brings me back to the old free online games I used to play growing up in school using the school computers. The soundtrack then abruptly halts upon the game’s end, marking the player’s failure and the game’s conclusion.

Another area of pride would be collision detection, which not only ensures that the game is playable but also maintains a level of difficulty that is engaging without being frustrating, but it was highly frustrating to tune it properly to respond.

// Function to detect collision with obstacles
collidesWith(obstacle) {
  let closestX = constrain(obstacle.x, this.x - this.width / 3, this.x + this.width / 3);
  let closestY = constrain(obstacle.y, this.y - this.height / 3, this.y + this.height / 3);
  let distanceX = obstacle.x - closestX;
  let distanceY = obstacle.y - closestY;
  let distanceSquared = (distanceX * distanceX) + (distanceY * distanceY);
  return distanceSquared < (obstacle.radius * obstacle.radius); // Checks if distance is less than obstacle radius
}

The game accurately determines collisions by calculating the closest points between the UFO and the incoming asteroids. This method considers the actual positions and dimensions of both objects, offering a realistic and, for the most part, precise detection mechanism that enhances the player’s experience.

Areas for Improvement and Challenges

While “UFO Escape” is the first game I got to create, and I am extremely proud of it, certain aspects remain ripe for enhancement. The collision detection system, though effective, could be refined to accommodate the irregular shapes of the rocks more accurately.

Another challenge faced during development was ensuring the game’s performance remained smooth despite the increasing number of obstacles. This issue kept bugging the game, making the rocks not properly collide with the UFO ship. This issue was largely mitigated through optimization techniques, such as removing off-screen obstacles from the array to free up resources.

Conclusion

“UFO Escape” embodies the spirit of classic arcade games, but I would say with a bit more graphics. Its development journey was filled with learning opportunities, from refining collision detection algorithms so many times that I lost count to creating an engaging user interface.

Sketch:

Script:

// Variables for game assets
let bgImage; // Variable to hold the background image for menu and game over screens
let bgMusic; // Variable to hold the background music for gameplay
let player; // Player object
let obstacles = []; // Array to store obstacles
let gameSpeed = 6; // Speed at which obstacles move
let score = 0; // Player's score
let gameState = "MENU"; // Initial game state; that is "MENU", "PLAYING", or "GAME OVER"
let rockImage; // Variable to hold the rock image

// Preload function to load game assets before the game starts
function preload() {
  bgImage = loadImage('space.png'); // Loads the background image
    gameplayBgImage = loadImage('gameplay.jpg'); // Loads the gameplay background image
  bgMusic = loadSound('gameplaysound.mp3'); // Loads the background music
  rockImage = loadImage('rock-2.png'); // Loads the rock image
}

// The setup function to initialize the game
function setup() {
  createCanvas(400, 600); // Size of the game canvas
  player = new Player(); // Initializes the player object
  textAlign(CENTER, CENTER); // Setting text alignment for drawing text
}

// Draw function called repeatedly to render the game
function draw() {
  // Displays the space background image only during menu and game over states but displays a different image during gameplay
  if (gameState === "MENU" || gameState === "GAME OVER") {
    background(bgImage);
  } else if (gameState === "PLAYING") {
    background(gameplayBgImage);
  }

  // Handles game state transitions
  if (gameState === "MENU") {
    drawMenu();
  } else if (gameState === "PLAYING") {
    if (!bgMusic.isPlaying()) {
      bgMusic.loop(); // Looping the background music during gameplay
    }
    playGame();
  } else if (gameState === "GAME OVER") {
    bgMusic.stop(); // Stops the music on game over
    drawGameOver();
  }
}

// Function to display the game menu
function drawMenu() {
  fill(255,0 ,0);
  textSize(24);
  text("UFO Escape", width / 2, height / 2.5);
  textSize(16);
  fill(255);
  text("Avoid the rocks!\nUse ARROW KEYS to move\nPress ENTER to start", width / 2, height / 2);
}

// Function to handle gameplay logic
function playGame() {
  fill(255);
  textSize(16);
  text(`Score: ${score}`, width / 2, 30);

  player.show(); // Displays the player
  player.move(); // Moves the player based on key inputs

  // Adding a new obstacle at intervals
  if (frameCount % 120 == 0) {
    obstacles.push(new Obstacle());
  }

  // Updates and displays obstacles
  for (let i = obstacles.length - 1; i >= 0; i--) {
    obstacles[i].show();
    obstacles[i].update();
    // Checks for collisions
    if (player.collidesWith(obstacles[i])) {
      gameState = "GAME OVER";
    }
    // Removes obstacles that have moved off the screen and increment score
    if (obstacles[i].y > height) {
      obstacles.splice(i, 1);
      score++;
    }
  }
}

// Function to display the game over screen
function drawGameOver() {
  fill(255, 0, 0);
  textSize(32);
  text("Game Over", width / 2, height / 2);
  textSize(16);
  fill(255);
  text("Press ENTER to restart", width / 2, height / 2 + 40);
}

// Function to handle key presses
function keyPressed() {
  // Starts the game or restart after game over when ENTER is pressed
  if (keyCode === ENTER || keyCode === RETURN) {
    if (gameState === "MENU" || gameState === "GAME OVER") {
      gameState = "PLAYING";
      resetGame();
    }
  }
}

// Function to reset the game to its initial state
function resetGame() {
  obstacles = []; // Clear existing obstacles
  score = 0; // Reset score
  player = new Player(); // Reinitialize the player
}

// Player class
class Player {
  constructor() {
    this.width = 60; // Width of the UFO
    this.height = 30; // Height of the UFO
    this.x = width / 2; // Starting x position
    this.y = height - 100; // Starting y position
  }

  // Function to display the UFO
  show() {
    fill(255); // Sets color to white
    rectMode(CENTER);
    rect(this.x, this.y, this.width, this.height, 20); // Draws the UFO's body
    fill(255, 0, 0); // Sets the glass color to red
    arc(this.x, this.y - this.height / 4, this.width / 2, this.height / 1, PI, 0, CHORD); // Draws the glass
  }

  // Function to move the player based on arrow key inputs
  move() {
    if (keyIsDown(LEFT_ARROW)) {
      this.x -= 5; // Moves left
    }
    if (keyIsDown(RIGHT_ARROW)) {
      this.x += 5; // Moves right
    }
    if (keyIsDown(UP_ARROW)) {
      this.y -= 5; // Moves up
    }
    if (keyIsDown(DOWN_ARROW)) {
      this.y += 5; // Moves down
    }
    this.x = constrain(this.x, 0, width); // Keeps player within horizontal bounds
    this.y = constrain(this.y, 0, height); // Keep player within vertical bounds
    //This is only so the player cannot exist the canvas
  }

  // Function to detect collision with obstacles
  collidesWith(obstacle) {
    let closestX = constrain(obstacle.x, this.x - this.width / 3, this.x + this.width / 3);
    let closestY = constrain(obstacle.y, this.y - this.height / 3, this.y + this.height / 3);
    let distanceX = obstacle.x - closestX;
    let distanceY = obstacle.y - closestY;
    let distanceSquared = (distanceX * distanceX) + (distanceY * distanceY);
    return distanceSquared < (obstacle.radius * obstacle.radius); // Checks if distance is less than obstacle radius
  }
}

// Obstacle class
class Obstacle {
  constructor() {
    this.radius = random(15, 30); // Random radius for obstacle
    this.x = random(this.radius, width - this.radius); // Random x position
    this.y = -this.radius; // Starts off-screen so it looks like its coming towards you
  }

  // Function to display the rocks
  show() {
    image(rockImage, this.x, this.y, this.radius * 2, this.radius * 2); // Draws them as a circle
  }

  // Function to update obstacles position
  update() {
    this.y += gameSpeed; // Moves obstacles down the screen
  }
}

 

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.

Approximately ten years ago, a solider has fallen: they took down Flappy Bird. A game which combines simplicity and effectiveness. For my Midterm Project, I have decided to make my own version of it called Flappy Falcon. For this, I needed the code, some pictures and sounds.

The idea behind it is that I wanted to create the NYUAD version of the game, which would have the iconic colors of the University and our mascott.

Code: The code was pretty easy to make because we have already learnt everything that I had to do for it in class. I had to make adjustments along the way, as for some reason the pipes were the hardest thing to code because I faced some issues with them along the way:

– the falcon wouldn’t pass the pipes;

-the moment the falcon would touch the pipes even so slightly it would be game over ;

Pictures: In regards to the media, I came across another problem: the falcon wouldn’t upload and it was showing me an error. After some minutes of thinking of a solution, I got it to work.

Sounds: For the sounds I have uploaded a bird background noise, which signifies the falcon, but another classmate of mine interpreted it as the bird sounds that we hear everyday on campus (thanks sm).

//Flappy Falcon Game
//by Stefania Petre for Introduction Into Interactive Media

let bird;
let pipes = [];
let gameStarted = false;
let score = 0;
let startButton;
let backgroundImage;
let flappySound;
let birdImage;

function preload() {
  backgroundImage = loadImage("background.png"); 
  flappySound = loadSound("sound.mp3"); 
  birdImage = loadImage("bird.png"); 
}

function setup() {
  createCanvas(400, 600);
  bird = new Bird();
  startButton = createButton("Start");
  startButton.position(width / 2.2, height / 1.9);
  startButton.mousePressed(startGame);
}

function draw() {
  if (gameStarted) {
    playGame();
  } else {
    showStartScreen();
  }
}

function playGame() {
  background(94, 38, 163);

  bird.update();
  bird.show();

  updateAndShowPipes();

  showScore();
}

function updateAndShowPipes() {
  for (let i = pipes.length - 1; i >= 0; i--) {
    pipes[i].update();
    pipes[i].show();

    if (pipes[i].hits(bird)) {
      gameOver();
    }

    if (pipes[i].passes(bird)) {
      score++;
    }

    if (pipes[i].offscreen()) {
      pipes.splice(i, 1);
    }
  }

  if (frameCount % 100 === 0) {
    pipes.push(new Pipe());
  }
}

function showScore() {
  textSize(32);
  fill(255);
  text(score, width / 2, 50);
}

function showStartScreen() {
  image(backgroundImage, 0, 0, width, height);
  textSize(32);
  fill(255);
  textAlign(CENTER, CENTER);
  text("Flappy Falcon", width / 2, height / 3);
  textSize(16);
  text("Press Start to Experience Nostalgia!", width / 2, height / 2.2);
  score = 0;
}

function keyPressed() {
  if (key === " " && gameStarted) {
    bird.jump();
  }
}

function startGame() {
  gameStarted = true;
  pipes = [];
  startButton.hide();
  flappySound.play();
}

function gameOver() {
  gameStarted = false;
  startButton.show();
}

class Bird {
  constructor() {
    this.y = height / 2;
    this.x = 64;
    this.gravity = 0.6;
    this.lift = -15;
    this.velocity = 0;
    this.size = 50;
  }

  show() {
    image(birdImage, this.x, this.y, this.size, this.size); // Draw the bird image
  }

  update() {
    this.velocity += this.gravity;
    this.velocity *= 0.9;
    this.y += this.velocity;

    this.y = constrain(this.y, 0, height);
  }

  jump() {
    this.velocity += this.lift;
  }
}

class Pipe {
  constructor() {
    this.spacing = 200; // Increased gap between pipes
    this.top = random(height - this.spacing);
    this.bottom = height - (this.top + this.spacing);
    this.x = width;
    this.w = 40;
    this.speed = 2;
    this.passed = false;
  }

  show() {
    fill(0); // Set color to black
    rect(this.x, 0, this.w, this.top);
    rect(this.x, height - this.bottom, this.w, this.bottom);
  }

  update() {
    this.x -= this.speed;
  }

  offscreen() {
    return this.x < -this.w;
  }

  hits(bird) {
    return (
      bird.x + bird.size / 2 > this.x &&
      bird.x - bird.size / 2 < this.x + this.w &&
      (bird.y - bird.size / 2 < this.top ||
        bird.y + bird.size / 2 > height - this.bottom)
    );
  }

  passes(bird) {
    if (this.x < bird.x && !this.passed) {
      this.passed = true;
      return true;
    }
    return false;
  }
}

Overall, I completed every single requirement for the game which I would say I am happy about!

HAILSTORM HAVOC

My game draws significant inspiration from the hailstorm that occurred in Abu Dhabi a few weeks ago.

 

I was captivated by the idea of creating a game where the player must dodge hail. I envisioned a game centered around a car avoiding the hail, however, this concept proved to be overly complex, and after trial and error, I was able to overcome this challenge. To play the game: players must move the car away from the falling hail using the mouse click function. Interestingly, the mouse click function in my game serves two purposes, a feature I was unaware of until Pi assisted me in rectifying a misunderstanding. This allowed me to control both the car and a sprite, adding a fascinating layer to the gameplay.

function mousePressed() {
  console.log("Mouse Press");
  //just flipping between modes 0 and 1 in this example

  clouds.forEach((cloud) => cloud.startAnimation());
}

function mouseReleased() {
  clouds.forEach((cloud) => cloud.stopAnimation());
}

How the game works: 

1. 1. You must press Click to start
   2. To move the car you have to press the mouse
      1. The longer the press the further right the ball will go
   3. Dodge the hail (white balls) and avoid touching the red line as both are game over
   4. Press “space” to restart the game 

This is my game:

If it doesn’t work, visit:

https://editor.p5js.org/Afrabinjerais/sketches/q0cF4mKOG

The game is straightforward yet incorporates all the coding components we have learned to date. Its design is uncomplicated, effectively conveying the intended message. I got inspired by this p5 sketch and, the link takes you to a simple game on P5, which has a similar concept to my game, where the objects are falling from the sky.

https://editor.p5js.org/jordanBlueshift/sketches/vSO_bzkaD

 My favorite aspect of my game is the cloud sprites, which fidget whenever the mouse is clicked, creating the impression that the clouds are generating hail. On another hand,  I also encountered a significant challenge when integrating sound effects to play each time the score increased, which was undoubtedly the most difficult part for me to implement. 

    time += 1;
    if (frameCount % 60 == 0) {
      score++;
    }

function scoreUpdate() {
  // score += 10;
  if (score != prevScore) {
    scoreSound.play();
  }
  
  prevScore = score;
  
  fill(128, 128, 128, 150);
  rect(width - 100, 5, 75, 20, 5);
  fill(255);
  text("SCORE: " + int(score), width - 65, 15);
}

The issue stemmed from the points increasing too rapidly. By reducing the timer and implementing a modulo operation as suggested by the professor, I was able to resolve this problem. Looking ahead, or given more time, I would be eager to experiment with transforming the background to be interactive and making it move to visualize a street.  Although my initial attempt at this modification was unsuccessful, I am keen on dedicating time to delve into unfamiliar areas of coding to make this feature a reality.

This is the code for the game:

let gameMode = 0; // Variable to store the current game mode
let musicSound; // Variable to hold the music sound object
let gameoverSound; // Variable to hold the game over sound object
let scoreSound; // Variable to hold the score sound object
var landscape; // Variable to store the landscape graphics
var car_diameter = 15; // Diameter of the ball
var bomb_diameter = 10; // Diameter of the bombs
var xpoint; 
var ypoint; 
var zapperwidth = 6; // Width of the zapper
var numofbombs = 10; // Number of bombs
var bombposX = []; // Array to store X positions of bombs
var bombposY = []; // Array to store Y positions of bombs
var bombacceleration = []; // Array to store acceleration of each bomb
var bombvelocity = []; // Array to store velocity of each bomb
var time = 0; // Variable to track time, usage context not provided
var timeperiod = 0; // Variable to store a time period, usage not clear without further context
var score = 0; // Variable to store the current score
var posX; // X position, usage context not provided
var inMainMenu = true; // Boolean to check if the game is in the main menu
var prevScore = 0; // Variable to store the previous score
let font; // Variable to store font, usage context not provided


//Cloud Variables
let spritesheet;
let oneDimensionarray = [];

function preload() {
  spritesheet = loadImage("clouds.png");
  musicSound = loadSound("sounds/song.mp3");
  gameoverSound = loadSound("sounds/gameover.mp3");
  scoreSound = loadSound("sounds/score.mp3");
  glassbreak = loadSound("sounds/glassbreaking.wav");
  font = loadFont("fonts/Inconsolata_Condensed-Light.ttf");
  car = loadImage("car.png");
  car2 = loadImage("car2.png");
}

// Cloud class starts
class Cloud {
  constructor(x, y, speed, stepSpeed, scale) {
    this.x = x;
    this.y = y;
    this.scale = scale; // Add scale property
    this.speed = speed;
    this.stepSpeed = stepSpeed;
    this.step = 0;
    this.facingRight = false; // Initially moving to the left
    this.animationTimer = null;
  }

  move() {
    if (this.facingRight) {
      this.x += this.speed;
      if (this.x > width + spritesheet.width / 4) {
        this.x = -spritesheet.width / 4; // Wrap around to the left side
      }
    } else {
      this.x -= this.speed;
      if (this.x < -spritesheet.width / 4) {
        this.x = width + spritesheet.width / 4; // Wrap around to the right side
      }
    }
  }

  display() {
    push();
    if (!this.facingRight) {
      scale(-this.scale, this.scale); // Apply scale with horizontal flip
      image(oneDimensionarray[this.step], -this.x, this.y);
    } else {
      scale(this.scale, this.scale); // Apply scale
      image(oneDimensionarray[this.step], this.x, this.y);
    }
    pop();
  }

  advanceStep() {
    this.step = (this.step + 1) % 8;
  }

  startAnimation() {
    this.facingRight = true;
    clearInterval(this.animationTimer);
    this.animationTimer = setInterval(() => this.advanceStep(), this.stepSpeed);
  }

  stopAnimation() {
    this.facingRight = false;
    clearInterval(this.animationTimer);
  }
}

let clouds = [];
// Cloud class ends

function setup() {
  createCanvas(640, 480);
  textAlign(CENTER);
  musicSound.play();
  
var temp00 = 0, 
    temp01 = -20; 

// A while loop that increments temp01 based on temp00 until temp01 is less than the canvas height
while (temp01 < height) {
  temp00 += 0.02; // Increment temp00 by 0.02 in each loop iteration
  temp01 += temp00; // Increment temp01 by the current value of temp00
  timeperiod++; // Increment timeperiod in each iteration
}

// Calculate the initial position of posX based on zapperwidth and car_diameter
posX = zapperwidth + 0.5 * car_diameter - 2;

// Set xpoint and ypoint relative to the width and height of the canvas
xpoint = 0.7 * width; // Set xpoint to 70% of the canvas width
ypoint = height - 0.5 * car_diameter + 1; // Set ypoint based on the canvas height and car_diameter

initbombpos(); // Call the initbombpos function (presumably initializes bomb positions)

imageMode(CENTER); // Set the image mode to CENTER for drawing images centered at coordinates

// Initialize variables for width and height based on sprite sheet dimensions divided by specific values
let w = spritesheet.width / 2;
let h = spritesheet.height / 4;

// Nested for loops to extract sprite images from the sprite sheet and push them to oneDimensionarray
for (let y = 0; y < 4; y++) {
  for (let x = 0; x < 2; x++) {
    oneDimensionarray.push(spritesheet.get(x * w, y * h, w, h)); // Get sub-images from spritesheet and add to oneDimensionarray
  }
}

  
  // Create 3 clouds with horizontal offsets, different speeds and scales
  clouds.push(new Cloud(width / 8, height / 9, 0, 100, 0.9)); // First cloud
  clouds.push(new Cloud((2 * width) / 5, height / 9, 0, 100, 1.2)); // Second cloud
  clouds.push(new Cloud((2 * width) / 2, height / 9, 0, 200, 1.0)); // Third cloud
}

function draw() {
  background(58, 66, 94);

  if (gameMode == 0) {
  clouds.forEach((cloud) => {
      cloud.display();
    });
  textFont(font);
  fill(255);
  textSize(50); // Larger text size for the game title
  textAlign(CENTER, CENTER); // Align text to be centered
   text('HAILSTORM HAVOC', width / 2, height / 2 - 40);
  textSize(16); // Smaller text size for the directions
  // Draw the directions right below the game title
  text('DIRECTIONS:\n click mouse to dodge hail\n the longer the press the further right\n the car will go\n\n AVOID the red line - crossing it means game over', width / 2, (height / 2) + 50);
  textSize(20);
  text('Click to start!', width / 2, (height / 2) + 140);
   
}  
   else if (gameMode == 1) {
    clouds.forEach((cloud) => {
      cloud.move();
      cloud.display();
    });

    fill(239, 58, 38);
    rect(0, 0, zapperwidth, height);
    scoreUpdate();

    fill(255);
    noStroke();
    for (var i = 0; i < numofbombs; i++) {
      ellipse(bombposX[i], bombposY[i], bomb_diameter, bomb_diameter);
      
    }

    updatebombpos();

    
    // ellipse(xpoint, ypoint, car_diameter, car_diameter);
        image(car,xpoint, ypoint-30, car_diameter*5, car_diameter*5);

     
     xpoint -= 3;

    // Check if the mouse is pressed and the xpoint is within the canvas boundaries
if (mouseIsPressed && xpoint + 0.5 * car_diameter < width) {
  xpoint += 6; // Move the xpoint to the right by 6 units
}
     
     // Check if xpoint is less than or equal to posX or if a collision with a bomb has occurred
    if (xpoint <= posX || bombCollistonTest()) {
      gameover(); // Call the gameover function if either condition is true
    }
// Increment the score every 60 frames
    time += 1;
    if (frameCount % 60 == 0) {
      score++; // Increase score by 1
    }
  }

}

function updatebombpos() {
  // Iterate over each bomb
  for (var i = 0; i < numofbombs; i++) {
    bombvelocity[i] += bombacceleration[i]; // Update the velocity of the bomb by adding its acceleration
    bombposY[i] += bombvelocity[i]; // Update the Y position of the bomb based on its velocity
  }

  if (time > timeperiod) {
    initbombpos(); // Reinitialize the positions of the bombs by calling the initbombpos function
    time = 0;
  }
}

function initbombpos() {
  for (var i = 0; i < numofbombs; i++) {
    bombacceleration[i] = random(0.02, 0.03);
    bombvelocity[i] = random(0, 5);
    bombposX[i] = random(zapperwidth + 0.5 * car_diameter, width);
    bombposY[i] = random(-20, -0.5 * car_diameter) + 190;
  }
} //This function initializes the position and motion properties of each bomb by assigning random values within specified ranges.

function bombCollistonTest() {
  var temp = 0.5 * (car_diameter + bomb_diameter) - 2;
  var distance;
// Iterate over each bomb to check for a collision
  for (var i = 0; i < numofbombs; i++) {
    distance = dist(xpoint, ypoint, bombposX[i], bombposY[i]);
    if (distance < temp) {
      return true;
    }
  }
  return false;
} //This function checks for collisions between the player and each bomb by comparing the distance between them to a threshold. If any bomb is too close (within the threshold), it returns true (collision detected). Otherwise, it returns false.

function gameover() {
  image(car2,xpoint, ypoint-30, car_diameter*5, car_diameter*5);
  musicSound.pause();
  glassbreak.play();
  gameoverSound.play();
  textFont(font);
  fill(255);
  textSize(50); // Set the text size
  textAlign(CENTER, CENTER); // Align text to the center
  text("GAME OVER", width / 2, height / 2 - 20); // Center the text horizontally and vertically
  textSize(15); // Decreased text size for "press space to restart" text
  text("Press space to restart", width / 2, height / 2 + 20); // Positioned below "GAME OVER" text
  noLoop();
}

function scoreUpdate() {
  // score += 10;
  if (score != prevScore) //// Play the scoring sound only if the current score has changed from the previous score 
  {
    scoreSound.play();
  }
  
  prevScore = score;
  
  fill(128, 128, 128, 150);
  rect(width - 100, 5, 75, 20, 5);
  fill(255);
  text("SCORE: " + int(score), width - 65, 15);
}

function keyPressed() {
  if (keyCode === 32) {
    // Check if the key pressed is space (keyCode 32)
    restartGame(); // Call the function to restart the game
  }
  
}

function mousePressed() {
  if (gameMode==0)
    gameMode=1;
  console.log("Mouse Press");
  //just flipping between modes 0 and 1 

  clouds.forEach((cloud) => cloud.startAnimation());
}

function mouseReleased() {
  clouds.forEach((cloud) => cloud.stopAnimation());
}

function restartGame() {
  // Reset all game variables to their initial values
  musicSound.play();
  gameoverSound.pause();
  time = 0;
  score = 0;
  posX = zapperwidth + 0.5 * car_diameter - 2;
  xpoint = 0.5 * width;
  ypoint = height - 0.5 * car_diameter + 1;
  initbombpos();
  // Restart the game loop
  loop();
} 
//This function resets the game environment and variables to their initial state, essentially restarting the game. It resumes background music, pauses any game over sound, resets score and time, repositions the player and bombs, and restarts the game loop.

Enjoy!

 

References of pictures:

https://bnnbreaking.com/finance-nav/al-ains-unprecedented-hailstorm-a-costly-blow-to-the-car-sales-sector

https://bnnbreaking.com/weather/uaes-al-ain-transformed-unprecedented-hailstorm-blankets-streets-in-white

 

 

Link to the fullscreen version

Concept: My midterm project is a game I’ve named “Gold Rush”. It’s inspired from the Super Mario games’ design. The game features a character Super Onion boy that the player controls to jump over and walk to dodge enemies and collect coins to increase their score. The main character, an adventurer with a knack for treasure hunting, traverses a dynamically scrolling landscape filled with gold coins for him to collect. The game introduces a unique enemy, the “GOMBA,” a mysterious creature with a purple body, tentacles, and light-flickering eyes, adding a layer of intrigue and challenge to the player’s journey. Dodging the enemy gains the player +5 points and collecting each coin gains them +10 points, and the score system is displayed on top of the screen while the game is playing. If the player collides with the enemy GOMBA, the game over screen appears and to play again – the player needs to press SHIFT key and the game will restart.

User Experience: The game is structured around a loop where the player’s character is continuously moving forward, with the background scrolling to simulate progression through the game world. This effect is achieved through an implementation of looping background images that reset once they scroll past the view, creating an endless moving landscape. The characters, including the player, the coin, and the enemy, are animated using sprites, which are sequences of images that create the illusion of motion when displayed in rapid succession.

One aspect of the project I’m particularly proud of is the collision detection mechanism. It’s designed to be both efficient and accurate enough for the game’s scope, using simple geometric shapes to approximate the player, coins, and enemies’ positions. This simplicity ensures the game runs smoothly without compromising the gameplay experience. Another highlight is the sound integration, which enhances the immersive experience of the game. The careful selection and timing of sound effects for jumping, collecting coins, and colliding with enemies add a layer of polish that elevates the overall game.

Areas for Improvement and Challenges: One area for improvement involves enhancing the game’s replay value. Currently, the game offers a straightforward challenge with a single level that repeats. Introducing varied levels with increasing difficulty with speed, diverse environments, and additional enemy types could significantly enhance the player’s experience and engagement. Implementing a power-up system or special abilities for the character could also add depth to the gameplay.

During development, one challenge encountered was ensuring that the game remained engaging over time. Initially, if the player missed a coin, it wouldn’t reappear, which could’ve led to a monotonous gameplay loop. This issue was addressed by adjusting the coin’s reinitialization logic to ensure it reappears regardless of whether it’s collected or missed, maintaining the game’s pace and challenge. Another technical hurdle was balancing performance with the visual richness of the game, particularly with sprite animation and background scrolling. Also to integrate the sound loops perfectly was hard at first but after fixing the code logic in different ways the desired results were received.

Full code for the game:

//GOLD RUSH BY RAYA TABASSUM

//CHARACTERS: SUPER ONION BOY, GOLD COIN, GOMBA THE ENEMY

//5 POINTS FOR AVOIDING THE ENEMY, 10 POINTS FOR COLLECTING THE COIN

// Preload function for loading assets before the game starts
let img, game_over_bg, sf, coin_sound, jump_sound, enemy_sound, pixel_font;
let xpos = 0, ypos = 0, x1 = 0, x2 = 1000, y = 0, x3 = 0, y2 = 0, score = 0, win = true;
let player, enemy, coin;

function preload() {
  img = loadImage("plt.png"); // Background image
  game_over_bg = loadImage("Gameover.png"); // Game over background image
  soundFormats('mp3', 'ogg'); // Specify the sound formats to use
  sf = loadSound("backgroundmusic.mp3"); // Background music
  coin_sound = loadSound("coin.mp3"); // Sound for collecting coins
  jump_sound = loadSound("jumping.mp3"); // Sound for jumping
  enemy_sound = loadSound("enemy_sound.mp3"); // Sound when colliding with an enemy
  pixel_font = loadFont("PixelFont.ttf"); // Custom font for text display
}

// Player class with properties and methods for the player character
class Player {
  constructor() {
    this.playerYOnGround = 550; // Y position of the player on the ground
    this.playerSize = 60; // Size of the player character
    this.bgGroundHeight = 45; // Height of the ground
    this.animationSlowDown = 8; // Slows down the animation frame rate
    this.width = 1000; // Width of the canvas
    this.jumpHeight = 0; // Current jump height
    this.jumpStrength = 0; // Current strength of the jump
    this.jumpStrengthMax = 5; // Maximum strength of the jump
    this.gravity = 0.1; // Gravity affecting the jump
    this.jumping = false; // Is the player jumping?
    this.playerImg = []; // Array to hold player images for animation
    this.numberPlayerImg = 6; // Number of player images
    this.playerImgIndex = 0; // Current index of the player image
    for (let i = 1; i <= 3; i++) {
      this.playerImg.push(loadImage(`guy-${i}.png`)); // Load player images
    }
  }

  initPlayer() {
    xpos = (this.width * 0.5) - (this.playerSize * 0.5); // Initialize player's horizontal position
    ypos = this.playerYOnGround; // Initialize player's vertical position
  }

  animatePlayer() {
    // Handle jumping logic
    if (this.jumping) {
      this.jumpStrength = (this.jumpStrength * 0.99) - this.gravity; // Apply gravity
      this.jumpHeight += this.jumpStrength; // Update jump height
      if (this.jumpHeight <= 0) {
        // Reset jump parameters if player is back on ground
        this.jumping = false;
        this.jumpHeight = 0;
        this.jumpStrength = 0;
      }
    }

    ypos = this.playerYOnGround - this.jumpHeight; // Update player's vertical position based on jump

    // Display the player image, use jumping image if jumping or animate otherwise
    if (this.jumping) {
      image(this.playerImg[0], xpos, ypos);
    } else {
      image(this.playerImg[this.playerImgIndex], xpos, ypos);
      // Animate player images
      if (frameCount % this.animationSlowDown === 0) {
        this.playerImgIndex = (this.playerImgIndex + 1) % 3;
      }
    }
  }
}

// Enemy class, inherits from Player and represents the enemy character
class Enemy extends Player {
  constructor() {
    super(); // Call the parent class constructor
    this.enemyImg = []; // Array to hold enemy images for animation
    for (let i = 1; i <= 3; i++) {
      this.enemyImg.push(loadImage(`enemy-${i}.png`)); // Load enemy images
    }
    this.enemyX = 800; // Initial horizontal position of the enemy
    this.enemyY = 460; // Initial vertical position of the enemy
    this.enemySize = 100; // Size of the enemy character
    this.enemyOnSky = random(250, 510); // Randomize enemy's vertical position
    this.enemyImgIndex = 0; // Current index of the enemy image
  }

  initEnemy() {
    this.enemyX -= 2; // Move the enemy horizontally
    this.enemyY = this.enemyOnSky; // Update the enemy's vertical position
  }

  animateEnemy() {
    // Display and animate the enemy character
    image(this.enemyImg[this.enemyImgIndex], this.enemyX, this.enemyY, this.enemySize, this.enemySize);
    this.enemyX -= 1; // Move the enemy horizontally
    this.initEnemy(); // Re-initialize the enemy position
    if (frameCount % this.animationSlowDown === 0) {
      this.enemyImgIndex = (this.enemyImgIndex + 1) % 3; // Animate enemy images
    }

    // Reset enemy position and increase score when it moves off-screen
    if (this.enemyX <= 0) {
      this.enemyX = 1000;
      this.enemyOnSky = random(250, 510);
      this.initEnemy();
      score += 5; // Increase score
    }

    // Check for collision with the player
    if (dist(this.enemyX, this.enemyY, xpos, ypos) <= (this.playerSize / 2 + this.enemySize / 2)) {
      win = false; // End the game if collision detected
      if (!enemy_sound.isPlaying()) {
        if (sf.isPlaying()) {
            sf.stop(); // Stop the background music
        }
        enemy_sound.loop(); // Play the enemy sound on loop
      }
    }
  }
}

// Coin class, inherits from Player and represents collectible coins
class Coin extends Player {
  constructor() {
    super(); // Call the parent class constructor
    this.coinImg = []; // Array to hold coin images for animation
    for (let i = 1; i <= 5; i++) {
      this.coinImg.push(loadImage(`coin-${i}.png`)); // Load coin images
    }
    this.coinX = 800; // Initial horizontal position of the coin
    this.coinY = 460; // Initial vertical position of the coin
    this.coinSize = 48; // Size of the coin
    this.coinImgIndex = 0; // Current index of the coin image
  }

  initCoin() {
    this.coinX = width; // Place the coin at the edge of the screen
    this.coinY = random(250, 510); // Randomize the coin's vertical position
  }

  animateCoin() {
    // Display and animate the coin
    image(this.coinImg[this.coinImgIndex], this.coinX, this.coinY, this.coinSize, this.coinSize);
    this.coinX -= 1; // Move the coin horizontally
    if (frameCount % this.animationSlowDown === 0) {
      this.coinImgIndex = (this.coinImgIndex + 1) % 5; // Animate coin images
    }

    // Check if the coin has been collected
    if (dist(this.coinX, this.coinY, xpos, ypos) <= (this.playerSize / 2 + this.coinSize / 2)) {
      this.initCoin(); // Re-initialize the coin position for it to reappear again
      score += 10; // Increase score
      if (!coin_sound.isPlaying()) {
        coin_sound.play(); // Play the coin collection sound
      }
    }
    // Check if the coin has moved off the left edge of the screen without being collected
    else if (this.coinX < 0) {
      this.initCoin(); // Re-initialize the coin position for it to reappear again
    }
  }
}

function setup() {
  createCanvas(1000, 750); // Set up the canvas
  if (!sf.isPlaying()) {
    sf.loop(); // Loop the background music if not already playing
  }
  player = new Player(); // Instantiate the player
  enemy = new Enemy(); // Instantiate the enemy
  coin = new Coin(); // Instantiate the coin
  player.initPlayer(); // Initialize the player
  coin.initCoin(); // Initialize the coin
  enemy.initEnemy(); // Initialize the enemy
}

function draw() {
  background(220); // Set the background color
  image(img, x1, y); // Draw the background image twice for a scrolling effect
  image(img, x2, y);
  x1 -= 1; // Move the background images to create a scrolling effect
  x2 -= 1;
  if (x1 <= -1000) { // Reset the background images positions for continuous scrolling
    x1 = 1000;
  }
  if (x2 <= -1000) {
    x2 = 1000;
  }

  // Animate player, coin, and enemy
  player.animatePlayer();
  coin.animateCoin();
  enemy.animateEnemy();
  
  // Display the score and instructions
  textSize(25);
  textFont(pixel_font);
  fill(255, 215, 0);
  text(`Score: ${score}`, 450, 100);
  text("Use UP Key to Jump", 375, 25);
  textSize(20);
  text("Collect the coins and avoid hitting the enemy!", 250, 45);

  if (!win) {
    image(game_over_bg, x3, y2); // Display the game over background
    textSize(30);
    text("Press SHIFT Key to Play Again", 285, 25);
    //noLoop(); // Stop the draw loop
  }
}

function keyPressed() {
  // Jump when UP key is pressed
  if (keyCode === UP_ARROW && win) {
    player.jumping = true; // Enable jumping
    if (!jump_sound.isPlaying()) {
      jump_sound.play(); // Play jump sound
    }
    player.jumpStrength = player.jumpStrengthMax; // Set jump strength to maximum
  }

  // Reset game when SHIFT key is pressed after losing
  if (keyCode === SHIFT && !win) {
    win = true; // Reset game status
    score = 0; // Reset score
    if (enemy_sound.isPlaying()) {
        enemy_sound.stop(); // Stop the enemy sound if playing
    }
    loop(); // Resume the draw loop
    setup(); // Reinitialize game setup
  }
}

 

Recently, I had the opportunity to visit The Metropolitan Museum of Art (The MET) and was truly inspired by the diverse and rich history encapsulated within its walls. This visit sparked an idea in me to design an exhibit for The MET’s Costume Institute, focusing on the evolution of haute couture through iconic designs from renowned fashion houses. My midterm, aims to showcase the enduring allure and innovation of haute couture, highlighting how designers have redefined beauty and style over the decades.

By focusing on the individual stories that each garment tells about its era, the exhibit aims to provide a rich, textual narrative that captures the essence and evolution of haute couture across different periods.

Interactive elements, such as clickable images that reveal the history and significance of each piece, are integral to the exhibit. These features are designed to engage users, encouraging them to delve deeper into each garment’s story and understand its place within the broader narrative of fashion history.

let titleSize = 40;
let subtitleSize2 = 20;
let subtitleSize = 10;
let  bg, bg2;
let dress1, dress1Zoom1, dress1Zoom2, dress1Zoom3, dress1Zoom4, dress1Zoom5;
let dress2, dress2Zoom1, dress2Zoom2, dress2Zoom3, dress2Zoom4;
let dress3, dress3Zoom1, dress3Zoom2, dress3Zoom3;
let dress4, dress4Zoom1, dress4Zoom2, dress4Zoom3, dress4Zoom4;
let dress5, dress5Zoom1, dress5Zoom2, dress5Zoom3, dress5Zoom4, dress5Zoom5;
let dress6, dress6Zoom1, dress6Zoom2, dress6Zoom3, dress6Zoom4;
let scene = "main"; // Start with the exhibit scene
let bgsound;



function preload() {
  bgsound = loadSound('bgsoundfile.mp3')
  bg = loadImage('bg.jpeg');
  bg2 = loadImage('fullscreen.png'); // The fullscreen image for the exhibit
  //dress1
  dress1 = loadImage('dress1.png');
  dress1Zoom1 = loadImage('dress1Zoom1.png');
  dress1Zoom2 = loadImage('dress1Zoom2.png');
  dress1Zoom3 = loadImage('dress1Zoom3.png');
  dress1Zoom4 = loadImage('dress1Zoom4.png');
  dress1Zoom5 = loadImage('dress1Zoom5.png');
  //dress2
  dress2 = loadImage('dress2.png');
  dress2Zoom1 = loadImage('dress2Zoom1.png');
  dress2Zoom2 = loadImage('dress2Zoom2.png');
  dress2Zoom3 = loadImage('dress2Zoom3.png');
  dress2Zoom4 = loadImage('dress2Zoom4.png');
  //dress3
  dress3 = loadImage('dress3.png');
  dress3Zoom1 = loadImage('dress3Zoom1.png');
  dress3Zoom2 = loadImage('dress3Zoom2.png');
  dress3Zoom3 = loadImage('dress3Zoom3.png');
  //dress4
  dress4 = loadImage('dress4.png');
  dress4Zoom1 = loadImage('dress4Zoom1.png');
  dress4Zoom2 = loadImage('dress4Zoom2.png');
  dress4Zoom3 = loadImage('dress4Zoom3.png');
  dress4Zoom4 = loadImage('dress4Zoom4.png');
  //dress5
  dress5 = loadImage('dress5.png');
  dress5Zoom1 = loadImage('dress5Zoom1.png');
  dress5Zoom2 = loadImage('dress5Zoom2.png');
  dress5Zoom3 = loadImage('dress5Zoom3.png');
  dress5Zoom4 = loadImage('dress5Zoom4.png');
  dress5Zoom5 = loadImage('dress5Zoom5.png');
  //dress6
  dress6 = loadImage('dress6.png');
  dress6Zoom1 = loadImage('dress6Zoom1.png');
  dress6Zoom2 = loadImage('dress6Zoom2.png');
  dress6Zoom3 = loadImage('dress6Zoom3.png');
  dress6Zoom4 = loadImage('dress6Zoom4.png');
  
}
function setup() {
  createCanvas(720, 400);
  textSize(titleSize);
  textAlign(CENTER, CENTER);
   bgsound.loop();
  
}
function draw() {
  
  if (scene === "main") {
    drawMainScene();
  } else if (scene === "exhibit") {
    drawExhibitScene();
  } else if (scene.startsWith("zoomedInDress")) {
    drawZoomedScene();
  } bgsound.play();
  
}
function drawMainScene() {
  background(bg);
  noStroke();
  fill(0);
  textSize(titleSize);
  text("THE MET", width / 3 + 120, height / 3 - 80);
  textSize(subtitleSize2);
  text("THE COSTUME INSTITUTE", width / 2, height / 2 - 110);
  fill(0);
  textSize(subtitleSize);
  text("Touch the start button to begin!", width / 2, height / 2 - 80);
  // Start Button
  fill(255);
  rect(width / 2 - 50, height / 2 + 50, 100, 40, 10);
  fill(0);
  textSize(16);
  text("Start", width / 2, height / 2 + 70);
}
function drawExhibitScene() {
  background(bg2); // Use the fullscreen image as the background for the exhibit
  // Back Button, only show if we're not in the initial exhibit scene
  fill(255); // White color
  rect(20, 20, 60, 30, 10);
  fill(0); // Black color
  textSize(16);
  text("Back", 50, 35);
}
function drawZoomedScene() {
  let zoomedImage;
  switch (scene) {
    case "zoomedInDress1_1":
      zoomedImage = dress1Zoom1;
      break;
    case "zoomedInDress1_2":
      zoomedImage = dress1Zoom2;
      break;
    case "zoomedInDress1_3":
      zoomedImage = dress1Zoom3;
      break;
    case "zoomedInDress1_4":
      zoomedImage = dress1Zoom4;
      break;
    case "zoomedInDress1_5":
      zoomedImage = dress1Zoom5;
      break;
    case "zoomedInDress2_1":
      zoomedImage = dress2Zoom1;
      break;
    case "zoomedInDress2_2":
      zoomedImage = dress2Zoom2;
      break;
    case "zoomedInDress2_3":
      zoomedImage = dress2Zoom3;
      break;
    case "zoomedInDress2_4":
      zoomedImage = dress2Zoom4;
      break;
    case "zoomedInDress3_1":
      zoomedImage = dress3Zoom1;
      break;
    case "zoomedInDress3_2":
      zoomedImage = dress3Zoom2;
      break;
    case "zoomedInDress3_3":
      zoomedImage = dress3Zoom3;
      break;
    case "zoomedInDress4_1":
      zoomedImage = dress4Zoom1;
      break;
    case "zoomedInDress4_2":
      zoomedImage = dress4Zoom2;
      break;
    case "zoomedInDress4_3":
      zoomedImage = dress4Zoom3;
      break;
    case "zoomedInDress4_4":
      zoomedImage = dress4Zoom4;
      break;
    case "zoomedInDress5_1":
      zoomedImage = dress5Zoom1;
      break;
    case "zoomedInDress5_2":
      zoomedImage = dress5Zoom2;
      break;
    case "zoomedInDress5_3":
      zoomedImage = dress5Zoom3;
      break;
    case "zoomedInDress5_4":
      zoomedImage = dress5Zoom4;
      break;
    case "zoomedInDress5_5":
      zoomedImage = dress5Zoom5;
      break; 
    case "zoomedInDress6_1":
      zoomedImage = dress6Zoom1;
      break;
    case "zoomedInDress6_2":
      zoomedImage = dress6Zoom2;
      break;
    case "zoomedInDress6_3":
      zoomedImage = dress6Zoom3;
      break;
    case "zoomedInDress6_4":
      zoomedImage = dress6Zoom4;
      break;  
  }
  background(zoomedImage); // Display the zoomed-in image on full canvas
  // Back Button
  fill(255); // White color
  rect(20, 20, 60, 30, 10);
  fill(0); // Black color
  textSize(16);
  text("Back", 50, 35);
}
function mouseClicked() {
   if (!bgsound.isPlaying()) { // Check if the sound is not already playing
    bgsound.loop(); // Start playing the sound
  }
 
  if (scene === "main") {
    // If the Start button is clicked, change to the exhibit scene
    if (mouseX > width / 2 - 50 && mouseX < width / 2 + 50 && mouseY > height / 2 + 50 && mouseY < height / 2 + 90) {
      scene = "exhibit";
      
    }
  } else if (scene === "exhibit") {
    // Check if the click is within the back button's coordinates
    if (mouseX > 20 && mouseX < 80 && mouseY > 20 && mouseY < 50) {
      scene = "main";
     
    }
    // Check if the click is within Dress1's designated area
    else if (mouseX > 148 && mouseX < 228 && mouseY > 43 && mouseY < 149) {
      scene = "zoomedInDress1_1";
     
    }
    // Check if the click is within Dress2's designated area
    else if (mouseX > 325 && mouseX < 405 && mouseY > 44 && mouseY < 149) {
      scene = "zoomedInDress2_1";
      
    }
    //  Check if the click is within Dress3's designated area
    else if (mouseX > 450 && mouseX < 580 && mouseY > 44 && mouseY < 149) {
      scene = "zoomedInDress3_1";
      
    }
    //  Check if the click is within Dress4's designated area
    else if (mouseX > 148 && mouseX < 229 && mouseY > 203 && mouseY < 308) {
      scene = "zoomedInDress4_1";
      
    }
    //  Check if the click is within Dress5's designated area
    else if (mouseX > 323 && mouseX < 406 && mouseY > 201 && mouseY < 309) {
      scene = "zoomedInDress5_1";
      
    }
    //  Check if the click is within Dress6's designated area
    else if (mouseX > 450 && mouseX < 580 && mouseY > 201 && mouseY < 307) {
      scene = "zoomedInDress6_1";
      
 
    }
    
  } else if (scene.startsWith("zoomedInDress")) {
    // If the Back button is clicked in a zoomed-in scene, go back to the exhibit
    if (mouseX > 20 && mouseX < 80 && mouseY > 20 && mouseY < 50) {
      scene = "exhibit";
  
    } else {
      // Cycle through the zoomed-in images
      let parts = scene.split('_');
      let dressNum = parts[0].replace("zoomedInDress", "");
      let zoomLevel = parseInt(parts[1]);
      zoomLevel = zoomLevel >= 4 ? 1 : zoomLevel + 1; // Loop back after the last image for dress1 and dress2
      if(dressNum === "3" && zoomLevel > 3) zoomLevel = 1; // Since dress3 has only 3 zoom levels
      scene = `zoomedInDress${dressNum}_${zoomLevel}`;
    }
  }
}

 

 

Catch The Dates

Why not use the “Fruit Ninja” game, which I spent years of my childhood playing, serve as the inspiration for this minigame? With little consideration, “Catch the dates” turned into a mini game.

Dates and explosives will begin to fall from the NYUAD  palm trees that serve as the game’s backdrop as soon as you begin playing. The objective is to avoid receiving a score of zero or below. The player can score two points on dates, but their score will be reduced by three if they catch the bomb in the basket.

One thing that I’m most proud of is the game itself as a whole. Being an extremely indecisive person, it was hard for me to just stick with one idea. However, with careful consideration I came to being excited to code this small game itself while including a part of my childhood in it while embedding culture and symbolizing the UAE’S culture and heritage by using dates instead of fruits.

One challenge I have encountered when coding this midterm, was the basket leaving a trace at the bottom as well as the background being not too flexible with height and fit on the screen.

However, I solved that issue with adjusting the image width and height in order to fit perfectly. 

In conclusion, this midterm really made me step out of my comfort zone. In reality I am not too proud of the work that I achieve nor do I like to share it, however, with this course, I was able to achieve that and step out of my comfort zone a little bit and be proud of the work I have accomplished especially when creating this little game. 

// Declare variables
let titleSize = 35
let bg;
let basketImg;
let dates = [];
let bombs = [];
let score = 0;
let gameStarted = false;
let gameOver = false;
let basket;
let basketScale = 0.5; // Adjust basket scale
let basketSpeed = 7;
let nextDateFrame = 0; // Frame count for next date
let nextBombFrame = 0; // Frame count for next bomb
let scoreBoxWidth = 200; // Width of score box
let scoreBoxHeight = 50; // Height of score box

// Preload images
function preload() {
  bg = loadImage('palm trees.png');
  basketImg = loadImage('basket.png');
}

// Setup canvas and game state
function setup() {
  createCanvas(800, 800); // Larger canvas size
  textAlign(RIGHT, TOP);
  textSize(24);
  resetGame();
}

// Reset game state
function resetGame() {
  score = 0;
  gameStarted = false;
  gameOver = false;
  dates = [];
  bombs = [];
  basket = createVector(width / 2, height - basketImg.height * basketScale); // Adjusted basket size
  nextDateFrame = 0; // Reset frame count for next date
  nextBombFrame = 0; // Reset frame count for next bomb
}
// Main game loop
function draw() {
  // Display background
  image(bg, 0, 0,width *1.5 , height*1.5);

  // Display instructions if game not started
  if (!gameStarted) {
    displayInstructions();
    return;
  }

  // Display game over screen if game is over
  if (gameOver) {
    displayGameOver();
    return;
  }
  
  // Display basket
  image(basketImg, basket.x, basket.y, basketImg.width * basketScale, basketImg.height * basketScale); // Adjusted basket size

  // Move basket continuously when arrow keys are held down
  if (keyIsDown(LEFT_ARROW) && basket.x > 0) {
    basket.x -= basketSpeed;
  }
  if (keyIsDown(RIGHT_ARROW) && basket.x < width - basketImg.width * basketScale) {
    basket.x += basketSpeed;
  }
  
  // Move and display dates
  if (frameCount >= nextDateFrame) {
    let date = new FallingObject('dates');
    dates.push(date);
    nextDateFrame = frameCount + int(random(120, 240)); // Randomize next date appearance
  }
  for (let date of dates) {
    date.move();
    date.display();
    if (date.checkCollision(basket.x, basket.y, basketImg.width * basketScale, basketImg.height * basketScale)) {
      date.reset();
      score += 2;
    }
  }

  // Move and display bombs
  if (frameCount >= nextBombFrame) {
    let bomb = new FallingObject('bomb');
    bombs.push(bomb);
    nextBombFrame = frameCount + int(random(120, 240)); // Randomize next bomb appearance
  }
  for (let bomb of bombs) {
    bomb.move();
    bomb.display();
    if (bomb.checkCollision(basket.x, basket.y, basketImg.width * basketScale, basketImg.height * basketScale)) {
      bomb.reset();
      score -= 3;
      if (score <= 0) {
        score = 0;
        gameOver = true;
      }
    }
  }

  // Display score
  fill(0, 0, 255);
  rect(width - scoreBoxWidth, 0, scoreBoxWidth, scoreBoxHeight);
  fill(255);
  textAlign(RIGHT, TOP);
  text(`Score: ${score}`, width - 10, 10);
}


// Handle key presses
function keyPressed() {
  // Start game on spacebar press
  if (!gameStarted && key === ' ') {
    gameStarted = true;
  }

  // Reset game on 'r' press
  if (gameOver && key === 'r') {
    resetGame();
  }
}

// Display game instructions
function displayInstructions() {
  fill(255);
  stroke(2);
  strokeWeight(5);
  textSize(titleSize);
  text("CATCH THE DATES", width/2 +190, height/2 -150);
  fill(255);
  text('Instructions:',width / 2 +120 , height / 2 -90);
  text('Use arrow keys to move the basket',width / 2 + 300 , height / 2 -40);
  text('Catch dates to score points',width / 2 + 250 , height / 2);
  text('Avoid bombs',width / 2 + 120 , height / 2 + 40);
  text('Press space to start',width / 2 + 180 , height / 2 + 80);
}

// Display game over screen
function displayGameOver() {
  fill(255, 0, 0);
  triangle(width / 2, height / 2 - 100, width / 2 - 150, height / 2 + 150, width / 2 + 150, height / 2 + 150);
  fill(255);
  textAlign(CENTER, CENTER);
  textSize(25);
  stroke(1);
  strokeWeight(3);
  text('Game Over!', width / 2, height / 2 + 30);
  text('Press "r" to play again', width / 2, height / 2 +  118);
}

// FallingObject class
class FallingObject {
  constructor(type) {
    this.x = random(width);
    this.y = -50;
    this.speed = random(2.5, 3.5); // Adjusted speed
    this.type = type;
    this.image = loadImage(`${type}.png`);
  }

  // Move the falling object
  move() {
    this.y += this.speed;
    if (this.y > height) {
      this.reset();
    }
  }

  // Display the falling object
  display() {
    image(this.image, this.x, this.y, 50, 50);
  }

  // Reset the falling object's position
  reset() {
    this.x = random(width);
    this.y = -50;
    this.speed = random(2.5, 3.5); // Adjusted speed
  }

  // Check for collision with another object
  checkCollision(objX, objY, objWidth, objHeight) {
    return this.x > objX && this.x < objX + objWidth && this.y > objY && this.y < objY + objHeight;
  }
}

 

(Instructions : If you have a guitar, you can plug in your guitar and play the game. However, without a guitar, you can play with arrow keys. More instructions inside the game.)

Pi’s P5 Midterm : https://editor.p5js.org/Pi-314159/full/FCZ-y0kOM
If something goes wrong with the link above, you can also watch the full gameplay below.

Overall Concept

The Deal is a highly cinematic cyberpunk narrative I am submitting as my midterm project.

Meet Pi, the devil’s engineer, in a world where technology rules and danger lurks in every shadow. After receiving a mysterious call from a woman offering a lucrative but risky job., he’s plunged into a world of corporate espionage over brain-controlled robots.

The inspiration for this comes from my daily life, where I have to deal with tech clients, and … yes I actually do Brain controlled robots in my lab, you scan the brain waves through electroencephalogram (EEG) and use that feed that signal through a neural network to translate to robot movements. It’s in very early stage, but it is moving.

How the project works

The game is supposed to be played with the guitar. In fact, it is to be used not as a game, but as a storytelling tool by a guitar playing orator to a live audience. Below is the demonstration of the game.

A number of tools and a not so complicated workflow is used to create this game in a week. The full workflow is illustrated below.

For a midterm project, the project is rather huge. I have 16 individual Javascript Modules working together to run the player, cinematics, background music, enemies, rendering and parallax movements. Everything is refactered into classes for optimization and code cleanliness. For example, my Player class begins as follows.

class Player {
  constructor(scene, x, y, texture, frame) {
    // Debug mode flag
    this.debugMode = false;
    this.debugText = null; // For storing the debug text object
    this.scene = scene;
    this.sprite = scene.matter.add.sprite(x, y, texture, frame);
    this.sprite.setDepth(100);
    // Ensure sprite is dynamic (not static)
    this.sprite.setStatic(false);

    // Setup animations for the player
    this.setupAnimations();

    // Initially play the idle animation
    this.sprite.anims.play("idle", true);

    // Create keyboard controls
    this.cursors = scene.input.keyboard.createCursorKeys();

    // Player physics properties
    this.sprite.setFixedRotation(); // Prevents player from rotating

    // Modify the update method to broadcast the player's speed
    this.speed = 0;

    this.isJumpingForward = false; // New flag for jump_forward state

    // Walking and running
    this.isWalking = false;
    this.walkStartTime = 0;
    this.runThreshold = 1000; // milliseconds threshold for running
    // Debugging - Enable this to see physics bodies
  }

  //Adjust Colors
  // Set the tint of the player's sprite
  setTint(color) {
    this.sprite.setTint(color);
  }

What I am proud of

I am super proud that I was able to use a lot of my skills in making this.

For almost all the game resources, including the soundtrack, I either created it myself or generated it through AI, then plugged into the rest of the workflow for final processing. Here, in the image above, you can see me rigging and animating a robot sprite in Spine2D, where the original 2D art is generated in Midjourney.

Problems I ran Into

During the testing, everything went well. But during the live performance, my character got confused between moving left and moving right. When I played guitar notes for the character to move left, it moved right instead . This is because I declared the key mappings from the fft (Fast Fourier Transform) signal as frequency bands, which maps to right and left arrow keys accordingly.

In theory, it should work, but in practice, as in diagram below, once the left key mapping stops, the signal inadvertently passes through the right key mapping region (due to not having an exact vertical slope), causing unintentional right key presses.

I had to resort to the fft-> keymapping workflow since I cannot directly access the javascript runtime through my external C++ fft program. However, had the game been implemented as a native game (i.e. using Unity,Godot), then I can directly send unique UDP commands instead of keymapping regions. This would resolve the issue.

Rubric Checklist :

• Make an interactive artwork or game using everything you have learned so far (This is an interactive Game)
• Can have one or more users (A single player game, with the player acting as the storyteller to a crowd)
• Must include

At least one shape

The “BEGIN STORY” button is a shape, in order to fulfill this requirement. Everything else are images and sprites.

At least one image

We have a whole lot of images and Easter Eggs. The graphics are generated in Midjourney, and edited in Photoshop.

At least one sound

Pi composed the original soundtrack for the game. It is in A minor pentatonic for easy improvisation over it. In addition there are also loads of ambience sounds. 

For the prologue monologue, I used this : https://youtu.be/Y8w-2lzM-C4

At least one on-screen text

We got voice acting and subtitles.

Object Oriented Programming

Everything is a class. We have 18 Classes in total to handle many different things, from Cinematics to Data Preloader to Background Music Manager to Parallax Background Management. Below is the Cinematic implementation.

class Cinematic {
  constructor(scene, cinematicsData, player) {
    this.scene = scene;
    this.cinematicsData = cinematicsData;
    this.player = player; // Store the player reference
    this.currentCinematicIndex = 0;
    this.subtitleText = null;
    this.isCinematicPlaying = false;
    this.collidedObject = null;
    this.lastSpawnSide = "left"; // Track the last spawn side (left or right)
    // Game objects container
    this.gameObjects = this.scene.add.group();
    this.phonecallAudio = null; // Add this line
  }

  create() {
    // Create the text object for subtitles, but set it to invisible
    this.subtitleText = this.scene.add
      .text(this.scene.scale.width / 2, this.scene.scale.height * 0.5, "", {
        font: "30px Arial",
        fill: "#FFFFFF",
        align: "center",
      })
      .setOrigin(0.5, 0.5)
      .setDepth(10000)
      .setVisible(false);

    // Setup collision events
    this.setupCollisionEvents();
  }

  executeAction(action) {
    switch (action) {
      case "phonecall":
        console.log("Executing phone call action");
        // Play the 'nokia' audio in a loop with a specified volume
        if (!this.phonecallAudio) {
          this.phonecallAudio = this.scene.sound.add("nokia", { loop: true });
          this.phonecallAudio.play({ volume: 0.05 });

 

• The experience must start with a screen giving instructions and wait for user input (button / key / mouse / etc.) before starting (The main menu waits for the user click)
• After the experience is completed, there must be a way to start a new session (without restarting the sketch) (After the story, it goes back to main menu)

Interaction design (is clear to user what they are controlling, discoverability, use of signifiers, use of cognitive mapping, etc.)

(We have a super simple Keyboard or Guitar input instructions)

 

 

For the midterm I wanted to do some kind of video game. I felt that it would be more fun and ironically more interactive than an interactive artwork. Originally I was stuck on the idea of Russian Roulette but that lead me to the idea of a Mexican Standoff. The premise of the game is that two players are facing each other and after a countdown they each have to shoot before the other player does. Furthermore, I wanted to prevent people from just holding down the shoot key so I made it so that if you shoot too early you fail.

I wanted the player to first see a main menu before they start the game. I was inspired by some of the previous works of students on their midterm and wanted something similar but also unique to my game. However, before I could start making it I had to find out how to do so. In class, I don’t remember which one exactly since it was a while ago now, I asked Pi about something to do with different pages/menus and he told me about a scene management class. That is a function or part of the code dedicated towards picking different menus. This ingenious solution was what I needed, and for that reason I put Pi in the credits menu for my game. Furthermore, Pi told me about game state machines and more about states in general in games, that concept helped me a lot during the creation of my project. I was proud of the code I made for the scene management class but not as proud as the code I made for the gameplay. A lot of work went into making the actual game itself and I wish I could show more of what I did without it being too boring but in any case; below is what I am most happy with.

function countdownFunctionality() {
  // frame rate is 60
    gameStarted = true;
    let x = 1;
    let xSecond = 60 * x; 
  
    let firstSecond =   initialFrameCount + xSecond * 1;
    let secondSecond =  initialFrameCount + xSecond * 2;
    let thirdSecond =   initialFrameCount + xSecond * (3+randomNumber)
  
    if(!(tooSoon1 || tooSoon2)) {
        // TODO sounds
      if(frameCount < firstSecond) {
        countDownDraw(3);
      }
  
      if(frameCount > firstSecond && frameCount < secondSecond) {
        countDownDraw(2);
      }
  
      if(frameCount > secondSecond && frameCount < thirdSecond) {
        countDownDraw(1);
      }
  
      if(frameCount > thirdSecond) {
        countDownDraw(4);
        player1.update();
        player2.update();
        fire = true;
      }
    }
  
  
  }

Above is the code for the countdown. I needed something that would (obviously) act like a normal countdown, going from 3 to 1 then to the words fire, but I also needed to have the program be able to detect a player firing at any point during the countdown. This meant I could not stop the program completely but still needed a way to add a delay. I chose to do this through essentially counting frames. Where when the function is called the frameCount at the time is kept and then the 1st, 2nd, 3rd, and final seconds are kept as a number which the frameCount has to be greater than for the appropriate icon to show. Then at the end of the code you can see the line “fire = true”. Fire is a boolean variable that was initialized outside the function and it is used to keep track of the states of the game, like Pi taught me 🙂 When it is true the players are allowed to shoot.

There are also a lot of general things about my code that I’m happy about. Primarily the way that I organized the code. I created a separate javascript file for each menu as well as the scene management class. This made things easier to navigate. Furthermore, going into this project I decided to use visual studio code instead of the website editor, I wasn’t sure how to at first but after some figuring things out I learned I had to use extensions, I found the specific extensions then spent a while learning how to use the extensions in the first place.

While the program works now, there are A LOT of things I would change. I added a lot of files thinking and sometimes trying to add them but eventually giving up because I ran into some kind of bug. If you end up going through the files you will notice this, and if you go through the comments you will notice that I wanted to add some extra features. I originally wanted to add a best of five game-mode but because of time constraints I had to give up on it for this project but maybe next time. Another thing I wish I could get to work, and there is still time is music that plays specific to the play menu and not just the main menu music which plays all the time. I haven’t been able to figure it out just yet because I was experiencing some bugs but I unfortunately cannot put aside time to do it at the moment, perhaps in the future, maybe even before class. Anyways, that’s all I have to say about this project. I’m happy with it overall, it is the most effort I’ve put into a coding project and the most lines of code that I’ve ever written, and I think it shows. I hope people have fun playing it.

P.S. The credits to all the people that have helped me and all of the people that made the sprites, images, etc. are in the credits section which you can find from the main menu.

 

 

6th March 2024:
Fixed a bug where if player 2 shoots too soon then player 1 does as well it shows that player 1 shot too soon and not player 2.