ProSlaps!
Process
ProSlaps! came about likely out of boredom. It was a mean to do something different, in addition to learning something new. I wanted to create a simple game as oppose to developing a website. I also wanted to expand my knowledge of VueJS.
This game would be a user playing against a computer. Eventually, I went with Paper, Rocks, Scissors, as the logic for the game seems pretty basic. Each player only has three choices. There would also only be three possible out comes to any match.
Throughout the development process, I wrote several game enhancements. This includes additional game choices, recording and resetting the game stats, as well as dynamic animation. ProSlaps! would also go from a single web page into a proper progressive web application.
I wanted to build the game using Bootstrap, while keeping a very minimal design. This meant using very little custom stylings, and next to no images, while relying predominantly on Bootstrap classes. Bootstrap is a framework I hadn’t worked with in a while, so I wanted to re-familiarize myself with it.
Development
Development begins by creating a new project within the Vue environment. That is to say, using Vue UI to initiate the projects foundation. ProSlaps! uses node-sass for the sass compiling, Babel for JavaScript compiling, and ESLint for its lovely code structure.
Coding starts with building a basic front-end: a game title, two hand icons, and a row of buttons. The buttons need to have functionality, so each button is assign a unique value. When the user selects a button, it will set a data variable to that value. Finally, the user icon watches the value on that variable. The image will change depending on what the current value is.
After the user makes a decision, the computer will need to make one as well. To do this, each hand is assign a number. When the user selects a gesture, a random number generator will run. Whichever number generates, the associate hand will be the computers choice.
The logic
What if the user picks Paper and the computer plays Spock? These actions will have no meaning unless there is logic behind them.
Conditional statements check and compare each and every player and computer gesture. Each possible outcome will fall into one of three categories: victories, draws, and defeats. Now if a user picks Paper and the computer plays Spock, a data variable gets the value of ‘User Wins’, and the message displays on the front-end.
This is great, but it’s also unpractical to expect the user to keep track of their own wins and loses. To keep a record of the game stats, the three categories have a variable with an initial value of zero. Depending on the outcome of a match, one of the three categories value will increase by one.
Animation
There’s logic, there’s functionality, and there’s enough static to cause every hair on your head to stand on its end. For that reason, having animation will add a bit of dynamism to the interface.
The hand icons can mimic a throwing motion with CSS animation. The animation however, needs the ability to pause after the user makes a selection. Each icon gets a special stopping class when the user picks a gesture, turning the animation off.
The original idea was after the user selects a gesture, the hands would throw twice, each with a random gesture. After the third motion, the animation would stop with the players choice. This idea was never implemented however, as the logic for this was never worked out.
Demonstration
While the game is idling, the player icons will repeatedly throw the same gesture. As a result, this will make the game seem dysfunctional. The logic of a random hand selector runs for both players while the game is inactive. This runs in sync with the throwing animation, and gives the illusion of players playing the game.
The demo and a match however, cannot run at the same time. So pressing a button and triggering a match will stop the demonstration. After the results of a match appear, the screen pauses a few moments, allowing the user to register the outcome. The demo animation then returns, adding back the dynamism.
Game Personality
With the general concepts of the game done, enhancements to the game can be made.
While the game is inactive, a message appears from the computer. There is CSS animation active on the ellipses of the text. The dialog changes depending on the players choice, and the outcome of the game.
Each unique outcome will display the same unique message. There was an idea to have multiple message written for each individual outcome. This idea fell through due to a lack of unique messages.
Information
I’ve include pop-up modals to assist the user in learning the rules of the game. They also provide background information, and show additional game stats.
There is also an option that will reset the users stats. Confirming the reset will close all modal windows and set the necessary data variables back to zero.
Accessibility
Another reason for developing ProSlaps! is to learn more about applying proper accessibility to web pages.
Users will have the ability to tab through the game buttons and links in the application. When a user opens up a pop-up modal, the tab index will jump immediately to the close button of the window.
Buttons are large and spaced out adequately. The contrast ratio between the background and foreground colours are sufficiently different. There is also text for screen readers, explaining what the user and computer plays.
Performance
After building the game, I ran it through Chrome’s auditing generator to see how well it performs. After reading the results, I began looking at what I could do to improve the app.
Eliminating unnecessary bootstrap components and utility classes greatly decreases the application size. Some components and styles don’t load right away. They only download when the user calls on them. Doing this helps improve the initial loading time.
Progressive Web Application
Originally, there was no intention to make ProSlaps! an application. After auditing the page and seeing issues under the Progressive Web App section, I began to think why not make it an app? So I began looking into these issues.
Two plugins help resolve many of the issues. One of them is Register-service-worker. Like the name implies, it builds a service worker for the application. The other is Cli-plugin-pwa. It helps set the progressive web application settings, and develops a manifest file for the app icons.
The application icon is a png file of one of the hands. I went through several websites to render a collection of images for the manifest file. Unfortunately I don’t recall which specific website whose files I ended up using.
Finally, ProSlaps! needs to have the stats save on the users device. When a match finishes the value of the data category increases. This value is also assign to a localStorage variable as well. Now when the game initially loads, it will check the device for existing localStorage variables and their values. If a value exists, it will assign the value to the correct data category.
Technical Specs
ProSlaps! utilizes v2.6.11 of the VueJS open source JavaScript framework. The front-end uses styles and components from Bootstrap v4.4.1. All icons are provided by Font Awesome v4.7.0.
ProSlaps! is built with the following developer dependencies:
- @vue/cli-plugin-babel v4.3.1
- @vue/cli-plugin-eslint v4.3.1
- @vue/cli-plugin-pwa v4.3.1
- @vue/cli-service v4.3.1
- @vue/eslint-config-prettier v6.0.0
- babel-eslint v10.1.0
- eslint v6.7.2
- eslint-plugin-prettier v3.1.1
- eslint-plugin-vue v6.2.2
- node-sass v4.12.0
- prettier v1.19.1
- sass-loader v8.0.2
- style-resources-loader v1.3.3
- vue-cli-plugin-style-resources-loader v0.1.4
- vue-template-compiler v2.6.11
Click here to view ProSlaps! git repo.
All screen shots were captured on April 4th, 2020
Click here to view ProSlaps!