Love Monsters! is inspired by many fun and challenging arcade or midway games. It uses a simple premise but gets more challenging the longer you play well.

Our goal was to build a game that anyone can enjoy from any age group or physical ability to create a more inclusive game experience. One tap or click is all that is required to play Love Monsters!

We envisioned a hand-painted world that is bright and full of animated life, with adorable characters that you just want to squeeze. The themes and settings are built such that all members of your family can enjoy it as well.

The traditional way to make games is to publish them onto one specific platform or hardware. We wanted to move past that limitation by offering a game that was fully playable on any device you own- be it a smartphone, or a high-end desktop.

What it does

Love Monsters! is a deceptively simple game, but the challenge is real! Your goal is to collect as many LOVE POINTS as you can per game session to get the highest score on the leaderboard.

You can accomplish this by waiting at the opportune moment to TAP or CLICK the screen when the BLUE HEART and PINK HEART are aligned. Each time you TAP or CLICK, you earn a LOVE POINT and the next round will begin, this time, a bit faster than before.

You can earn more LOVE POINTS by TAPPING or CLICKING right when the HEARTS are PERFECTLY aligned to get a 2x BONUS. Additionally, you can rack up COMBOS should you clear the board multiple times before the BLUE HEART resets its movement. These provide MASSIVE multipliers that can increase your score substantially!

How we built it

Love Monsters! was built using the EditorX platform by Wix. Without the built-in Wix APIs, a lot of what you see would not be possible. We are using the following API’s:

Wix Members: While Love Monsters!, can be enjoyed without a membership, you’ll definitely want to sign up, for free, to create an account. By doing so, you’ll get to save all your progress, view your rankings in the leaderboards, and unlock new costumes! We use the Wix Members API to authenticate each player and push their save states to the server. All rankings and achievements can be viewed by each member.

Wix Window: The entire game can be played right there on your screen without having to open up new pages and load new areas. With Wix Window, we are able to set up Lightboxes so that all interactions with the game are seamless and fast. We use the Wix Window API to determine your device, and update content in the game, based on your choices in the Lightbox Menus.

Wix Storage: Don’t want to sign up and just play the game? Sure thing! Want to select a Costume and play that during your game session? Great! We use the Wix Storage API to temporarily store data so that you can enjoy the game without constantly having to re-select your preferences.

Wix Animations: We believe in the age-old saying “Show Don’t Tell!” Love Monsters!, is visually dense, with many moving elements that define an authentic gaming experience. Our goal was to make the game look like you’re looking outside a window. The entire landscape is driven by the animation system to tell a charming story. Players can expect to be treated to amazing hand-painted art with layered components to give the game a 3d look. Every interaction has some form of movement which provides tons of feedback to the player. Wix Animations API was used to drive all the game elements, including the game board. We even wrote a custom tick function to drive the animation system so that Love Monsters! feels like an actual video game.

Wix Data: If you’re curious about where you rank in the leaderboards or want to browse the Monster Closet to try on a new Costume, you’ll be treated to clean navigational menus with full gesture support built right in. None of this would be possible without the Wix Data API because everything you see is stored on the backend and pushed onto the screen for your enjoyment. Wix Data was used to store all backend code, including Costumes, Membership Data, All 4 Leaderboard rankings as well as interactions with Repeater elements.

Challenges we ran into

Wix provides a framework for endless possibilities and we were able to get 100% of every feature we wanted in the game without having to compromise our vision. All Wix documentation is fully fleshed out which made it easy to drag and drop example code snippets into our project.

Most of the challenges came down to finding small workarounds for something not expected. For example, we wrote an Audio System using HTML to override Chrome limitations on concurrent sounds. Additionally, we wrote our own tick function to handle dynamic gameplay so that the experience of playing Love Monsters!, is exactly that of a game built as an Installed Application.

Accomplishments that we're proud of

We are absolutely thrilled to demonstrate all the unique features we packed into this game that not a lot of engineers thought about doing. These include:

Custom Audio System: Each sound can play concurrently, with dynamic music and randomized audio cues. This includes all the landscape, the game, the menus and the monsters themselves! Amazingly, each sound is never the same, with slight variations each time it is played. Additionally, the audio feedback loop is incredible, with pitch-ups and downs that sound like you’re playing an arcade game from the past. The user will really feel like the world is alive when playing Love Monsters!

Custom Tick: A lot of web games may feel static, or feel like something is missing- so we set out to elevate the web experience using the Editor X platform. In Love Monsters!, all gameplay is dynamic! We wrote our own tick function to simulate real-time movement and interactions. By creating this feature, all animations respond to randomized spawn locations and even allows for the main gameplay loop to run perfectly!

Custom Art and Animations: All visuals in the game are 100% hand-painted and utilize a layering system to really “Wow” the player!

Mobile Share: We wrote a custom mobile sharing feature right into the game! You can send this link seamlessly on any device, whether on a desktop or any variation of mobile! It works very well and is a must-have for any game built for modern audiences.

There are a lot of extraordinary details hiding in plain sight! Each monster blinks and breathes with a firm puff! Occluded Light rays in the forest shimmer and dance! The stream moves delicately beyond the horizon. Gorgeous flowers fall from the sky. Even the bees are enjoying a casual chit-chat about honey. All these animations use a dramatic technique to sell the experience.

What we learned

We learned a lot about what is possible- and that is, if you throw enough determination at a problem, you’ll eventually find a solution. And that was our experience this month. We knew there were going to be some limitations, but we solved 100% of them by thinking outside of the box and engaging with the Wix community.

This Hackathon was a great test of attrition for our team and what we are capable of doing. We had so much fun laughing at the characters we created and falling in love with the simple but great gameplay that Love Monsters!, provides. We were also reminded that the joy of making a game for all players is an emotional, but thrilling experience.

What's next for Love Monsters!

For now, we plan on enjoying the fruits of our labor of love. We see a lot of hope and magic in our kids eyes when they play the game with their friends. We hope that kind of light and spirit helps shine onto other players as well.

Built With

Share this project: