ICE-BREAKER

LeaderBoard
Create Multiplayer Game room
Host lobby
Players Join Room
Players lobby with chat
HangMan Game
Snake Game
Maze Game
Dino Game

Inspiration

Our project is about a gaming website to be used for ice-breaking sessions, which consists of arcade games such as Maze, and Jumping Dinosaur. We choose to develop this application as all of us felt that these childhood games are forgotten by many people. We also felt that schools have boring ice breaker games that are also sometimes awkward during freshman orientation of camps. And, Gaming is good for de-stressing, which is helpful for ice-breaking sessions as it helps relieve some of the anxiety. If you have noticed, these games in our application are hard to be found and played online as they are usually played on paper or offline.

What it does

A gaming website to be used for ice-breaking sessions, which consists of arcade games such as Maze, and Jumping Dinosaur. Players can play either in single-player or multiplayer mode for all the games.

How we built it

The whole website is built using JS, HTML, CSS, Express Framework, ReactJS, SocketIO, Cloudinary, and the database is Postgres SQL. For games, we built it using mainly javascript, HTML, and canvas. We search online for guides to make the game, and with our understanding, we make and improvise the game to meet our needs. We use the SocketIO library to make chat features for the waiting room and also all the multiplayer games.

Challenges we ran into

Yizhou The challenge I faced during the development of the application is integrating react into the website. React is very new to me as I did not use it before, it took me quite a while to understand the logic and how to apply it to the website. Implementing react is not as easy as I thought, it requires me to break down a feature into multiple components and the difficult part for me is how these multiple small parts are joined together to form a feature. Other than react, I also learned and implemented SocketIO for the multiplayer game on the website, the difficult part is where I must work with multiple files which sometimes confuses me and makes me hard to debug and troubleshoot when there is an error.

Shayaan The challenges faced include trying to adapt to React, as I had not done it in a long time, and I was trying to figure out how exactly to apply it to my website. However, I was able to figure it out, which was good. Another challenge I faced was trying to do up a D3 graph, as first I had to handle the inputs for D3 and then, also how to make the graph show, which due to careless mistakes also, (such as spelling errors:///) it took a while to do. Another challenge I faced was finishing everything quickly as due to the above reasons it held me up quite a lot, so I had to try and rush and complete it

Joel The challenges I have faced were using Cloudinary and adapting components to React, as Cloudinary was a cloud space to store images, videos, etc and I have not done react in a while. How I overcame my challenges when using Cloudinary was to read the document thoroughly as well as watch some videos on how to set it up to the backend and display it using Cloudinary itself. As for React, I was not too sure about what I am doing but with the help of my peers, I was able to understand what I’m supposed to do.

Ziyang The challenge that I faced was finding suitable packages/modules for the project, most of the React packages that have useful features that we could benefit from are limited to the non-babel compiler version of React, and so we had to search for packages that were available through CDN links and such. Fortunately, most of the packages that were needed for our app like Socket were available via CDN links so we could at least finish the multiplayer

Accomplishments that we're proud of

We are proud of the 4 games we created and also making the 4 games in single and multiplayer modes.

What we learned

As a team, we felt that working in a team is not easy, it requires us to be highly cooperative and communicates with one another in the team. We must constantly update one another on our progress to keep everyone updated and make sure that we are on the same page. We also learn to provide support for one another, as in a team not everyone is very good at coding, hence there may be times when we must explain certain parts of code or features to those who do not understand. In conclusion, as a team, we felt very happy that we have the opportunity to work as a team and the experience we gained from this is priceless as it kickstart our journey to develop an application as a team, which we will be working on frequently in the future.

What's next for ICE-BREAKER

We will be exploring more games and in fact, add more interesting childhood games to the website. We also hope that we can get the opportunity to use our website as an ice-breaker activity in the 2023 freshman orientation camp.