Welcome to my first game! Test your skill and try your best to hit more and more moles!

A live website can be found here

Before writing any code, I did some user research. On the internet all video game creators recommend, to start, to create basic games such as rock paper, scissors or a mole catcher to understand the principles of programming in games.

My choice therefore fell on catch the mole and with vectr I created the images I use on the site.

The structure of the game is very basic so to attract the user I point to a good stylistic choice and later to a nice tune to loop during the game

The main goal for the website is to test current skill with javascript.

So i try to find out how to make a site that:

• Has pattern matching functionality
• Has limited number of tries before the game is over
• Has a score tracking system
• Has the ability to play against the computer

In the present state of my abilities I am limited by my inexperience. This means that il focus all the time to the .jss file.

The features to include are:

• Pattern matching functionality
• A limited number of tries before the game is over (the player have 3 attempts)
• A score tracking system (score are dispalyed during the game)
• The ability to play against the computer (the game increases in difficulty as the score increases)

The structure is therefore really minimal and focused on the game area

I used Balsamiq to create wireframes

-You can hit the mole when you do it you will increase combo multiplier and reduce the time that you can hit the mole

• Logo
• Tutorial screen - a quick description tells the user how to play. The game will start when he press the button.
• Rotating screen - if the width of the screen is small the play sreen is hide.
• Play screen -the actual game where real-time score and the number of remaining attempts of the user are recorded when he hit or miss the mole!

• Add sound: at the moment no piece of music has been inserted which however should play in a loop for the duration of the match
• Add a record section that register the player record

• The site was not designed to be modified often. In general, the real change will take place on the .css file to recall the holidays eg. use reindeer instead of moles at christmas or rabbits at easter

• HTML

  • used to structure the website and create the essential elements of my site.

• CSS

  • used to style the markup and create custom styling.

• JavaScript

  • used to create the scripts to make the game functional.

• Google Developer tools

  • to help solve a bug and help style my elements before writing code.

• Google Fonts

  • used to import the font style.

• GitHub

  • used to store the source code and repository.

• GitHub Pages

  • used to deploy my website.

• Balsamiq

  • used to help create my wireframes.

• FontAwe

  • used to use some icons in the site.

• Vectr

  • To create the images for the game.

• Musicgamerx-8-bitDream

  • For the music during the game.

• Canva

  • For the tutorial gif.

I used Google Developer tools to help identify any flagged errors. A handy feature is the audit tool, and it alerted me that I had to compress my images even further.

As well as this, the developer tool also has a responsive feature. It tells you how your site looks across multiple devices, including a 4k screen. This was insightful as I decided to use containers to ensure my site looked good on larger screens. I also made the navbar and footer to stretch across the width of the device. This is to enhance the user experience.

I used Am I Responsive to ascertain if my site is responsive on all devices. As I do not carry multiple devices, these are a handy feature to help correct any alignment or issues.

To help validate my HTML and CSS, I used W3C validator tools to ensure my code was clean. I regularly checked if my code was cleared from any errors after each section was created.

list of errors:

• Initial attempts to create a function that recognized if the user clicked on the image of the right mole resulted, except for the first click, to increase the score while decreasing attempts.
• At every restart of the game the showMole interval did not work properly
• The sound music don't play when the game is loading

list of solutions:

• To get around the problem I have diversified the function that recognizes whether or not we have hit the mole by rewarding or punishing us in a consistent way for each case: this is why we have the countPointA function, countPointS and countPointD.
• To solve it, the clear interval function has been added, which blocks the repetition of showMole at the end of each game and and I created a variable that allows us if we are actually playing or have lost

the game was tested on:

• Moto G4
• Galaxy S5
• Pixel 2
• Pixel 2 XL
• iPhone 5
• iPad
• PC

At the first start of the game the music did not start so I associated the start of the music with pressing the start button. In this way the tune starts for the duration of the game and ends with the game over.

Of primary importance was verifying the correct functioning of the function that gave the score or that takes away attempts depending on the moment in which the user click on the images where the moles are positioned.

For how set the function that gives the spikes if the loaded image is that of the mole out of the hole the application is able to understand it but it did not stop with the game over screen. This made it even more necessary to use a variable (isAlive) which if true activates the key listeners when this variable is set to false the key listeners are disabled (we refer to the a, s, d keys).

After a first use through a set interval the timer created encountered a problem that is it did not reactivate when the game was restarted. This necessitated its declaration (timer = null) as a global variable so that all functions could call it even if with a different value.

At the moment the footer and voting form are only aesthetic and are not yet connected to a real server or brand so the form leads to an application error while the footer is connected to the general social pages.

This project was deployed to GitHub pages. In order to deploy a project onto GitHub, please view the following steps:

1. Log onto GitHub or create an account

2. Create a repository (repo) on GitHub and name your repo with a project name and give it a description

3. Open your workspace (I use Gitpod)

4. Initialise your repo following the below commands git init

• add files to Git (the staging area) git add .
• We now want to write a concise commit message git commit -m "git init"

5. Once your project is complete, you are now ready to deploy this onto GitHub pages.

6. Scoll onto "settings"

7. On the left-hand side, find the "Pages" tab which looks like the following:

8. Now that you are on the Pages section, select "Master Branch" under the Source headings.

9. The page will now automatically refresh. If not, give it 5 minutes.

10.Your page is now live! You have now successfully deployed your GitHub repository

I would like to give special thanks to:

• My mentor Marcel for his patience and be able to order my ideas
• My partner for being supportive for all countless tests done during the creation of the scripts.
• My brother who pushed me to try again after every mistake.

Thank you for taking the time to read my project.