SpeedStreets

A multiplayer geography game that tests your reaction time and how well you know the names of streets in your city--choose from four characters with different abilities and start guessing!

Comment

Inspiration

None of us are originally from Irvine, but after our first quarter at UCI months, we've gotten familiar with a lot of local street names--when looking at a map and quizzing each other, we realized that this could be a fun game. We took inspiration from the chat-like mechanics of Skribbl.io, and also from the fact that it's easier to tell where streets are by zooming in on a map.

What it does

You can host a game by entering a city name, or join by entering a room code.

In the game, a hidden street name of just underscores is shown, along with a zoomed out map centered on the street. As 20 seconds tick down, the name slowly fills in and the map zooms in. Depending on how quickly users are able to guess the name of the street, they get points. The game ends after 8 street names.

They can also choose from 4 different anteaters: Peter, Pioneer, Rouge, and Wizard. Each one has different benefits (e.g. the Rouge gets 1.5x score by answering in the first 10 seconds, but 0.5x score by answering in the last 5).

How we built it

We used Vite and React (with TypeScript) for the frontend because we were relatively familiar with them, allowing us to develop quickly. We used Leaflet for the map that displays. On the back end, we used express (with JavaScript), and called the OpenStreetMap/Overpass API to obtain the location and street names (geocoding) based on the city name. We used socket.io for real-time communication, since this is a very time-dependent game that's constantly updating.

Challenges we ran into

Here are some of the more interesting challenges:

  • Originally, by calling the geocoding API, we obtained any street name in a city with the same name--so we would get street names both in "Boston" Massachusetts and "Boston" Alabama. We fixed this by getting the latitude and longitude first, then getting the street names, and this taught us to be careful with reading API documentation
  • On the backend, since we were sleep-deprived, we made a lot of typos, which resulted in some debugging. We all regretted not choosing TypeScript over JavaScript.
  • We originally were going to use Leaflet, but learned that leaflet-react is more helpful
  • A LOT of merge conflicts! We were able to handle them, though. One thing we learned is that when indenting a lot of code, it can be a good idea to consult with teammates working on the same file...

Accomplishments that we're proud of

  • Our mascot, Harry the Wizard! (check the Slack photos channel, or see the rightmost mascot in the homepage screenshot below)
  • We are relatively new to hackathons and didn't think we'd finish the main functionality, but in the last half of the time or so we got:
    • Chat functionality
    • The Leaflet map
    • The podium at the end
    • Fixing a bunch of game logic and possible server crashes

What we learned

  • See the challenges above

What's next for SpeedStreets

  • Though we didn't have time, in the future, we're hoping to start using MongoDB to store our data instead of keeping it directly in memory
  • We can look into hosting so anyone can find, join, and play the game from their own devices/locations
  • It will also be nice to hide the singular street name on the map that's being guessed (currently it shows when the zoom level is high enough)
Share this project:

Updates