Inspiration
Our inspiration came from magics and little children loving to play games. My teammates and I grew up playing simple games that could easily be accessed by the internet. We wanted to build a website for kids to play games on it. Since the theme was 'Magic', we decided to come up with some game ideas or tricks related to magic. Therefore we have come up with a website named "Hocus Pocus".
What it does
Hocus Pocus has a collection of simple interesting games. It was made to attract any age group but mainly kids and bored teenagers. The first page has the title of our website and a button to start the games. The second page is the welcoming page. It has instructions and a little trick to attract the player's attention. After completing this box trick activity, the player can either refresh the page to play again or go to the next game. The next page has a game called 'Magic Potions'. The player can scroll through the potions and has to choose the right one to put into the witch's pot. If they get it correctly, it alerts the player to go to the next page. This page also can be refreshed by clicking the restart button on top. The last page has a card trick named 'Fortune Teller's Card Game'. On this page, it asks the player to think of a card and that it will read the player's mind and remove that card from the deck. This website will have more pages and games in the future. However, we came to build these four working pages in 2 days.
How we built it
We built our website using HTML, javascript, and CSS. We first did a lot of research about magic tricks since it was our main theme. After coming up with a few ideas, we divided our workload so we each built one page (one game/trick). Then at the end, we linked them together and hosted our final site. We got usable free images for our website. We used GitHub and Discord to share codes and communicate while working on our portion. They were very useful when updating each other's code and edits.
Challenges we ran into
For all of us, this was our first time using these languages so it was very difficult to learn and complete the project at the same time. We had to do a lot of research and help each other out to build our site. Therefore it was hard to add even a simple function or design into our website and to host the project at the end. One of our biggest challenges was the slide show function. On the welcoming page, we wanted to put the instruction as a slide show. There was difficulty building this part because it is embedded with the script and we have minimum experience. The research was very much needed to understand how the codes work. Most of the time our codes were unresponsive and therefore debugging was also difficult. Our next challenge was in our 'Fortune Teller's Card Game' function. This function was supposed to change images when the button is clicked. Another challenge was putting in background music. It was hard to wireframe and the audio file kept getting stuck and did not play at all. However, we were able to solve these problems and make our website the way we planned.
Accomplishments that we're proud of
We are proud that we started with no knowledge about javascript, HTML, and CSS and still got to finish our project in time. Even though one of our teammates was new to Hackathons and started the competition with no preparation, we are proud that none of us has given up in the middle. We are also proud that we were able to work as a team. We all participated and suggested our ideas. We each accomplished our every part and we were there to help each other when somebody was facing a problem.
What we learned
We have learned many things through this competition. We have learned new languages and how to build a website and games. We are also able to host a working website. We learned ways to work and communicate as a team in order to gain the best result. Even though we are satisfied with our result, we wish we had more knowledge of these languages and time to plan our project. Building a website from scratch was definitely a huge challenge for us.
What's next for Hocus Pocus
Hocus Pocus currently only has three tricks/games. However, we are planning to continue building and adding to this project. We will come up with more games and ideas to add on. We are planning to make it look more aesthetic and put more time into the designs. We would also like to add new functions to become more familiar with these languages and codes. The continuation of this project will help us gain more knowledge and experience in the future.
Log in or sign up for Devpost to join the conversation.