Maze Race

• 

  The start screen showing the current highscore

• 

  When using a previously shared challenge link, this banner is shown

• 

  You can either create or join a game using a 3 character long code

• 

  While your opponent still plays a waiting screen is being shown

• 

  An animation shows wether you or your opponent has won the duel

Inspiration

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

• html5
• javascript
• velo
• wix