Space Donation

• 

  Start of the game, timer refreshed.

• 

  Game Over.

Inspiration

After seeing the tracks for HackNC, the space option is what stood out to our team. As a group, we all enjoy the game Planet Crafter, a retro open-world game that requires collecting resources in order to survive. Our team members brainstormed and chalked up the idea of a simple space-themed game that would integrate having fun and giving back to the community.

What it does

The user utilizes arrow keys to navigate a spaceship and collect 4 types of materials: iron, aluminum, lithium, and diamond, each of which contains different point values. In addition, there is a timer, which adds an element of excitement and urgency to the experience. The intuitive controls make the game accessible to players of all skill levels.

Once the game ends, the player’s score is then converted into a suggested donation amount button along with a replay button. The donation link will then take you to the PayPal giving fund page of the charity. The game over pop-up screen makes it so that the connection between the gameplay and the charitable act is seamless.

How we built it

We approached this game by first finding out what resources we had available and that were efficient to make a simple web browser game in the next 24 hours. We settled on using phraser.js which was perfect for the 2D spaceship aesthetic that we were going for. We went on an open-source online image distribution site called Kenny’s for our assets.

After the foundation, we broke down the components of the game mechanics into 4-5 parts. We started with the spaceship movement, then we worked on collision detection with the different space materials. The scoring system and the basic timer were implemented later on after finishing the dynamic movement and responsive design. We wrote the code out into a javascript file and then began working on the HTML and CSS scripts for the UI and front-end development.

We started our HTML script by adding all the necessary elements such as title, body, and game container. We began building off the HTML script adding different functions such as the charity information and the game-over screen until we had our finished project.

Challenges we ran into

During the process of creating the code for our game, the first challenge we faced was with cloning our repository. Since we were working with different operating systems, such as MacOS and Microsoft, some of our team member’s GitHub accounts were not working well with the IDE we were using. To solve this issue, we needed to change to a different IDE in order for the repository to be cloned. The game itself was quite straightforward, however, we faced difficulties with the front-end aspect of our project. Once the game was operable, there were UI issues with the game containers within the body. The images of certain elements of the game such as the spaceship and collectibles were not sized to the margin. As a result, the game would disappear due to the dimensions of the elements being too small.

Accomplishments that we're proud of

As a team, we’re proud of accomplishing overcoming each hurdle and successfully deploying the code as we intended to. Despite the hiccups, the outcome of the game and its functionality turned out to be what we had envisioned.

What we learned

HackNC was ⅔ members of our team’s first hackathon. We learned a lot about the overall experience of team-building with coding and how having team members can show new perspectives on how to approach code. As for the technical side, utilizing phaser.js framework/library was useful for the gaming web development side of our project. Initially, we were going to use Ubisoft to create the game but decided on web development instead. It was an idea that we just researched on a whim and it worked out for the best.

What's Next for Space Donation

We want to add an API integration in the game to allow more diverse donation platforms, such as DonorBox and GoFundMe. As a result, users would be able to donate without leaving the game. Another big step is to create a reward system. Such as virtual badges, certificates, or in-game ranking. By adding some of these features, we can further engage players and create meaningful opportunities.

Built With

• intellij-idea
• javascript
• node.js
• phraser.js