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 beautifully 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. Instead, it achieves its visual flair through CSS3 3D transforms. The card flip effect is handled by dynamically applying active or active3d classes, utilizing CSS rules like -webkit-transform-style: preserve-3d and transform: rotateY(180deg) to smoothly rotate the tiles. It also uses Modernizr (v2.6.1) to detect if the user's browser supports these 3D CSS transforms and falls back gracefully if they do not.
The JavaScript architecture is strictly object-oriented, utilizing the Module Pattern to keep the global namespace clean. Interestingly, the developer implemented a strict JavaScript interface structure—credited to authors 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 120x120 pixel 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 (version 3.2.2), strongly indicating this game was deployed as a Facebook Canvas or Page Tab application.
Furthermore, the game features a clever anti-cheat mechanism meant to secure prize giveaways. Instead of simply sending a standard "game won" payload to the server, the MemoryGame class actively records an array of user interactions. It logs the exact X and Y mouse coordinates (clientX, clientY, offsetX, offsetY) and the precise timestamps of every single click the player makes.
Upon completion, a custom gameOver event is fired containing this detailed interaction log, the generated card order, and 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 is prepped to handle actions like register and sendAnswer, explicitly noting a validation step to ensure that a human—not an automated bot—actually moved their cursor and played the game legitimately.
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.
Top comments (0)