This is my second assigment. The objective of this project is to test my JavaScript knowledge. This project will hepl me to put to practice everything that I learnt so far.
My project is for current and potential student that are learnig to create games or want to improve their skills too. The website is very simple to use. Users will find easy to navegate the website and play.
As a potential FrontEnd developer I want to feel confortable using JavaScript and expand my knowledge in one of the most popular language on the internet. As developer I want people to enjoy the games created by me.
I drew wireframes using Balsamiq. The pictures or art work shows how users will come across with on mobile, desktop and tablet.
There are some differences between my wireframes and my final website. This was due to visual preferences and feedback received from other users who tested my website.
- A Header - with the words G-A-M-E-O-N
- A very basic menu that blends with the header or logo
- A welcome message
As soon as the page loads up the user will see:
-
All the levels.
-
There are 20 levels with 5 different types of game.
-
The user will experience playing with number, emoji, letters, letters and numbers, emoji and letters and so on...
There are 3 options on menu. By selecting the options, the user can read about the game, learn how to play and understand scoring rules.
The footer is quite simple and there is a link that takes you to github project.
Once I've learnt JavaScript, I will add further functionality to the existing features on my website, such as:
- The user will be able to register and login to the website, customise the page to their preferences
- The user will save the game and continue from where left
- The user will see a chart displaying all the best personal scores and others players too
I've used Balsamiq to create wireframes of my website.
1.
2.
3.
HTML5 The project uses HTML5 to create the basic elements and content of my website.
CSS3 The project uses CSS3 to add custom styles to the elements and content of my website.
JavaScritp 99% of the code has been written in pure JavaScript language only.
Bootstrap v4.3 The project uses Bootstrap v4.6 to add a responsive grid system, prebuilt components, plugins built on jQuery, and Bootstrap styles to my website, before adding my custom styles.
JQuery 1% of the code was written in jQuery.
JavaScript The project uses JavaScript from Bootstrap which is required to add functionality to some of Bootstrap's components.
Git I've used Git as a version control system to regularly add and commit changes made to project in Cloud9, before pushing them to GitHub.
GitHub I've used GitHub as a remote repository to push and store the committed changes to my project from Git. I've also used GitHub pages to deploy my website in a live environment.
For Responsive Design I used Google Chrome's Development tools constantly test each change that I made to my website and to ensure that it appeared in the desired way on different screen sizes. I also tested my website on different screen sizes (mobile, tablet and desktop) to ensure it appeared in the desired way on different devices.
- HTML and CSS Validation
-
I used the W3C HTML Validator tool to validate my HTML code.
-
I used the W3C CSS Validator tool to validate my CSS code.
-
Interesting Bugs or Problems
My great challenge was javascript array itself and emoji icon. Some emoji would display but other wont't. When come to aligning each object in the page was challenging too.
https://levidomingos.github.io/Gameon/
I received inspiration for the full screen overlay menu when I was looking at websites for other games.
A special mention to my mentor, for his feedback on my project's scope and design, and for hints on what information to include in my README.md file to justify my stylistic choices.