As I am new to using wix I was at first exploring what is possible to do with wix and velo (pretty much as I learned by now !), when I stumbled upon the onMouseEnter() and onMouseLeave() event handlers and immediately thought that I definetly want to build something using these handlers. After quickly sketching a simple prototype I realized that I wanted to add some more functionaly so I switched to using custom elements and ended up with MazeRace.

What it does

In MazeRace you need to follow a predrawn path with your cursor, while the travelling speed increases. So if you are playing solo you are trying to achieve a great highscore. But just playing alone wouldn't be fun and the need for competitiveness led me to first introduce a share function to the game, where you can share your achieved score for them to try and beat it.

And to finally make it even more interesting you can have a live duel with a friend. In Duel Mode there randomly appear powerUps which can be used to sabotage your opponent or spy on them. In the end you will see a tension creating animation of your scores, which will show if you won the duel!

How we built it

The base of it all is Wix, I used EditorX to edit my page. Most of the things you see on screen are basic wix-components, but to achieve more complex functionalities there are also some custom elements, i.e. the maze itself or the score animation in the end. The maze itself is build using a HTML5-Canvas, which are layouted on the wix page by using a repeater. As soon as a new repeaterElement loads the interface is set, which determines what kind of shape to show. If the player leaves the path a customEvent is sent to let the veloCode know that the player lost!

Challenges we ran into

Most of the challenges I ran into where related to me not using correct ids and wondering why events didn#t go through. But other than that it went relatively smooth, however I had some minor problems in setting up the canvas and checking wether the player has left the path.

Accomplishments that we're proud of

I am definetly most proud of just having a finished game. But I also really like the way the game looks and feels in the end.

What we learned

I learned on how to effectively combine native wix elements and more advanced custom elements to achieve an extraordinary look. I also learned how to use the wix-data and wix-realtime api. Both were critical to my project.

What's next for Maze Race

As the time frame was very short I was not able to finish everything I planned on finishing. The game is currently missing a mobile optimised version, which would have used a html-slider instead of the cursor. I also wanted to add some more different powerUps to make the game more interesting.

Built With

Share this project:


posted an update

Just noticed a small bug after submitting: The text when accepting a challenge via a link always shows that you have beaten your friends score, I deleted the additional check there :( But you can see if you have really beaten your friends score if the challenge banner disappears

Log in or sign up for Devpost to join the conversation.