[et_pb_section fb_built=”1″ fullwidth=”on” _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_fullwidth_image src=”http:\/\/henryoatts.com\/wp-content\/uploads\/2022\/03\/Behance-main.jpg” title_text=”Behance-main” _builder_version=”4.14.7″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][\/et_pb_fullwidth_image][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_video src=”https:\/\/vimeo.com\/692612883″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_video][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_button button_url=”https:\/\/editor.p5js.org\/henryoatts\/full\/5ZbwS_R82″ button_text=”Play The Gun Game Here!” button_alignment=”center” _builder_version=”4.14.7″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” custom_button=”on” button_text_color=”#ccf381″ button_bg_color=”#4831d4″ button_bg_enable_color=”on” button_border_width=”0px” sticky_enabled=”0″ background_layout=”dark” module_class=”nimbold” button_text_size=”23px” url_new_window=”on”][\/et_pb_button][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.14.7″ _module_preset=”default”][et_pb_column _builder_version=”4.14.7″ _module_preset=”default” type=”4_4″][et_pb_divider _builder_version=”4.14.7″ _module_preset=”default” color=”#4831d4″ divider_weight=”3px” hover_enabled=”0″ sticky_enabled=”0″][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.14.7″ _module_preset=”default” header_font=”|700|||||||” header_font_size=”55px” hover_enabled=”0″ global_colors_info=”{}” module_class=”nimbold” header_text_color=”#4831d4″ sticky_enabled=”0″]<\/p>\n

The Gun Game and how to play<\/h1>\n

[\/et_pb_text][et_pb_text _builder_version=”4.14.7″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” text_text_color=”#000000″ module_class=”nimbreg” sticky_enabled=”0″]<\/p>\n

For this project I chose to take a pantomime game I used to play when I was a kid and bring it to life through code and animation.<\/p>\n

The Gun Game plays much like rock paper scissors but with some key differences. Each round you and a friend will decide simultaneously between three choices, reload, block, or shoot. Reload will give you one bullet. Shooting will remove one bullet, and blocking will protect you from an incomming bullet.<\/p>\n

If both players shoot both lose a bullet and you move on to the next round. Both players will start with zero bullets and have a maximum of six bullets.\u00a0 To win the game you must shoot your opponent while their reloading.<\/p>\n

 <\/p>\n

[\/et_pb_text][et_pb_text _builder_version=”4.14.7″ _module_preset=”default” text_line_height=”1em” hover_enabled=”0″ global_colors_info=”{}” module_class=”nimbold” text_text_color=”#4831d4″ sticky_enabled=”0″]<\/p>\n

Student Work<\/strong><\/p>\n

Temple University<\/strong><\/p>\n

Instructor: Jenny Kowalski<\/strong><\/p>\n

Tools: JavaScript, HTML, CSS, Photoshop<\/strong><\/p>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”http:\/\/henryoatts.com\/wp-content\/uploads\/2022\/03\/cowboygif.gif” title_text=”cowboygif” align=”right” _builder_version=”4.14.7″ _module_preset=”default” width=”74.3%” custom_padding=”|||0px||” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.14.7″ _module_preset=”default”][et_pb_column _builder_version=”4.14.7″ _module_preset=”default” type=”4_4″][et_pb_divider _builder_version=”4.14.7″ _module_preset=”default” color=”#4831d4″ divider_weight=”3px” hover_enabled=”0″ sticky_enabled=”0″][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”http:\/\/henryoatts.com\/wp-content\/uploads\/2022\/03\/gungame-storyboard.jpg” title_text=”gungame-storyboard” _builder_version=”4.14.7″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” show_in_lightbox=”on” sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

The wild west theme was inspired by the way me and my friends would act when we played the game. We would hold our hands on our hip and draw our finger guns as if we were real cowboys shooting pistols. For that reason it only made sense to make the playable character a cowboy. The opponent is depicted as a robot because they are an NPC and their moves are entirely dictated by the code being run in the computer.<\/p>\n

The aesthetics and animations were driven by an 8-bit style reminiscent of old arcade games. Theres a reason why this style was so common at one point and its because of how easy it is to code.<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.14.7″ _module_preset=”default”][et_pb_column _builder_version=”4.14.7″ _module_preset=”default” type=”4_4″][et_pb_divider _builder_version=”4.14.7″ _module_preset=”default” color=”#4831d4″ divider_weight=”3px” hover_enabled=”0″ sticky_enabled=”0″][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.14.7″ _module_preset=”default” header_font=”|700|||||||” header_font_size=”55px” hover_enabled=”0″ global_colors_info=”{}” module_class=”nimbold” header_text_color=”#4831d4″ sticky_enabled=”0″]<\/p>\n

The Code<\/h1>\n

[\/et_pb_text][et_pb_text _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

This was my first time coding in JavaScript so it is fair to say initially I didint know where to start. The functionality of the game was important to me because I really wanted it to feel like you were actually playing the game.<\/p>\n

So to start out I made a chart that mapped out every input and possible outcome. That way I could reference the chart as I was trying different ideas and laying out the foundation making sure that every moving part was accounted for.<\/p>\n

After the trial and error phase I found what worked best for processing the inputs and having them effect the outcome of the game were boolean variables. Booleans are a binary variable that basically tell if something is true or false when the code runs. The boolean would then be followed by a command which are known as If Then Statements. A simplified example of this would be, if (the cowboy chooses shoot) then (play the shoot animation).\u00a0<\/p>\n

This process had a few extra steps for the robot because I had to have the script generate its inputs. I did that by using a random number generator that would determine its choice and then using more booleans to assign rules for specific situations so the robot would behave logically. This allowed for the opponent in the game to be unpredictable at times but also stop the AI from making decisions that wouldn’t make any sense, like shooting when they have no ammo.\u00a0<\/p>\n

 <\/p>\n

[\/et_pb_text][et_pb_button button_url=”https:\/\/editor.p5js.org\/henryoatts\/sketches\/5ZbwS_R82″ button_text=”See Code Here” button_alignment=”center” _builder_version=”4.14.7″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” custom_button=”on” button_text_color=”#ccf381″ button_bg_color=”#4831d4″ button_bg_enable_color=”on” button_border_width=”0px” sticky_enabled=”0″ background_layout=”dark” module_class=”nimbold” button_text_size=”23px” url_new_window=”on”][\/et_pb_button][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.14.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”http:\/\/henryoatts.com\/wp-content\/uploads\/2022\/03\/GG-codechart.jpg” title_text=”GG-codechart” force_fullwidth=”on” _builder_version=”4.14.7″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″ show_in_lightbox=”on”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

The Gun Game and how to playFor this project I chose to take a pantomime game I used to play when I was a kid and bring it to life through code and animation. The Gun Game plays much like rock paper scissors but with some key differences. Each round you and a friend will […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":46,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","om_disable_all_campaigns":false,"WB4WB4WP_MODE":"","WB4WP_PAGE_SCRIPTS":"","WB4WP_PAGE_STYLES":"","WB4WP_PAGE_FONTS":"","WB4WP_PAGE_HEADER":"","WB4WP_PAGE_FOOTER":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"yoast_head":"\n