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.