Milestone Project 2

Different games created with Phaser

This is my second milestone project. I originally decided to only create the Whack a mole game but later decided to implement 3 games since i had lots of fun and enjoyed creating things through Phaser.

This project includes interactivity and ease of use. It is easy to navigate, easy to understand and has been testet by several people before publishing.

The project will include:

• 3 games
  • Whack a mole
  • A dodging and shooting game, similar to old space invader games
  • a flappy style game where you have to get to the top and dodge the platforms
• Navbar style navigation
• Everything is scalable for mobile except of the games themselves

I will be using the following CDN's and frameworks:

• Bootstrap
• Jasmine
• Phaser
• jQuery

UX

This project was made for people that love indie games and is easily scalable. I took inspiration from old html game websites that I played when I was young. I also started using CodeCademy and they gave me the idea of using Phaser. I also got a lot of inspiration for my codes through their courses.

The webpage sole purpose is to showcase different games and should be very easy to navigate.

• As a user I wouldd like an easy to use webpage with easy navigation.
• If i visit any form of gaming websites I would like the focus to be on the games, and have a variety of games to choose from. I would like the information of how to play the game to be displayed in the game and easy to understand.

I chose the project based on the example ideas provided in the Interactive Frontend Development module but did not like the example games given and therefore decided to create other games.

Features

• The Webpage has 4 pages
  • A landing page
  • A Whack a Mole Game page
  • A Dodge/Space Invaders Game page
  • A Platform/Flappy Game page
• All code is written through Phaser
• Easy to use "Navbar"
• Everything except of the game itself scales down to mobile devices

In my platform game I had the idea of putting a key in the level which has to be collected in order to go through the door/goal. I also would have increased the amount of platforms spawning the higher the score.

I also thought of the idea of increasing the speed at which the mole moves in Whack a Mole and provide 3 difficulties.

Technologies Used

I have only used:

• bootstrap
  • for the general layout of the project
• Phaser
  • for creating the games
• Jasmine
  • in order to figure out syntax errors

Testing

For testing purposes I uploaded the site and put it live so that I could send the link to family and friends. They tried pressing everything and navigating throughout the page and gave me feedback so that I could change and fix things. This was of enourmous help since they often came with new ideas or saw problems that I did not notice.

I have been constantly using developer tools in chrome in order to make the screen size smaller, check the layout of the different devices and in general see things that should not happen.

• I used developer tools a lot for for example:

  • If I click on something: console.log('test');
  • If I wanted to check the buildup of an element/object/class: console.log(this);
  • Pausing javascript code and double checking the sending or output of code/functions;
  • Figuring out what css styles/classes to change in order to get the wanted outcome;

• I used Jasmin for mostly outputting which files and on what line there are syntax errors or functional errors.

• I used Phaser for checking if code runs/works. Phaser does not load if there is any syntax, function, statement errors, so changing one line of code at a time in case i ran into a problem helped me narrow down what was wrong.

• Visual Studio Code is my go to IDE which also helps checking mistakes in syntax and in general tells you if there is some code that is wrong.

• I specifically clicked on all the links and made sure everything works as intended.

• Since I am writing this code on visual studio, I always tested my changes before commiting them to github.

Devices Used:

• Samsung Galaxy S8 – Android 8.0
• Desktop Custom PC - Windows 10
• OnePlus 6T - OxygenOS, Android 10

Browsers Used:

• Chrome
• Firefox
• Microsoft Edge

Deployment

I created my repository on github and in the end hosted it on github pages since I sent that link to friends in order for them to give me feedback.

• There are no other versions.
• There are also no differences since this is the only version that I used. There are only differences between my local version on visual code and my github pages version before I commit the changes.

Link to the deployed version: https://johnsletvoldhafenrichter.github.io/milestone-project-2/

Credits

The photos used in this site were obtained from:

• https://www.clipart.email/download/1050411.html
• https://freesvg.org/
• https://www.publicdomainpictures.net/pictures/170000/velka/portrait-background-1.jpg
• https://www.pexels.com/photo/background-dramatic-forest-hdr-1371606/
• https://www.jpl.nasa.gov/spaceimages/details.php?id=PIA17002

I did not copy code but got lots of inspiration from:

• Phaser
• CodeCademy
• StackOverflow
• W3schools / I also used this in order to figure out colors

Acknowledgement:

• I brainstormed with a friend (Tom) about what games to create and decided together with him.