Breakout, Three Ways

submited by

Style Pass

2024-12-02 19:30:04

Decker is a flexible, malleable digital medium. At its simplest, you can build games and experiences in the vein of old Choose Your Own Adventure books by operating modal dialogs and menus to connect cards with buttons:

It is also possible to create much more elaborate toys and applications by using Lil to add scripted behaviors to cards and widgets. From time to time I get questions about whether Decker could be used to make more action-oriented styles of game. In this article we’ll explore several Decker-based takes on the arcade classic Breakout and use them to illustrate strengths, weaknesses, and tradeoffs of the platform.

Each of the approaches described here is also available as an interactive demo using the browser-based version of Decker, with links provided to specific demos in each section. This guide will assume some prior knowledge of Decker and Lil; refer to the main decker page for more tutorials and reference documentation, or The Life of Lil for another discussion of Lil programming pragmatics.

Let’s begin with an adaptation of an existing Breakout clone. The “2D Breakout Game Using Pure JavaScript” tutorial provided on the Mozilla Developer Network is a nice starting point. Some of the finer details like tracking score and lives are omitted here for brevity; adding them for yourself might be a useful exercise!