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
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.