THE GUN GAME
In this project I wanted to explore the possibilities of p5.js to create something that would pay homage to one of my favorite childhood games, The Gun Game. I believe this game is one of the best remedy's for boredom and its very easy to learn.

How Gun Game is Played
The Gun Game is a wild west style shootout that requires strategy and luck to survive. The structure is very similar to rock, paper, scissors where each round the players have three options to choose from. Where is differs from rock paper scissors is that not every option is created equal.

You have reload, shoot and block. Reload gives you one bullet but if your opponent shoots when you reload you lose. If you block when your opponent shoots, it's a draw but your opponent loses one bullet. If you both shoot it is also a draw and both of you lose a bullet. Its very simple but the choices are much more situational than rock, paper, scissors so there is more strategy involved. 
The Process
Even though it’s a very simple game on the surface I prioritized the functionality because this is my first time coding a game. It was important to me that the game worked to give it the same amount of excitement and suspense that I experienced when I was young. 
The first thing I did was create a wire frame that took you through all the screens that the user would experience as well as a breakdown of the combination of moves. 
It was here that I decided to make the game single player with an AI being the players opponent. Developing the game like this initially allowed me to play test the game without having to constantly have someone play with me every time I tweaked the code. Also this allowed me to focus on the controls of just one player and I knew it would be easier to add two player mode down the line once after I built the framework.
The Code
After I broke down the specifics of the game into bite sized chunks it was time to start turning those chunks into code. Using the p5.js editor I started defining key variables such as ammo, playerChoice, robotChoice, and gameState. These variables are crucial to the code because they serve as the foundation of my Boolean statements which are statements that determine whether something is true or false. I then created the player controls using a keyPressed function which would translate the players input into data that p5.js can use to decipher the playerChoice for each round. I attached the AI to the players keyPressed function so every time the player would choose whether to block shoot or reload the AI select a robotChoice as well. The way this works is the AI would select a random number and that number would translate into one of the three options the robot would have. Then I applied situational rules to the random number generator that would prohibit the AI from making choices that weren't logical. For example if the robot has zero ammo the robot cannot shoot and must choose between block and reload. Basically once the player and AI have made a choice for that round the playerChoice, and robotChoice are run through more Boolean statements to determine win, loss, or draw and how much ammo each opponent has. 
Here's a short video where I break down some of the code and how the game works.
The Aesthetics
After I got the code to work I had a much better idea on how the game graphics should actually look. I made a privative storyboard that expresses the overall layout and some of the character design as well. After I made the story board I decided that I wouldn't incorporate the start screens just yet because I felt like they were interrupting the flow of the game. The game doesn't really need any introduction screens until I incorporate the  2-player option and possibly character selection and game mode options. 
The player is represented by the cowboy on the left to emphasize the wild west theme I wanted to implement. I felt the best way to represent the AI was with a robot because as the player you are fighting the computer. After getting a grasp on how I wanted the game to look I got to work on refining the visual elements so they give off my intended aesthetic.
I made the design of the game look pixelated because I wanted it to feel retro which refers back to the nostalgia I associate with the game. Additionally the pixel game animation style is typically very choppy so I could get away with only drawing 6 different poses for each character and still have the animations feel polished. When it came to animating the frames I could use the two idle poses on loop and sprinkle in the action poses once the JavaScript receives the player and robot inputs. 
I then designed the control signs and background that framed the characters. These elements remain still throughout the game so I only had to draw them once. I made sure that the animations were synced up with the player inputs before I added music and the sound effects that would play in sync with the action poses. 
The Conclusion
The project speaks for itself. It may not be the up to par with the latest and greatest FPS games out there but its a good way to kill 15 minutes when you're bored. It really feels like the childhood game that I have grown so fond of so I am happy with it. I am also proud of the progress I made as a designer and coder to produce something unique. For the future I will continue to work some of the bugs, add multiplayer, and maybe add new player actions that could enhance the gameplay. 
Lastly, I would like to give credit to my creative coding professor, Jenny Kowalski. She played a vital role in helping me develop my coding skills and without her guidance this project wouldn't have been possible. 
The Gun Game
Published:

The Gun Game

Published: