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

Block-a-saurus Embeds a Side-Scrolling T-Rex Game via the Block Editor wptavern.com3 months ago in #Web Design Love37

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. 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. 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. 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.  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply