Overview
Depp Man Walking is an implementation of an image matching game implemented by Wade Wooldridge using the
following technologies:
- HTML: for the basic page layout
- CSS: for styling and revealing the cards
- Bootstrap: for the basic page grid layout
- JavaScript: for program control and event handling
- JQuery: for dynamic creation of the page with random cards
- YouTube iFrame: for playing video clips for matched moves roles
Features
Depp Man Walking includes the following features:
- 21 different Johnny Depp roles to increase replayability (a random nine at a time).
- An animated marquee that lights up and scrolls important messages "in lights".
- A Trivia Corner section that gives information about each role when it is matched.
- Links from the Trivia Corner to IMDB, Wikipedia, Rotten Tomatoes, and Netflix. These start
as the generic links for Johnny Depp, and switch on each match to the role-specific links.
- Budget and Box Office numbers that are revealed for each role when it is matched.
- Special "badges" for several roles that display awards that have been won.
Program Notes
These notes are for developers that want to follow the DOM or program flow.
The main JavaScript source is in deppscript.js, but the static data for the roles is held in
deppdata.js, which should be loaded first by the HTML.
The basic layout of each card is:
- .card - Contains the overall card layout.
- .front - Contains the role-specific card front.
- img - Contains the role image.
- .card-text - Scrolls up Budget and Box Office text.
- .back - Contains a general card back to hide the front until clicked.
- .special - Contains a div for displaying badges and role-specific special
animations.