amaze

Landing page
Game screen
Score
Leaderboard

Inspiration

We have used Wix earlier and knew the awesome power it holds, letting people make amazingly beautiful websites without having to code a thing! Well, this was our forever reason to use it, but since the introduction of velo and the extra features it carried and the essence it added to wix, we were very excited when we learnt about this hackathon. We were keen on making some really cool game with some really cool animations and logic, and wanted to see if its feasible and easier to do as compared with vanilla javascript. Basically we were really wanting to try out our hands on velo by wix and utilise its features.
Now, from the game point of view, our aim was kind of defined very well in mind. We wanted to make something that's kind of sneaky and tricky to play with, we wanted to make our algorithm really indestructible and something that gives the fun of playing the games, as they're intended for. That is when we decided that we can include tiny bits of maths and power our game with arithmetic and the world around it. So, a classic game + maths was our go to combo, and that's how we created amaze!!

What it does

It's a classic arcade game, which almost has the same rules as any whack-a-mole game. But one thing makes it very different. Also, if you havent played whack-a-mole ever, its basically a set of holes from where you get mole rats (not real of course) to bump up, and you've to hit them to earn points. Now normally, a played gains equal points for the moles they hit. But our game comes with a twist. In our game, there is a mathematical expression attached over each hole, as shown in the screenshot.
The player would need to evaluate them as fast as possible and only hit the mole rats where they can gain more points. Each set of game lasts for 60 seconds, ie a minute, and in those 60s, players would need to hit the expressions with highest gain values. Remember, the points can reach any number, from negatives till positives. The aim is to get as more points as possible, using your reflexes and math skills. Also, we've made it compulsory for the user to sign in through our game before they can actually play, to keep track of points and to ensure that the data on the leaderboard isn't manipulated. The leaderboard shows up the top 10 global scores of all time by users.

How we built it

Amaze was built using a variety of tools. We used Wix with velo to make the whole structure of website and getting it to work, javascript as our primary language to code the logic and maintaining states and for routing purposes, canva for getting these awesome graphic components. Let's dive deep into how we utlised the features provided by wix and velo.

First of all, we started off with a simple template that was provided by Wix. We modified it to however we wanted it to be, and then began the actual work. We wanted to make it compulsory for the user to login/signup before playing the game, for ensuring that the leaderboard isn't being manipulated. For that, we used Wix's Members Area and integrated the login/signup forms and states. We checked on the game screen if the user is logged in or not, if not, they were redirected to the login screen. After that, we wanted to make a basic setup or the game board. For doing that, we used Wix's famous drag and drop feature to put containers and images and added animations to them to make them look cool. Then we grouped the required containers and images to make them work flawlessly. Then was the time to start with the actual logic. We coded up a logic in javascript which made the game run for 60 seconds, and the timer was shown on the top, and in those 60 seconds, the moles would randomly bump us the holes and show up, and also at the same time we would show users a randomized small mathematical expression, both of which was achieved through velo's element show/hide features. As the user would tap on a mole, it would evaluate the expression and update their score accordingly, and hide that mole for that instance. This would go on till 60 seconds, after which the game would stop, and the screen would be redirected to the results screen. We used wix's wixlocation API for that purpose. And also, we passed the user's score as a query parameter. Meanwhile, in the background, the database API updates the user's score into the leaderboard table, as a key value pair of email and score, for eg {"email": "alex@xyz.com", "score": 500}, and then the user can view the leaderboard. To keep the load less, we intend to show the Top 10 performers, if the user is one of them, they'll see their name up on the leaderboard. We made the leaderboard with Wix's table and connected it with the database that we created for it. And that is how we created Amaze with love, code and Wix velo.

Challenges we ran into

Honestly, there were a number of challenges we faced while making amaze. One major hurdle was that although we used wix in the past, it was the first time that we decided to use its developer APIs and services through velo. It took us a while to get a hang of it, and meanwhile we did few mistakes here and there. It was a bit tricky for us to create the game UI, which is generally made on vanilla js using canvas and by accessing the DOM. But since its not possible in velo, we came across other possibilities such as using repeaters and showing/hiding elements based on logic. Repeaters were a bit tough to work with as well.

Accomplishments that we're proud of

We're proud that we were able to carry off our project idea and make it a reality. Never imagined we could utilise Wix for making a game but like it was really a nice experience to do so. Although we faced few difficulties, we are happy that we were able to finish it just in time and in a complete manner.

What we learned

We learnt a lot of things while making it, they include:-

Making sites with developer mode (velo) on Wix.
Connect Wix sites with database
Showing the data from database to users in real-time.
Adding login and signup functionalities and customizing user experience.
And a lot more about wix, velo, javascript and game development in general.

What's next for amaze

We would want to focus on making the user experience more personalized, working on its graphics, making it mobile responsive and launching app version for the same if possible.