Terra-PIN

start screen
game screen
ending scenario 1
ending scenario 2

Inspiration

We were inspired to help solve a problem that plagues 1 in 4 Terps: not knowing where locations are on campus. Our project allows freshmen and others who are new to the University to easily familiarize themselves with locations on campus in a fun and interactive way.

What it does

The user is dropped into a Google Street View in a random location on campus and they are given a select amount of time (based on easy, medium, or hard difficulty) to guess where they are and pinpoint that location in a map. They can then see how accurate their guess was by seeing the distance between their guess and the actual location they were given.

How we built it

We utilized the Google Cloud platform, specifically the Google Maps API. We displayed all of the elements we worked with using HTML. To initialize the randomized Street View, we used JavaScript to create API calls that retrieved the street view of coordinates that we randomly generated that are somewhere on the UMD campus. Then we leveraged the customizability offered by the API to allow the users to create markers that indicate the location that they are guessing. We also used JavaScript to make changes to the HTML when needed in different scenarios. Then we developed a distance algorithm that calculated the difference between the actual location and the location that the user guessed and displayed how far away the user guessed on the end screen. Thus, we were able to use HTML and JavaScript to leverage to power of the Google Maps API to create this educational game.

Challenges we ran into

We ran into several challenges when trying to set up the Google Maps API because we were unable to make the maps and street view appear on our screen but we fixed this by reading through extensive documentation. Then we ran into issues when it came to storing data in one JavaScript file and accessing it in another but we came up with the idea of using cookies to store this data.

Accomplishments that we're proud of

We are proud of the fact that we could leverage an API and incorporate its functions into our code. We think we can use this process to use even more APIs in the future and create even better projects. Being able to create a fully functional game through full-stack programming was a project that we all wanted to do for this hackathon and we were able to achieve that.

What we learned

Through this project, we learned how to use the Google Maps API and how to combine JavaScript and HTML to create a project that exceeds the capabilities of just using HTML. We also learned how to extend the capabilities of front-end programming in order to make a visually appealing yet functional game.

What's next for Terra-PIN

Our plan is to add the ability for multiplayer so that different people can play each other in this game. We also want to add the ability to play multiple rounds in a single game and create a point system for multiplayer in order to make the game more competitive and thus more engaging for its users.