Apply OOP in Javascript to create a classic arcade game: the Frogger. This is one of the projects for Udacity Front-End Web Developer Nanodegree Program.
In this game, you have a Player and Enemies (Bugs). The goal of the player is to reach the water, without colliding into any one of the enemies. The player can move left, right, up and down. The enemies move in varying speeds on the paved block portion of the scene. Once the player collides with an enemy, the game is reset and the player moves back to the start square. Once the player reaches the water, the game moves to the next level. The player can collect gems to increase their final score. The player wins when the level 15 is reached.
The player can:
- Move up, down, left, right using the arrow keys or the WASD.
- Reach the water to get to the next level.
- Collect different types of gem.
- Win the game by reaching level 15.
- Or lose the game by hitting a bug, a suicidal act!
Live Demo on Github Page
- Handle key inputs from the player:
- Arrow keys and WASD to move.
- Spacebar to restart the game.
- Player cannot move off screen.
- Check collisions between the player with other objects:
- Bugs/Enemies: the player will lose the game.
- Rock: the player is blocked by rock and has to circumvent it.
- Gem: the player will collect it and earn more points.
- Bugs/Enemies cross the screen.
- Bugs/Enemies are randomly spawned on different stone lanes and with different speeds.
- Rocks are randomly placed on the middle grass lane.
- Gem are randomly generated on the stone lanes.
- Blue gem: appears in all level and is worth 30 points.
- Green gem: appears from level 6 and is worth 40 points.
- Orange gem: appear from level 11 and is worth 50 points.
- There are 15 levels, each of which is worth 60 points.
- Add more lanes to the map.
- The player's character changes for each level.
- Pretty user interface to show the stats.
- Pretty scoreboard when the game ends (either the player wins or loses) to show how the player performs.
- Custom fonts, image assets and titles to make the game more interactive and interesting.
- Add sound effects for bumping into an obstacle, collecting gems, reaching the next level, and winning the game.
Clone the repository:
git clone https://github.com/minhkhang1795/frontend-nanodegree-arcade-game.git
Open index.html to play!
- Project template:
- Frogger text title:
- Wood block image asset:
- Mario sound track:
Copyright 2018 Minh-Khang Vu
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.