A faithful recreation of the original arcade game Space Invaders, built with Javascript. The game features include, keyboard controls, numbered lives, sounds and even progressively difficult levels.
7 days
- JavaScript (ES6)
- HTML5
- CSS
- Git
- GitHub
- Javascript audio
The app aimed to fully replicate the original arcade game and built purely with vanilla Javascript.
- Clone or download the repo
- Open the
index.htmlin your browser of choice
- To start creating the game I used JavaScript to create a grid, by setting a value for width and then creating div elements while the index value was less than width * width.
- I then pushed these divs to an empty array and then appended them to the grid game container in my html.
- I then created an aliens array, which included the index values of the squares on the grid, to apply the alien class to these specific squares on the grid.
- I created displays for score, time, lives and level which update when the values are altered.
- I created keydown event listeners to allow the player to move and fire when the corresponding keys are pressed.
- I then created a set interval, which ran through a moves array, to move the aliens right, down, left and down. It loops over this array and then continues to move the aliens, until they reach the last row.
- The aliens fire by using Math.random to choose a random index within the aliens array to choose which alien should fire back.
- If the player is hit by alien fire, the lives value is reduced by one.
- When the aliens reach the last row or when the player has 0 lives, this calls the game end function which clears the grid of aliens, changes the player to display an exploded turret.
- This then displays a 'Play Again' button, which allows the player to restart the game from level 1 and resets the score, timer, lives and levels values.
- If all of the aliens have been killed, which means the alien array has a length of 0, the level has been one.
- Once a level has been won, this then displays a 'Next Level' button, which when pressed, allows the player to start the next level, and resets the score, lives and timer values.
- Player movements: ← → keys
- Fire control: ↑ key & space bar
- Click on the start game button
- Use the left and right arrow keys to move the player. You can fire using the up arrow key and the space bar.
- If you run out of lives, or the aliens invade the planet then its game over.
- If you manage to kill all of the aliens, you win that level and can progress onto the next level.
- As you progress through the levels, they get harder as the aliens move faster with each level, increasing the difficulty. Each level the lives get reset.
- The game is an infinite loop, which means there is no end of the game, the aim is to survive as long as possible and defeat as many waves of alien invaders as you can.
As this was my first JavaScript project I encountered many difficulties:
- All of the visuals were created in JavaScript so did not exist on page load
- I chose this project so I could practice setIntervals as I needed to cement my learning, and this project contained many and it was difficult to manage so many which were running at once, but at different times
During this project I had multiple wins, these include:
- I have learnt so much during this project and I am really happy with what I have managed to achieve with my new JavaScript knowledge
- I thought the extra design features, such as the flash on game load and the 'Start Game' button added to the user experience of the game
- To create a leaderboard using localStorage
- To apply different aliens within the game, so they are not all of the same type
- To set additional aliens at different point values
- To add in the UFO which comes into the game play at random intervals
- To add in the barricades and recreate the original arcade game as closely as possible
- When levels are increased, to maintain points and time values from the previous levels