This is a variation of the classic Frogger arcade game. In this project HTML <canvas> is used to render game screen and characters. To abstract out the functionaliy of player and enemies in the game, ES6 classes are used.
The project is based on starter code as well assets from this repository.
Goal: The goal of the game is to get to the sea without being hit by any enemies(bugs).
Game Controls: Use up, down, left and right arrow keys to control the character's movement and avoid enemies.
Lives: The player has 3 lives to complete the game and with each collision with the bugs a life is lost and player position is reset.
Character: The player can also choose a character from five different sprite options.
- HTML Canvas -
<canvas>element is used to draw graphics, on the fly, via JavaScript. - JavaScript Classes - Syntactical sugar over JavaScript's prototype-based inheritance.
- CSS Flexbox - CSS layout module to design flexible responsive layout structure without using float or positioning.
- Google Fonts - A library of 900 libre licensed fonts
- gulp Plugins - browser-sync, gulp-prettier, gulp-autoprefixer
Start playing here.