VIEW THE LATEST LIVE VERSION HERE Click "Start Game!" to start a new game. Use the up (or 'W') and down (or 'S') arrows on your keyboard to move your spaceship up and down on the screen. Avoid getting hit by any of the asteroids coming in from the right (As for now an asteroid hitting your ship will just stop in front of it).

Please Note! There have been some issues with the game running with ad-blockers activated. If the game does not start, try disable ad-blocker software.

This is the second of four individual projects we are to make during the 3 months Full Stack Developer course at Code Institute. Beside HTML5 and CSS3 this project is restricted to use of Javascript.

Since this stage of the course is mostly about Javascript, my idea is to make a small game using the HTML5 canvas element. This approach assures that most focus falls on Javascript. I am not using anything else than ”Vanilla” javascript and JQuery (and of course HTML and css with Bootstrap framework)

The game I intend to build is my own interpretation of the very classical game ”Space Invaders” (Created by Tomohiro Nishikado 1978). By making yet another version of this game there is nothing new. My interpretation just happens to be;

• “M A R K” - Because regardless of what this project becomes it will still be some kind of mark in the history of Space Invaders clones (Think like “Just another poor made broken bronze ax found in an archeological dig site still has its pretty small Mark in the history of bronze axes”).
• “Z E R O” - Because at the moment this proje#ct's mark is pretty much anything about Zero.

The game is about a small spaceship fighting obstacles in a complete 2d environment. While the classical ”Space Invader” had a bottom/up perspective, my version goes from the left side of the screen where the player spaceship can move up and down (on the vertical axis). From the right side of the screen obstacles and enemies are appearing and move towards the player. These obstacles appear in various random positions, directions, speed, size and appearance. The player has to avoid being struck by these enemy objects, or the game is over. Possibly, the player can shoot at these enemies to make them disappear and maybe the enemies can shoot back at the player.

• HTML 5 (With use of the Canvas element to render the game in “2d” context)
• CSS 3 (With Bootstrap 4.5.0 and Popper 16.0)
• Javascript (With JQuery 3.5.1)

The application is hosted on GitHub Pages: https://ifooledme.github.io/project-2-concept/

The public repository on GitHub: https://github.com/iFooledMe/project-2-concept

For now you can find a list of all current features in the separate UX document here

• “As a player I can add my username and start a new game”
• “As a player I find it essential that there are some sort of playable narrative”
• “As a player I find it essential that I can control my on screen avatar”
• “As a player I must be able to lose the game”
• “As a player I must be able to win the game”
• “As a player I wish to some sort of high scores list” (locally cached)
• “As a player I wish to get some more information about the game.”
• “As a player I wish to get instructions on how to play.”

• “As a player I would like to shoot at incoming objects making them disappear”
• “As a player I wish to be able to Pause the game if I need to”
• “As a player I expect some leveling to incrementally make it more challenging”
• “As a player I expect the game to have some music and sound effects”

“As a Player would like some of the incoming enemy objects sometimes shoot back at me” “As a player I’m bored! Please give me some upgrades and new game mechanics to play with”
“As a player I would love some Game Story to make my journey a bit more meaningful”

Find complete UX-document here

• Bg-space-2460x1700.jpg - SOURCE: Wallpapersafari.com - https://img.wallpapersafari.com/tablet/2560/1700/19/51/a415uP.jpeg
• spaceship2.[_100x50 to _1000x50].png - SOURCE: Wallpapersafari.com - https://cdn.wallpapersafari.com/11/9/bn9KIi.jpg
• astroid1.[_20x20 to _400x400].png - SOURCE: Wallpapersafari.com - https://cdn.wallpapersafari.com/91/49/2uKRha.jpg

loadImages() on top of main.js (I only made some small changes to this code to fit my purposes). SOURCE: Derek Leung - http://jsfiddle.net/DerekL/uCQAH/