This is a 2D frogger like game build on top of HTML canvas. In this game the player should reach the water, avoiding bugs. Every time it reaches its goal, the player goes to the next level, where there are new and faster enemies and some rocks blocking the path. The player can also collect some elements, like diamonds, stars, keys and extra lifes, in order to increase his game score. The game is won when the player finishes all game levels.
Play it online here!
Although not necessary, this implementation uses RequireJS to improve code readability. RequireJS is an AMD module loader, and it helps to visualize the dependencies between the entities in our code. For the sake of simplicity, there is a copy of version 2.3.3 of the library in the repository. With the proper changes, the game can still run without it.
This game is fully implemented in client-side JavaScript, so you just need a browser with HTML5 support. In order to run this game, one can follow the steps below:
-
Clone project:
$ git clone https://github.com/saulotoledo/classic-arcade-game-clone.git
-
Open the file
index.html
in your preferred browser.
- M key: Mute/unmute game.
- Mouse move or up/down arrow keys (↑ ↓): Select menu item;
- Mouse left click or Enter key: Use menu item;
- Mouse move or left/right arrow keys (← →): Select character;
- Mouse left click or Enter key: Choose character;
- Arrow keys (← ↑ → ↓): Move the player;
- Mouse click on sound icon or M key: Mute/unmute game.
- P key: Pause/unpause game.
- Mouse left click or Enter key: Go to intro screen.
- Source code (except
require.js
,engine.js
andresources.js
): MIT License - Copyright (c) 2017 Saulo S. Toledo; require.js
: Check in their website or here;- Game assets,
engine.js
andresources.js
: Please check each author's distribution license.