Midterm Project Zayed Alsuwaidi

To bring the initial concept of Russian Roulette to life, I decided to use generative AI for the images. I faced several issues sketching the artwork myself on my iPad, and I wanted a surreal realism and impact from the art. The images are therefore generated by DALL-E.

Here are the Game Mechanics:
Players

• Player: Player starts with 100 health, the bar is at the top-left (50, 50).
• Opponent: Also 100 health, bar is at top-right (650, 50).
• Health: Drops by 50 when hit. Game’s over if either of us hits 0.

Gun

• It’s a 6-shot revolver (shotsFired tracks how many times it’s fired).
• The chamber’s random—loaded or empty (isLoaded)—and resets on reload.
• Every shot counts toward the 6, whether it’s a bang or a click.

States

• “between”: Whether the choice is to shoot (S) or pass (N).
• “playerTurn”: Player shoots, showing playergun.gif.
• “opponentTurn”: Person shoots, showing persongun.gif.
• “reload”: After 6 shots, we reload, and they shoot at me!
• “gameOver”: One is down; hit R to restart.

My Journey Building It
I started with the basics—getting the images and health bars up. That was smooth, but then I hit a wall with sounds. I added gunshot.m4a for hits, and it worked sometimes, but other times—nothing. That was frustrating. Turns out, browsers block audio until you interact with the page, so I had to trigger it after a key press. Even then, emptyclick.m4a wouldn’t play right when the opponent fired an empty shot. I kept seeing “sound not loaded” in the console and realized the timing was off with setTimeout. I fixed it by storing the shot result in a variable and making sure the sound played every time—loaded or not. Adding the reload mechanic was tricky too; I wanted the opponent to shoot during it, but keeping the flow consistent took some trial and error.

Gameplay Flow

1. Start: Game kicks off in “between” with nogun.gif.
2. My Turn:
   • S: I shoot.
     • Loaded: gunshot.m4a, light flashes, opponent loses 50 health.
     • Empty: emptyclick.m4a, no damage.
   • N: Pass to the opponent.
3. Opponent’s Turn: They always shoot now (I made it consistent!).
   • Loaded: gunshot.m4a, light flashes, I lose 50 health.
   • Empty: emptyclick.m4a, no damage.
4. Reload: After 6 shots:
   • Switches to “reload”, shows nogun.gif.
   • Gun resets with a random chamber.
   • Opponent shoots at me:
     • Loaded: gunshot.m4a, light flash, I take damage.
     • Empty: emptyclick.m4a, I’m safe.
   • Back to “between”.
5. Game Over: When me or the opponent hits 0 health.
   • “Game Over! Press ‘R’ to restart” shows up, and R starts it over.

Controls

• S: I shoot.
• N: Pass to the opponent.
• R: Restart when it’s over.

Visuals

• Canvas: 800×600—big enough to see everything.
• Images: Centered at (400, 300), 300×300 pixels.
• Health Bars: Red base (100 wide), green shrinks as health drops.
• Light Effect: A cool yellow-white flash when a shot lands—fades out fast.
• Instructions: Text at the bottom tells me what’s up.

Audio

• Gunshot: gunshot.m4a for a hit—loud and punchy.
• Empty Click: emptyclick.m4a for a miss—subtle but tense.
• Volume: Set both to 0.5 so my ears don’t hate me.

Overcoming Challenges
The sounds were my biggest headache. At first, gunshot.m4a only played after I clicked something—browser rules, ugh. I fixed that by tying it to key presses. Then emptyclick.m4a kept skipping when the opponent shot an empty chamber. I dug into the code and saw the random shoot chance was messing with the timing. I simplified it—stored the shot result, made the opponent shoot every time, and checked isLoaded() right before playing the sound. Now it’s rock-solid.

this.state = "playerTurn";
    this.currentImg = playerGunImg;
    let shotFired = this.gun.shoot();
    if (shotFired) {
      if (gunshotSound.isLoaded()) {
        gunshotSound.play();
      }
      this.opponent.takeDamage();
      this.flashAlpha = 255;
    } else {
      if (emptyClickSound.isLoaded()) {
        emptyClickSound.play();
      }
    }
    setTimeout(() => this.checkReloadOrNext(), 1000);
  }

  opponentTurn() {
    this.state = "opponentTurn";

 to show how I handled the opponent’s turn.

Key Gameplay Highlight

• Reload Mechanic: The reload’s risky and cool—opponent gets a free shot!

 has the logic for resetting the gun and surviving that tense moment.

Technical Bits

• Classes:
  • Player: Tracks my health and draws the bar.
  • Gun: Manages the 6-shot limit and random chamber.
  • Game: Runs the show—states, visuals, all of it.
• p5.js Stuff:
  • preload(): Loads my assets.
  • setup(): Sets up the 800×600 canvas and sound volumes.
  • draw(): Keeps everything on screen.
  • keyPressed(): Listens for S, N, R.

Endgame
It’s over when me or the opponent’s health hits 0. I see “Game Over! Press ‘R’ to restart”, hit R, and it’s back to square one—health full, gun reset.

What’s Next?
Maybe I’ll add a manual reload key or a score counter. Also, I would re-design the game with different artwork to make it more immersive.