K.I.D.S x Publicis: Arkanoid in a PDF? How We Brought the Iconic Game to All Devices and Browsers

case studies

published

K.I.D.S x Publicis: Arkanoid in a PDF? How We Brought the Iconic Game to All Devices and Browsers

1 – The Challenge

The K.I.D.S. Foundation and Publicis approached us with an idea:
"We’re creating an interactive PIT (tax return) game based on Arkanoid to promote donating 1.5% of taxes to the Foundation. Can you help?"

It didn’t take much convincing, especially since the project presented an exciting technological challenge. One of its key goals was to use the PDF format to display the game. However, we quickly discovered major limitations: PDFs don’t support dynamic animations or interactions.

"Interactivity was particularly problematic, as only the native Chromium reader supports JavaScript. Additionally, the lack of debugging tools meant that errors weren’t visible in the console and could completely halt code execution."
— Vladyslav Prosolupov, Tech Lead at Panowie Programiści.

2 – The Solution

After analyzing the constraints of the PDF format, we decided on an alternative approach: building a PDF viewer that visually mimics a standard PDF document while allowing full freedom in implementing game mechanics.

To achieve this, we used Phaser.js, a JavaScript library for creating 2D browser games, offering advanced visual effects and dynamic event handling.

We initially created a prototype using AI, which looked like a classic PDF viewer but didn’t yet use Phaser.js. This Proof of Concept (PoC) helped us validate the project’s assumptions and demonstrate how client requirements could be implemented in a new environment.

With Phaser.js, we were able to:
✅ Design a user interface that mimicked a PDF viewer.
✅ Implement dynamic animations and block-breaker game mechanics inside the "PDF file."
✅ Add visual effects that wouldn’t be possible in a native PDF.
✅ Fully control user interactions, ensuring smooth gameplay.

3 – Optimization & Analytics

Beyond developing the game, we also created a server-side middleware system to dynamically redirect users either to the actual PDF file or to our interactive PDF viewer. The decision was based on the User-Agent header, following an 80/20 distribution:

  • 80% of Chromium users were directed to our interactive site.

  • 20% of Chromium users received the traditional PDF.

  • All mobile users and non-Chromium browsers were always redirected to our interactive site.

Additionally, we integrated the Plausible analytics tool into the middleware system, allowing us to collect data on what the end user saw on their screen—whether it was our game or the PDF version. This tool also enables us to monitor the number of page views, the users' country of origin, and the devices they used. 

4 – "Impossible" Doesn’t Exist: QA in 3 Weeks

The project timeline was just three weeks, requiring constant adaptation to evolving requirements and edge cases. Key challenges included:

  • Ensuring smooth gameplay across multiple browsers (tested using BrowserStack and physical devices).
  • Supporting keyboard, mouse, and gyroscope controls on mobile.
  • Blocking horizontal gameplay on smartphones.

Together with the K.I.D.S. Foundation and Publicis, we’ve created a unique, engaging experience that lets users "settle with pain" in an entirely new way. Players can immerse themselves in a fresh take on the classic game, where each broken brick gradually unveils the campaign’s message and encourages them to donate 1.5% of their taxes to pediatric oncology. And we encourage you to join in and settle with pain! 📌 KRS 0000793389 – Copy, save, donate. Have an idea for an innovative campaign that needs tech support? Let’s make the impossible happen together.

    link