INSTRUCTIONS
- In order to play the game click this link or copy/clone all the files in your computer and double-click the ìndex.html file.
- The player can move left, right, up and down. The movement of the player is done with the four arrows keys (up, down, left, right) or the corresponding letters W, S, A, D. The enemies (bugs) move in varying speeds on the paved block portion of the scene.
- The player must reach the water without colliding into any of the bugs.
- The player starts with 3 points & 5 lives.
- Every time the player collides with a bug they lose 1 point and the character moves back to the start position. Every time the player reaches the water they get 2 points and again the character moves back to the start position.
- The game is won when the player reaches the score of 10 points.
CHALLENGES/EXTRA KNOWLEDGE
- Adding classic arcade sounds
The simple structure:
audio.src = 'sounds/xxxxx.wav';
audio.play();
worked great for the sound I wanted to play when an arrow key was pressed. However, when I tried this same method with the reset() method, I kept getting the exception:
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
DevTools suggested to look at the page but it was not very helpful.
I then found a different way to make the audio play without promises. I added a class audio in the index.html file with the sound I wanted to play and called the audio file with:
document.getElementById("audio")
and the issue was resolved.
- The keyup function
I found a nice explanation on page http://www.javascripter.net/faq/keycodes.htm and I added succesfully the a, d, w, s keys, plus the Esc key to the allowedKeys variable. The player can now use the letter keyboard keys instead of the arrows and if they hit the Esc key, the game is restarted i.e. the character returns to their starting position and the scores & lives are reset.
SCREENSHOTS
- A screenshot of the game:
- Winning the game:
- Losing the game:
FUTURE UPDATES
- Modal in the beginning for the player to choose character
- Scoreboard with score & lifes left
- Timer
- Levels of difficulty
- More & better sounds
- Add instructions in the game via a modal/button
CREDITS
- Sounds
The Motion Monkey Free Retro Arcade Sounds Pack v1.0.5
All sounds are original recordings by The Motion Monkey. Learn more at: http://www.themotionmonkey.co.uk/free-resources/retro-arcade-sounds/
- Collision detection
Some helpful links to understand the logic:
Collision Detection Using the Separating Axis Theorem
Collision detection - Part of the tutorial "2D breakout game using pure JavaScript"
Ben Cunnnigham's YouTube video
- Code to prevent window from rolling up and down, from ncaron
Found via ricardobossan.
-
Font: Mina.
-
For the modal in the end, I used Sweetalert.
LICENSE
MIT License.
Copyright (c) 2018 Dimitra Karamperi