Jonathan Bossenger has launched Dodge – a WordPress interactive game built on top of the WordPress Interactivity API, using HTML, CSS, PHP, and JavaScript.
The WordPress Interactivity API
The WordPress Interactivity API was announced by WordPress contributors last year. It allows developers to create interactive experiences within Gutenberg blocks and makes it easier to create rich, interactive user experiences, from simple cases like counters or popups to more complex features like instant page navigation, instant search, or carts and checkouts. The main goal of the Interactivity API is to provide a standard and simple way to handle the frontend interactivity of Gutenberg blocks.
It was proposed as a standard way system of directives, based on declarative code, to allow developers to add frontend interactivity to blocks. Directives extend HTML with special attributes that tell the Interactivity API to attach a specified behavior to a DOM element or even to transform it. It’s similar to Alpine.js, but explicitly designed to work seamlessly with WordPress.
The Initial Idea
Around three years back, he had a discussion with Jonathan Wold and Luke Carbis about using WordPress as a game development platform. He thought it possible as the WordPress frontend is the same as other browser-based games.
Jonathan started exploring game development with Godot, an open-source game engine and came across a game called Dodge the Creeps, in which your player character has to move around the screen dodging creeps. This sparked the idea of replicating Dodge the Creeps game using the Interactivity API within a WordPress block. And he succeeded.
Dodge
He has released Version 1 of Dodge now. It’s deceptively simple and the entire game is one single dynamic block. The players have to dodge the enemies to stay alive using the arrow keys to move the logo. There are options to start, stop and renew the game.
The WordPress Interactivity API handles player and game controls, while the WordPress REST API simplifies fetching and displaying the top 100 scores. The high score data is stored using Custom post types and post meta.
You can play the game for free without logging in. You can click cancel to play the game again and again or enter your name and save your score.
Dodge demonstrates the potential of the Interactivity API to build highly interactive websites, web apps and even online games.