Roach Motel

• 

  The Roach Motel's main screen

Inspiration

Early in the hackathon period, I knew I wanted to submit an entry, but didn't have any big ideas that I felt good about. But then, as I was driving through Pueblo, CO, I noticed a motel sign off the side of the road. I couldn't help but think how the retro-styled sign (probably from the 1950s or 1960s) had an amazing retro look and how it'd be interesting to include it somehow in whatever it is that I created.

From there, I continued to imagine how to use that sign in a game. By the time I had reached my destination, I had settled on the essential gameplay and only needed to decide whether it'd be themed around roaches (drawing from the roach bait product and the commercials I recall seeing when I was a kid) or creepy clowns (inspired by the Clown Motel in Tonopah, NV. I finally settled on the roach them and went to work on the skill.

What it does

Roach Motel presents a 9-room motel to the user. Behind each door is one of four different roach characters or possibly a health citation. Following gameplay similar to the classing "Concentration" game, players open doors, one at a time, to reveal the occupants of each room. If a pair of matching roaches is found, those roaches are evicted from the motel. Evict all four pairs of roaches and you win! But if you find a health citation, then the doors close and the health citation swaps rooms with a non-vacant room. Reveal three health citations and the game is over.

How I built it

Because the original inspiration for the game came from an actual motel sign in Pueblo, CO, I started by designing the graphics for the sign. I took a little liberty with the design to introduce some fun elements to it, while still maintaining the overall look that inspired me initially.

I used OmniGraffle to create all of the game graphics (because I'm already very familiar with that tool for creating graphics). And I relied on the APL editor available in the ASK Developer Console to piece together the graphical elements into the User Interface that would front the game.

In addition to visual elements, I also used APL for Audio, along with some sound effects from the Alexa sound effects library to add a bit more character to the game.

Once the essential UI elements were in place, I wrote the game logic in Javascript using VisualStudio Code. As progress was made, I would push the latest for testing using the ASK CLI. I frequently tested the game at various checkpoints using the simulator in the developer console, on an Echo Show 2, and on a FireTV Stick.

Challenges I ran into

The biggest challenge I faced was creating a UI with APL entirely from scratch. Although I had done some work with APL in the past, I had never created anything quite like this. It definitely stretched my skills with APL and APL-A.

Perhaps the biggest challenge I faced was precisely placing UI elements relative to each other so that they'd appear where they were supposed to appear regardless of the resolution of the device. I had some help from the APL channel on Slack that guided me toward using AlexaBackground and AlexaImage responsive components along with vw and vh spacing and scaling.

Another challenge that I faced was with regard to linking to saved APL documents. At two points during the development of my skill, my saved APL document completely disappeared. Fortunately, I had exported the APL document to my local machine, or else all would have been lost. In the end, I stopped using linked documents and just deployed the APL documents along with my skill code.

Accomplishments that I'm proud of

I'm rather proud of how much my APL and APL-A understanding has grown during the course of this hackathon. I'm also proud of how I've created something with what I believe is a clever and compelling theme around an otherwise simple game.

What I learned

Again, my understanding of how to craft APL and APL-A documents has grown tremendously.

What's next for Roach Motel

All of the graphics created for the skill were done rather quickly and relied on my own limited artistic skills. I'd like to take a bit more time to refine the imagery or find someone else to help me produce better images.

Similarly, I originally had plans for custom voices for each of the roaches in the hotel, provided by "voice actors" (e.g., me and my family). But as I ran short on time, I decided to use Polly voices instead. These are fine as a starting point, but don't fully capture the personality of each of the characters. When I upgrade the imagery, I also plan to upgrade the voices.

I also initially had in mind a title screen and an animation to transition between screens (e.g., between the title screen and game screen, between game screens when starting a new game, etc). Time didn't allow me to do that, but I'd really like to work it in at some point.

Finally, I'd like to consider adding some timer or count challenges to the game. That is, give the player goals to beat such as clearing the motel within a certain time or within a certain number of moves.

Built With

• apl
• apl-a
• ask
• javascript