Kill the invaders in order to fill the color bars! Try to get as close as possible to make the goal color. Or better yet, a perfect score!
Putting a personal mathematical twist on the classic space invaders i loved growing up. As you kill the invaders, their respective colors would increment the comparable colorbar/meter.
Try as best you can to match the goal color that is randomly generated, or just best your last score. Scoring is the combined RGB difference between your current color and the goal color. THE CLOSER YOU ARE TO ZERO THE BETTER.
Every 100 points you score, it adds a minute to the clock.
You can find the live version here. Cloning this repository to your server should work fine on the root directory, however if you're cloning this to a subdirectory; make sure to update the links to the gifs in
js/app.js as follows.
"../assets/green_invader.gif" ---> "../<subdirectory_name>/assets/green_invader.gif"
- As a user I would like to move the spaceship. √
- As a user I would like to see my score in real time. √
- As a user I would like to see the color bar move up and down as I score. √
- As a user I would like to shoot the aliens to score. √
- As a user I wold like to reset my game at the end. √
- If possible add a live timer to the game. √
- As a user I would like to share my score with my friends on facebook. x
Very rough sketch, still need to decide on share screen layout.
I first tried using a game framework called melonJS. But it abstracted too much of the coding for the game.
Starting back from fresh, and doing the needed research; I got my hands dirty with just JQuery. Which turns out to be all I needed.
- It kind of half works on mobile. The scaling is a bit off and movement is choppy with the touch screen.
- The collision system is sloppy at best, but the player should double tap to compensate.
- The game will load correctly. However resizing the window will break the positioning of enemies.
- Currently the start screen and the end screen are very misaligned.
- Sometimes the start screen's text will overflow.
Some of the Important Notes:
- Shoutout to Trevor Preston and this link for helping me understand random element spawning.
- I also got the function for identifying collisions from here.
- I got the meta tag to stop phones from zooming with multiple taps from Here.
- The function to check if the page is being loaded on a mobile phone.
- And of course for all my centering problems.