This Milestone project uses skills learned from fourth and fifth modules of the Full Stack Developer Course, Javascript Fundamentals & Interactive Frontend Development, to build a custom mobile-first fully responsive javascript matching game called Hero Flipoff. The goal of the Hero Flipoff is to provide an entertaining game that is fun to play.
This project is built using HTML5, CSS3 and Javascript to make the individual features of the game to work. Bootstrap 4 Framework was used to provide responsive grid. jQuery was used for easier DOM, CSS and event manipulation.
As a player,I want:
- Clean and aesthetically pleasing visuals.
- Easy understanding of the game.
- Easy controls.
- Popular themes.
- Option to choose different themes.
- Audio and/or visual feedback when I play the game.
- Positive audio feedback when I complete a step in the game.
- Responsive game I can play on my phone or tablet.
- A child-friendly game.
As Developer, I want:
- To create a pure Javascript game to test my skills.
- To create fully responsive app to showcase my skills to a potential employer.
- An on-going project I can enhance and improve over time as my skills grow.
- To learn how to create games.
Main font is Bangers which was imported via the head element of the html file from Google Fonts, with the backup font being set to a default of "Sans-serif". This font was used for purpose of giving a comic book apperance.
Secondary font used is Ubuntu.
Game logo and favicon was designed on: Hatchful.
These wireframes were created using Balsamiq during the Scope Plane part of the design and planning process for this project.
- Universe Select Modal
- Modal is shown when on arriving at the page .
- Universe select modal has been programed not to give any other option other then selecting DC or Marvel Universe.
- Selecting an image, cards are shuffled, moves counter is set to zero and timer is restarted.
- This modal is also activated if the Restart Game Button, Victory Modal or Defeat modal has been clicked.
- Victory Modal
- Modal is shown when all cards are matched.
- On click, page is redirected to Universe Select Modal.
- Defeat Modal
- Modal is shown when timer reaches zero.
- On click, page is redirected to Universe Select Modal.
- Reset Button
- Reloads starting page containing the Universe Select Modal.
- Mute Audio Button
- The mute audio button switches off/on all audio in the game, also switches its icons.
- Moves Counter
- Counts the number of turns the player has taken in the current game, which is later displayed on the Victory Modal.
- Add more cards.
- Add second player.
- Add background music.
- Add High Score Feature to store the best scores to local storage and ability to enter name on your highscore.
- When the game is finished, next level starts with less time.
- Turn browser game into app. That would eliminte many browser restrictions.
At the beginning of the development I wanted to add an animation when cards first appear, using velocity library. For some (still unknown) reason animation was overriding my css flip card animation so I removed it.
- This project uses HTML, CSS and JavaScript programming languages.
- Visual Studio Code
- Developer used Visual Studio Code for their IDE while building the website.
- Bootstrap
- The project uses Bootstrap to simplify the structure of the website and make the website responsive.
- The project also uses Bootstrap to provide icons from FontAwesome
-
- The project uses JQuery to simplify DOM manipulation.
- Google Fonts
- The project uses Google fonts to style the website fonts.
- GitHub
- This project uses GitHub to store and share all project code remotely.
- AutoPrefixer
- The project used AutoPrefixer to make sure all css prefixes were the most up to date versions.
Continuous testing for this application was carried throughout the entire development. This was achieved through the Google Chrome devtools. Game was tested on mobile phones and laptops. Every element was tested on Google Chrome, Firefox, Opera & Internet Explorer. Javascript code was tested one function at a time using console log so I can see log or any error in devtools.
- Tried to break game by reloading several times and savagely clicking on all clickable parts of game.
- Modals were tested on every screen and orientation. Added 'data-backdrop="static"' to not allow a user to click outside of the modal and close same, and `data-keyboard="false" to remove pressing ESC button to close the modals. All modal images were tested to fit all screen sizes that led to different sizes of images on Universe Select modal for each screen.
- Victory and Defeat modals were tested to see if they play sounds and redirect to Universe select modal on click.
- Timer was tested to see if it is visible on screen. At first, even after victory, the timer was still running. When it reached zero, Defeat Modal was shown so I added a line in the timer function to stop the timer when number of matches reaches 6. That solved that bug, and victory screen is no longer interrupted.
- Cards were tested if they can be clicked more then once and if sound plays only on first click.
- Bug was found in early stages of game development. Back side of card was never shown, instead card showed mirrored front side. That bug was solved by reverting game version and rewrite most of the code.
- Display of cards was also tested on multiple devices and browsers to fit nicely without overflow (except on landscape orientation).
- With the help Media Query I change size of cards so they use most of the screen and tested it on all available devices and aforementioned browsers for any visual distortion or functionality problems.
- Fonts are made responsive and their size changes with screen size.
- Move counter was tested to see if it is displayed properly on game screen. Count would increment when second card was fliped.
This project was developed using the Visual Studio Code, committed to git and pushed to GitHub using the built in function within VSCode.
To deploy Hero Flipoff to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub.
- From the list of repositories on the screen, select sWrAAb/milestone_project_2.
- From the menu items near the top of the page, select Settings.
- Scroll down to the GitHub Pages section.
- Under Source click the drop-down menu labelled None and select Master Branch
- On selecting Master Branch the page is automatically refreshed, Hero Flipoff is now deployed.
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
To clone this project from GitHub:
- Follow this link to the Hero Flipoff GitHub repository.
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local IDE open Git Bash.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
git clone https://github.com/USERNAME/REPOSITORY- Press Enter. Your local clone will be created.
- Card images were downloaded from http://www.fanpop.com, http://www.vhv.rs, https://www.writeups.org, http://hiclipart.com,
http://pngguru.com.
- Background images were downloaded from: https://wallpaperaccess.com/dc-comics, http://sfwallpaper.com/categories/marvel-wallpaper.html and https://aminoapps.com/c/comics/page/blog/batman-vs-wolverine/Jvid_urkYKPPRvqBWw7m4nQZavn8er.
- Modal images were downloaded from: https://www.business2community.com/business-intelligence/nevermind-new-avengers-infinity-war-movie-heres-become-hero-using-modern-business-intelligence-02043336 and https://www.businessinsider.com/nuclear-bomb-effects-video-red-cross-2019-10?r=US&IR=T
All sounds were downloaded from: https://freesound.org.
Websites and tutorials used during the project:
- https://stackoverflow.com
- https://www.w3schools.com
- https://javascript.info/
- https://www.khanacademy.org/computing/computer-programming/programming
- CSS styles from: https://css-tricks.com
- Blinking text animation from: https://html-online.com/articles/blinking-text-css-animation/
- To my mentor, Spencer Barriball, for incredible mentoring, support and for assisting during my project reviews with great critique and potential solutions.
- To my friends and family who worked tirelessly trying to break my game.