The Death of Flash: Building a Facebook-Integrated HTML5 Memory Game in 2013
Source: Dev.to
Introduction
The year is 2013, and the web development landscape is rapidly shifting. Adobe Flash is on its way out, pushed aside by the rising dominance of HTML5, CSS3, and the mobile web. Brands are looking for new ways to engage users directly in the browser and on social media, leading to a surge in interactive web applications.
A perfect time capsule of this era is the html5-memory-game repository (version 0.8), a module‑pattern based memory‑game plugin created by developer arpad1337. Designed for a promotional campaign, this project illustrates how modern 2013 web technologies and object‑oriented JavaScript were utilized to build engaging, bot‑resistant social‑media marketing tools.
A Marketing Tool for the SuperShop Network
Digging into the repository’s assets, it becomes clear that this game was built for SuperShop, a prominent Hungarian multi‑partner loyalty program. The JavaScript application actively initializes a SupershopApp object.
The game’s tiles feature logos from major European and global brands participating in the network, including:
- Interspar & Spar
- OMV & OMV MaxxMotion
- OBI
- Burger King
- UNION Biztosító & Erste Bank
The back of the matching cards features the distinctive yellow and blue SuperShop logo.
Under the Hood: CSS3 and Object‑Oriented JavaScript
Built on top of the popular HTML5 Boilerplate framework, the game completely drops the need for Flash plugins. Visual flair is achieved through CSS3 3D transforms. The card‑flip effect is handled by dynamically applying active or active3d classes, utilizing rules such as:
/* CSS3 3D flip */
.card {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card.active3d {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}Modernizr (v2.6.1) detects whether the user’s browser supports these 3D transforms and falls back gracefully if not.
The JavaScript architecture is strictly object‑oriented, employing the Module Pattern to keep the global namespace clean. The developer implemented a strict interface (inspired by Ross Harmes and Dustin Diaz) to ensure the Item class correctly implements required methods like toString.
The core MemoryGame class acts as the game engine, mapping out a grid of 120 × 120 px tiles, tracking clicks, evaluating matches, and managing a built‑in millisecond timer.
Facebook Integration and Anti‑Cheat Validation
In 2013, promotional web games heavily relied on social integration to go viral. The repository includes the official Facebook PHP SDK (v3.2.2), indicating the game was deployed as a Facebook Canvas or Page Tab application.
A clever anti‑cheat mechanism secures prize giveaways. Instead of sending a simple “game won” payload, the MemoryGame class records an array of user interactions, logging exact mouse coordinates (clientX, clientY, offsetX, offsetY) and timestamps for every click.
When the game finishes, a custom gameOver event fires, containing:
- The interaction log (coordinates + timestamps)
- The generated card order
- The final completion time
This data is packaged as JSON and dispatched via an AJAX POST request to ajax.php using a custom XMLHttpRequest fallback wrapper. The PHP backend handles actions such as register and sendAnswer, explicitly validating that a human—not an automated bot—played the game.
By combining hardware‑accelerated CSS3 animations, strict OOP JavaScript design patterns, and deep integration with the Facebook Graph API, this memory game serves as an excellent snapshot of best practices in front‑end promotional web development circa 2013.