Simone Seagle

Simone Seagle

Independent Web and Educational Software Developer

Read More


Electric Playhouse: Website Mini-Games

Electric Playhouse: Website Mini-Games

July 21, 2020 Simone Seagle

Earlier this summer I had the great opportunity to build some rich mini-games for Electric Playhouse's front page. It was, as usual for Electric Playhouse, a highly creative and fun project. I care very much about bringing interactive experiences to the web because you can get such a wide audience and there is just so much you can do beyond the typical website. WordPress allows you to do a lot of exciting work within your existing website when you use block editors like Elementor - which was the backbone of this web page. Each of the sections of the page (other than the slider) was fully written in vanilla JavaScript using the canvas element, keeping them lightweight, simple to deploy, and easy for the other developers on the team to edit if necessary.

Electric Playhouse's art director had the idea to split the front page into four sections that would showcase the four main sections of their in-house experience - dining, playing, special events, and shopping. She and I brainstormed to create one fun experience/mini-game for each section.

Cafe mini-game

The idea behind the Cafe game was to be kind of like an interactive slider where you ate through a few different types of food that Electric Playhouse offers, and the Play experience is a nod to a few different of the games you can play if you visit.

Play mini-game

The Events experience is another nod both to the traditional slider, and a way for staff to easily swap out new events as they come in.

Events experience

Finally, the shopping game (?) is just a fun way to see the awesome designs Electric Playhouse has to offer in their merch.

Shopping Mini-game

One tricky part of this whole thing was managing performance. The games have a large amount of work to do for each frame, and when they are all running at once, the frame rate drops way down. I had to manage all of them and only render one game based on the scroll offset of the window.

Pulling off the overlapping slanted sections required some fancy footwork between the CSS and what Elementor can do out of the box, and it was very time consuming to make sure the slants worked on every possible screen.

All in all, it was a blast and I would love to bring more experiences like these to the web.