Block-a-saurus Embeds a Side-Scrolling T-Rex Game via the Block Editor

Click to Play

It is no secret that I love testing out the sort of fun WordPress blocks that hark back to my early days of the web. I have written on the subject once or twice. Imagine my surprise when I came across a side-scrolling dinosaur game that users could simply plop into the block editor and provide something fun for their visitors to do.

Block-a-saurus is a simple game in which you play a T-Rex whose goal is to survive a course of obstacles such as jumping cactuses and ducking birds. To play, you merely need to control the T-Rex via your keyboard’s D-pad. It should also work via touch control on mobile devices.

The only bad thing is that I did not notice this gem eight months ago when it was first released to the public.

“When I started learning about blocks, I realized they could be basically miniature JavaScript applications,” said Keanan Koppenhaver, the developer behind Block-a-saurus. “I thought this was super interesting as opposed to how WordPress plugins relied more heavily on PHP, so I wanted to see what I could do with basically a blank JavaScript canvas and how that could enable experiences that would have been really difficult to do seamlessly pre-Gutenberg. It slowly went from a ‘Is this even possible?’ to ‘Let’s release it and see if it can inspire people to build something even more out of the box.’”

Give the game a whirl. Let us know your high score in the comments!

Using the Block-a-saurus Plugin

The plugin is straightforward. Once installed, it adds a new “Block-a-saurus!” block in the common blocks section of the block inserter. The block currently has two options under the block settings panel:

  • Dino Speed: Allows you to speed up or slow down the movement of the T-Rex in the game.
  • Mute Audio: Allows you to enable or disable the game audio.
Screenshot of the Block-a-saurus game in the block editor.
Inserting the Block-a-saurus block in the editor.

By default, the front-end output is bland. Do not expect a graphical powerhouse. However, sometimes, the simplest games can make for hours of fun.

Screenshot of the default output of the Block-a-saurus plugin game.
Default output of Block-a-saurus on the front end.

I wanted to spruce up my game’s design on the front end. Therefore, I first inserted a cover block with a dinosaur background, as can be seen at the beginning of this post. I then dropped the plugin’s block within the cover block.

This works well with a variety of image backgrounds. Plus, it allows users to put a unique spin on their game.

Screenshot of the block-a-saurus game with a blue background.
A custom background using the cover block around Block-a-saurus.

There is at least one missing piece that I would like to see in a future version of the plugin. It would be nice to integrate alignment options for the block, such as center, wide, and full alignments that are common with many other blocks.

On the plus side, the plugin developer took the few moments necessary to load scripts and styles only on pages where the game is in use. If you want to run the game, you do not have to worry about it loading unnecessary files on every page of your website.

Future Plugin and Block Plans

Currently, Block-a-saurus is still sitting at version 1.0. However, Koppenhaver has plans to add extra features to the plugin, such as saving high scores for logged-in users and potentially making the game playable in the backend. The holdup with admin-side playing is some JavaScript conflicts with the native Gutenberg controls.

“Work is moving along pretty steadily,” he said of new features. “It’s nice to have something relatively small and self-contained to work on in between larger client projects. The saving of scores has been the majority of the work so far, and I’m hoping to have that released in the next couple of weeks.”

Koppenhaver does not have any immediate plans for similar types of blocks. The plan was for this particular plugin to showcase a fun, one-off block. “I’ve seen JavaScript implementations of Snake and Tetris, which would be cool to see converted to blocks,” he said. “I might have to give one of those a try.” Perhaps Block-a-saurus is not the end of the road.

If he wraps up the work on a front-end, JavaScript-based saving feature for high scores, it would be nice to see that offered as a standalone package for other block developers to use. It would certainly make porting other games such as Snake and Tetris to the block system easier.

Koppenhaver and his team primarily work on more serious endeavors. “We have been working on some other block experiments to allow for things like integrating data sourced from Google Drive as D3 visualizations as well as a block to allow agencies to create better case studies by creating those responsive screenshot mockups you see everywhere and being able to create them completely in Gutenberg,” he said. “We’re very excited about the experiences the new editor has allowed us to create and are always experimenting and trying to learn more.”

More than anything, I want to see other plugin authors launch a few more games for the block editor.

7

7 responses to “Block-a-saurus Embeds a Side-Scrolling T-Rex Game via the Block Editor”

  1. Doesn’t work for me, tried Safari and Firefox and Chrome… I can click ‘Click to play’, and the black bar goes away, I hear the sounds, but don’t see anything but the background in that section. Thought you wanted to know. I don’t see any errors in the browser log though.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.