Interactive Game Poster

This is my interactive game poster based off the game Monaco: What's Yours is Mine designed by Andy Schatz. The game is a stealth action game where the player has to plan out and complete heists. I wanted to evoke this gameplay with the interaction in this poster so I decided to create a safe cracking minigame. I started off by using photoshop to create the safe dial asset and then moved over to p5js to figure out the logic and code to make it work. It was a little difficult to get this to work I had to deal with the way p5js handles rotations. I decided to make the lock dial controlled by the scrolling the mouse wheel (or scrolling on a trackpad) since that gave the tactile feeling I was going for. Another challenge was accurately tracking the current position of the dial, since there are many different corner cases that needed to be accounted for.  I also decided to add a countdown timer to give the experience some added tension. After I got the rotation working properly, I turned to designing the sound effects. The sound effects for this were key as they are the only feedback the player gets when trying to crack the safe. I searched through a number of YouTube videos and online sound-effect websites until I found sound effects that worked (some editing via Audacity was also needed). Once that was completed I focused on the background image and visual design of the poster. The main shape seen on the poster is the traced outline of the city of Monaco's coastline (including harbors and piers). I also decided to play into the theme of Monaco and adding a pattern of casino dice to the poster. These dice are drawn entirely with p5js and the initial pattern of pips will be different each time the poster is loaded. When the timer in the lock dial gets to or below 6 seconds all the dice will count down with the timer. I also decide to add some background music to go along with the jazzy casino vibes.

Walk through:

Rotate the lock dial by using the scroll wheel or by scrolling with the trackpad. There are 3 numbers in the combination and once you have found one of them by carefully listening to the difference in sound effects you have to pause and hold on that number for a moment before moving onto the next one. Find all 3 parts of the combo before time runs out to win or be put behind bars.

Some parts of the frame may get cut off depending on the size of your browser top-bar so I recommend hitting F11 (or whatever full screens you window) while the game is initially loading.

Credits:

Safe Dial sound effect: https://youtu.be/QRuSCmic5WE

Tumbler Picked sound effect: https://www.youtube.com/watch?v=KMAo6dFU5Ro

"Clutch" by The Seatbelts: https://youtu.be/ZAvDfLF2kFI