Milestone Project 2

The game was designed to fulfill several key goals. Above all else, as a game it should be entertaining; it should involve elements of play and fun. Nevertheless, the game was born from an idea to produce a game that would also help improve spatial reasoning abilties; subsequently improving performance during psychometric testing. Finally, the game hopes to serve as a display of my programming abilities to potential employers and collaborators.

Playful imagery, animations and sounds were selected as a means to satisfy the primary goal.

In order to create an engaging way to improve spatial reasoning abilities, a relatively simple model was chosen as the beginner stage, providing a correspondingly low entry level. Complexity increases in later stages by first altering the axes upon which the image is mirrored and then introducing an aspect of three-dimensionality. As the images are loaded dynamically, they can be exchanged at any point by the developer to respond to user feedback.

The incorporation of HTML, CSS and JavaScript elements in an organised, well-structured manner should satisfy the last goal of displaying the developers's talents as a junior web / game developer.

Website

The game can be viewed and played here

UX

Strategy & Planning

The UX design process revolves around a mobile-first design. As the focal point is the gameboard, all elements are centred on screen and the background is relatively nondescript. Nevertheless, the background is designed to subtly mirror the block graphic used in the game. Card colors are soft and contrasting and were chosen from opposing sides of the colour wheel to ensure maximum contrast and minimal interference; the player should be able to focus on the objects in the game.

The opening animated character and title were chosen to signify that the game is a mental game, with a relationship to psychometric testing.

A simple geometric shape was chosen that, from the outset, is suggestive of a three-dimensional environment - a feature that becomes more obvious in the advanced level.

The 'Start Game' button has been given the bootstrap default 'btn-success' class, as green is suggestive of Go; the buttons for the level select feature have been given traffic light colours: 'btn-success', 'btn-warning', 'btn-danger' to reinforce the idea of increasing difficulty, while offering a colour pattern that users might also find familiar.

The overall green colour scheme provides a sense of relaxation, growth and success. (see Color Design Workbook by Sean Adams, et. al. (2008, p.28)). For this reason, green was also chosen for the geometric image used on the cards.

User Stories

• As a player / user I want an entertaining, challenging and playful way to test and improve my spatial reasoning and awareness abilities.
• As a talent acquisition specialist or freelance developer (collaborator), I am looking for evidence of the developer's skill level in responsive Front-End technologies.
• As a novice developer, I am looking for a platform to showcase my artistic (game design and graphics) and programming (use of HTML, CSS, JavaScript & jQuery) abilities.

Research & Prioritization

There are a vast number of JavaScript libraries and frameworks available. At project inception it was, therefore, deemed prudent to research a number of these, e.g.: P5.js; Babylon.js; Three.js; Phaser.js; Tone.js; WebGL.

That said, at the core of all the goals is a much simpler goal; a functioning game. Priority was therefore given over to simple, clear, functioning code. As the game seeks to reference spatial reasoning tests, some time was spent investigating the type of imagery used in these tests - resulting in the choice of a simple, geometric, three-dimensional shape.

Finally, in order to demonstrate an understanding of JavaScript and game design, means were sought by which code could provide a game that might be easily expanded upon in future iterations.

Scope

The scope of the game was restricted, as far as possible, to creating a core game framework that could, at a later date, be expanded upon to include more complex features. The use of image arrays and the dynamic assignment of images are indicative of the developer's foundational work in creating such a framework. The various elements that were included in the core scope include:

• A landing screen that has a clearly identifiable image and text to identify the game and suggest its niche, and a clear indicator that it is the game start screen
• The ability for players to quickly access the game board
• A modal display to outline the game rules - also functioning as a game pause screen
• A beginner, intermediate and advanced level
• A modal display to allow the player to select the board levels - also functioning as a game pause screen
• An icon to allow the player to mute audio
• A button to restart the game on game completion
• A button to quit the game on game completion
• A clutter-free, minimalistic design to allow the player to concentrate on the game board.

Structure

Considering the nature of the game, it was clear that using separate pages for each element (particularly the different levels) would be inefficient - considering load times, etc. All game features were, therefore, consolidated into a single page website.

The game board is visible throughout the entire game and maintains a central position in the screen - clearly defining the nature of the website.

Design elements are kept to a minimum, with modals being used to provide the player with additional information / features. As game pausing is achieved through opening these modals, a button with this functionality was considered superfluous. As the player can also quit the game at game end or by simply closing their browser, a button with this functionallity was also considered unnecessary.

Visual and audio feedback for the player is provided in simple, recognizable forms (e.g. a simple shake and accompanying sound to indicate no match). The Bootstrap buttons provide user feedback on click events. All animations are suggestive of a card being turned over and are also used to provide a sense of continuity. Each time a game is started, restarted or on level select, the same animation and game start audio inform the user that the game is starting and gives them sufficient time to prepare.

Skeleton

The initial design (below), in practice, served more as an idea's platform or board. As is apparent in the final design, the first four screens were incorporated into the main page and hidden until required.

A pdf of the wireframes is available here

The wireframes were constructed with a mobile platform in mind, however, it was clear that there would be little difficult in scaling the game board for tablet, laptop or desktop devices.

Surface

As stated, the look of the game is purposefully designed to have a relaxing yet playful feel. This conscious design decision was made in an attempt to counteract the stress of preparing for tests. The background is designed to subtly mirror the block graphic used in the game. Its colours match those in the game and are muted to reinforce the background positioning.

Design Decisions

The font was chosen to suggest an element of play. The choice of a simple geometric shape was made following a trial with complex block shapes in three-dimensional space. Test subjects found the game too difficult and were therefore not encouraged to explore the game further. More accessible designs were developed in response to this feedback.

Features

Existing features

• Rules & Select level - The Rules and Select Level modals utilize Bootstrap features to disable the game screen. The buttons to open the modals are disabled at appropriate times in order to prevent bugs with the timer function.
• Sound / Mute - The sound / mute icons provide the player with the ability to play the game with or without sound effects, and persist on 'play again'.
• Time & Moves - The Time and Moves displays provide the player the means of tracking their progress in the game.
• Animation & Sounds - The animations and sounds further enhance the sense of play and, as a game feature, give the player essential feedback on their interactions as well as subtly reflecting their performance (match, no match, game win).
• Game Win - The Game Win screen presents the player with their score and the option to play again or quit the game.
• Game Score - The game scoring method is based on the number of cards in the game, the number of clicks and the time taken to complete a board. In addition, the player is awarded a multiplier bonus for choosing more difficult levels - in anticipation that the level will take more time to solve.

Planned features

• Dynamic assignment of card backface images (allocate different images to the background dependent on the level selected).
• More complex levels / sub-levels (Master and Psychomaster levels) which increasingly mirror challenges used in psychometric testing.
• More advanced animations to provide improved player feedback.
• A leaderboard where players could compete against themselves (possible expansion / integration with other sites to allow sharing of scores with friends, etc.).
• With the inclusion of other technologies, it would be possible to develop the game so that it:
  • would be available to those using assistive technologies
  • offer a modicum of artificial intelligence, increasing or decreasing the level of difficulty dependent upon player performance

Technologies Used

• HTML - Providing the basic structure for the page.
• CSS - Styling the site, providing responsive design and adding animations.
• JavaScript - Adding functionality to the site, in the form of triggering events and animations, dynamically allocating images, etc.
• JQuery - Supporting library for much of the JavaScript functionality.
• Google fonts - For the game font
• Blender - Creating card graphics, background image
• Balsamiq - Creating wireframes at project inception

Testing

General Testing

The final style.css file was passed through the W3C CSS Validation Service. The HTML file were passed through the W3C Markup Validation Service. The main.js file was passed through a linter The files passed with no major errors or issues.

Manual Testing

Throughtout the project, the console window was used extensively, in combination with console.log statements in the code, to check feedback from all player interactions.

All clickable elements were thoroughly tested, in order to identify any bugs that might occur through multiple function calls, double-click events, etc.

The appearance and performance of the game was checked by the developer on multiple devices, including desktop, laptop and mobile screens. Friends and family also tested the game on mobile and desktop environments and provided verbal feedback. The results of the initial feedback are most apparent in the deviation from the original wireframe design. Users requested almost immediate game access and limited button clicks.

The website was also tested in the Blisk browser, on a variety of devices, including:

• Samsung Galaxy S5
• iPhone 5/SE
• iPhone 6/7/8
• iPhone X
• iPad
• iPad Pro

Chrome and Blisk developer tools were used for testing the site, and were of particular use in positioning the graphics, confirming control flow, and adjusting animation timings.

Cross-Browser Compatability

The website was tested in the following browsers:

• Blisk
• Firefox
• Google Chrome
• Microsoft Edge
• Opera

Interesting bug - resolved

During testing, any attempt to reload the game created a bug which caused the second card of a matched pair to persist in memory so that, upon selecting another card, the card persisting in memory would be compared with it, and when found not to match, both cards would flip back to the starting position. This would leave one card 'flipped' and ensure that the player could never complete a game.

Initially, this occurred after any game restart. Following several attempts to resolve the issue, the bug shifted so that the game had to be restarted twice before the bug would appear.

A restructuring of the code was required to completely alleviate the issue.

Interesting bug - resolved

During testing of the restructured code, short-spaced clicking of the start / restart button, immediately followed by opening and closing the modal windows in quick succession led to the timer attempting to display two timers. If completed quickly enough, the time from the previous game could persist into a new game so that the timer would try to show time increments based on that timer, as well as attempting to display the timer for the new game board.

Adding short time delays to the code resolved the problem.

Deployment

This site is hosted using Github pages, and is deployed directly from the master branch.

Media

Favicon created at favicon.io.

All the images for the game were designed by the developer, using Blender v2.81a with the exception of the opening graphic, which is an adaptation of a clipart image: Stick Man Thinking.

All the sounds were adapted from open source sound files available from Freesound.

Acknowledgements

I would like to acknowledge and thank Dan Buda for his space-evenly fix for MS Edge. Thank you also to my mentor for guiding me through the vast and complex world of JavaScript, and for keeping my feet on the ground.