To win the game the user has to form the fibonacci sequence from top-left.
| FROM | TO |
|---|---|
 |
 |
It is a variant of the 15 Puzzle created to simplify how to scramble the squares. Half of the combination using numbers from 1 to 15 will always be unsolvable. But using the Fibonacci sequence and validating the positions of the squares from 3 to empty all the combinations become possible because square one can be in position two and viceversa being both "1". The application will use jQuery UI draggable and droppable plugin to let the user move the square only if next the the empty space until they are validated.
To win the game the user has to guess the correct characters included in a word, given its definition. Classic Hangman!
The application use external API to both get random words and their definition, it will display the underscores for esch character present in the word and let the user guess the characters until is they are all guessed or game over after 7 mistakes.
The website targets people wanting to relax playing some games.
- As a user I want to be able to play different kind of games.
- As a user I want to fully understand the rules and how to play each game.
- As a user I want to understand that my actions are recognized and interpreted well.
- As a user I want to be able to check my current score.
The goal is to make a well-functioning web application with which the user can interact and receive accurate responses.
I want users to be able to enjoy a brief amount of their time.
This web application is single page based, composed by a header and four sections sittin on top a moving background. Only one section of the first three sections is visible at the time and in mobile view the header is visible only in the landing page. The fourth section is the rules/landing page for both games. It acts as a modal stacking on top of the other layers. The javascript will handle what will be visible on each sections, dependind from the user's request.
Website Sections:
| Section | Content |
|---|---|
| Landing page | A header and the choice between two different games |
| Logic game page | Logic game page |
| Knowledge game page | Knwoledge game page |
| Rules game page | Rules game page |
The website is designed to be clear and simple.
I used greenyellow as color and black as background for most of the web application. I used yellow on darkgreen for the buttons. As background I used particle.js script with the other layers sitting on top of it with opacized background colors.
- HTML - To create a basic site.
- CSS - To create a nice, standout front-end and to give a great user experience.
- JS - To have nice moving backgroun, game states.
- jQuery UI - Starting with the web app navigation, I'll use it for mostly everything in this progject.
- GIMP - To elaborate images.
- RapidAPI - To retrieve 10 random words
- RapidAPI - To retrieve the definition of a single word
- VS Code - as an IDE
- git and github - for deployment and version control.
- Balsamiq - for the wireframes
The user has a choice of two different games.
The user is given explanations in both games
The user is signaled when he's hovering a button by changing the button style.
The user is signaled to click the new game button when a game is finished or not yet started.
blink.mp4
blinkknowledge.mp4
The user start a new game
newgamelogic.mp4
newgameknowledge.mp4
The user can fully interact with the widget, it signals the user which square are draggable, both by changing the cursor and highlighting the square. It fully adjust when the square is dropped and when it is reverted it turn the backlight on again.
solution.mp4
The user has an accurate response when guesses a character by turning the background color to classics like green and red for success and fail. It disable the character guessed so the user cannot guess it again. Turns the displayed keyboard green or red at the end letting the new game button blink again. It also displays a hint at the second mistake.
knowledgegameplay.mp4
The user can see his moves adding up and a timer showing
moves.mp4
- Save scores on local storage or in a backend
Two completely different way to approach how to code. I used only manual testing as described later. But I'll try to briefly explain both of them.
First of all to do some automated testing a developer would need to setup jest as framework to write the test. After setting up the environment a developer would need to write a failing test and only after he should write just enough code to pass the test. Then it should refactor the code if in need and start the cycle again, in an almost endless loop of red, green, refactor which is typical of a TDD coding approach. I can't really speak for it, didn't have the pleasure to try it yet, it looks more tedious and long at the first approach but I hear that the time saved in later debugging overly repays it's slower start.
As opposed to the automated testing, with BDD is more user centric and it focus more on the system behaviour and the desired output.
When the user clicked the new game button it returned an error because I was trying to elaborate data that was not there yet
bugknowledge.mp4
Solved adding a loader in the rules page preventing the user to ask for a new game until the app is already retrieving the definition of the last word
Blinking button was going rogue due the interval not being cleared during mouseenter event firing up another interval during mouseleave event
roguebutton.mp4
Solved by clearing the interval and resetting the variable containing the id to null for validation on when the interval can be launched again
I don't know if it qualifies as a bug, anyway the validator would refuse to accept the 'rotate' property so I changed the hanged man from having different parts to be put togheter, to be only one but depending with class it has it changes the whole picture. App looks the same and it validate.
When clicked on the draggable square the square underneath in the stack that give the backlight effect become fully visible and quite ugly.
backlight1.mp4
Solved by adding this line
if (getSquareAtPosition(squareAt) === this.id){ $("#backlight-" + squareAt).css("background-color", "#cccccc")}
in the start function of the draggable plugin.
It created another problem, now when the user does not drop the square it does not turn the backlight on again
backlight1.mp4
Solved by adding this line
$("#backlight-" + oldSquarePosition).css("background-color", "transparent");
in the drop function of the droppable plugin.
Javascript passes throught the JSLint extension for VSCode with only warnings
- Contrast Main
- Contrast Buttons
- Contrast Widget
- Contrast Keyboard
- Contrast Keyboard Fail
- Contrast Keyboard Success
- As a user I want to be able to play different kind of games.
- As a user I want to fully understand the rules and how to play each game.
- As a user I want to understand that my actions are recognized and interpreted well.
- As a user I want to be able to check my current score.
The project is deployed on github pages at https://antoniobruchidev.github.io/mp2-javascript-games/
My Mentor Medale Oluwafemi for his patience and invaluable support