Al-ZONE

Start Menu
Memory Game
Math Game
Info Page

Inspiration

Since the topic for this year is health, we wanted to create something that can protect or fortify the health of others. We know that Alzheimer’s is a very tragic condition and can be very devastating for families, and we wanted to contribute to their health and well being by slowing down its development.

What it does

Our project helps slow down the development of Alzheimer's disease, a brain disease affecting elders that slowly disrupts their brain function over time. Our project does this by strengthening the user’s memory, motor skills and hand-eye coordination through a memory game and a math game. By adding a score to these exercises, we are encouraging elders with the condition to willingly train their brain on their own by having fun.

How we built it

We discussed how we are going to divide up the workload between the three members to allow for maximum efficiency, and finally decided on including 2 mini-games, with two members working on each one and the third on the menu screen as well as acting as a link to connect the other components.

Memory mini-game: This component was programmed in VS code using p5.js. I created a ‘brick object’ that creates a certain number of buttons (depending on the level) on random locations in a grid. Once a button is clicked, the code checks whether the number you clicked on was in sequence. You have to try to guess the order in which you click the numbers to clear the level!

Math mini-game:

This component was coded in Replit using p5js. First I made an additional generator function that allowed me to change the max value it was able to generate, Then I modified it slightly to make a multiplication one that was able to do the same. I pieced everything together with game states and added some visuals.

Menu: First used Figma to design a website template for the project and then exported all images to use in html and css files that was done using VScode.

Challenges we ran into

Some examples of challenges that we ran into includes:

Learning how to use HTML, css and Vscode in a short time period and getting everything done on time. As well as how to transfer my designs from Figma onto an actual working HTML file. We had issues with scheduling when to work on the hackathon without overlapping with other events. As beginners we also had to learn how to use Github to pull and commit changes so we could all collaborate.

Accomplishments that we're proud of

We are really proud of our final product and we are impressed with its looks as well as functionality. This was our team’s first ever hackathon and we are proud of finishing our program in time.

What we learned

This Hackathon was our first such experience and a very valuable one. We learned many things, like how to include a user input, how to use HTML elements in Javascript, as well as learning HTML and CSS. We also learned how to deploy websites.

What's next for Al-ZONE

In terms of additions, we plan to add more mini games and also more complex ones such as word games. Adding more in-game rewards to make the program feel even more ‘gamey’ is another idea. Including more information on a separate tab regarding Alzheimer’s could also be helpful.