For my first project, the requirement was to design and build an in-browser game using HTML, CSS and JavaScript (jQuery library used). Find'ems was a game I wanted to create for my niece and is based on Where's Wally. The player has 30 seconds to find as many items as possible. The game features 2 levels with specific win conditions.
View and play the game here for best playing experience (the game was not designed for mobile).
Find'ems takes place in a 100% CSS-built and animated environment, with the room design changing on each level as the player progresses.
Level one gives the player 30 seconds to find as many items as possible. The items that the player has to find are randomly generated and displayed in the top right hand corner. If the player wishes to skip an item then they can do so by clicking on it. The player must find at least 12 items in order to move to level two.
The player must click on the item once found and another will appear in the top right hand corner.
If the player does not find at least 12 items in the time frame then they are able to try again and the level resets.
For level two, the scene, design and sounds change. The difficulty increases as the player is only given 20 seconds to find all 12 items.
If the player does not complete level 2 they're able to play again. If the player completes level two then they are presented with a Winner modal.
I am pleased with the final game. I aim to develop the game further with new levels, challenges and functionality. I'd also like to make it fully mobile responsive.
- Install dependencies with 'yarn install'
- Launch app with 'gulp'
- Make sure you have installed 'gulp-cli' globally - 'yarn global add gulp-cli'