Circuit Chaos(Work in Progress)

Code based updating car racing game!

Comment

Inspiration :

This project was an idea given by a dear friend Jai Bobal during the 'Bitcamp' hackathon hosted at the University of Maryland, College Park. We were majorly a team of first time hackers who were completely inexperienced, but wanted to build something unique. So we settled on a beginner friendly coding game that would be based around racing!

What it does :

We aimed to make this project an updating GUI of a car that goes around a racetrack that can be embedded into a webpage next to which a user can write code that will modify the car of the GUI based on certain variables. Of course, a component of the GUI cannot be completely controlled by user written code, so we intend to use different variables and perhaps even a new, easier language to control the car. The challenge of the game is to brake sufficiently during turns and maintain a central position in the track while also maintaining a decent speed on a randomized track. Every user has a chance to compete for the leaderboard displayed on the homepage. In a later stage we hope to add levels of difficulty to it too.

How we are building it :

This is still a work in progress!

  1. How will you create the webpages? : We used HTML href tags and CSS styling to connect the webpages and display all the necessary contents.
  2. How will you display leaderboard times? : We used MySQL - Python connector to store the information of players who compete in a database and compare their times in seconds to display them with the respective names on the leaderboard. We intend to randomize the tracks in the GUI, but store a set amount of tracks in a database so the time to race on them can be comparable between users.
  3. How will you display the GUI? : We are currently working on using Pyodide to run Python code which can be accepted by the user and embed the GUI given by us to use it in a backend Javascript environment. An alternate idea we tried is to make two separate webpages and have one webpage displayed on the other via an HTML iFrame.
  4. How will the user's code modify the GUI? : We are working on implementing the GUI via Python, and allowing the user to control the car by comparing it against track coordinates or a turn endpoint while simultaneously using the Python time module to track how many seconds it takes to reach the start coordinates.
  5. How will the rest of the GUI operate? : We are working on finding a way to randomize the angle and number of turns in each track in the GUI using Python so that users will never get the same track and it is a new challenge every time. The GUI itself is being hard coded, as it is a special game we are trying to create.

Challenges we ran into so far :

  • Testing the storing of values in the leaderboard database and displaying them on the webpage.
  • Pyodide given in the JavaScript wasn't loading completely before the rest of the HTML loaded in. A simple fix was to use await in JS.
  • We attempted to write code to randomize the angles and turns of the track with lines, but we have to implement this with images in the GUI or alternately a canvas.
  • We couldn't submit it during the hackathon itself due to the number of tasks we had to do with hardcoding the GUI , GUI displaying and modifying the backend code. We managed to complete most of the frontend during the time period though.
  • We had little experience with actually building applications and this was our first project. We were unsure of how to approach the idea with code, so we spent some time thinking the approach through and had to learn the languages in depth.

More ideas we brainstormed :

  • Adding difficulty levels to the coding once completed from beginner to hard.
  • Adding different speed cars like a "garage" to the game.
  • Adding a profile with a picture (we implemented this, but we have to create the database of values connected to thus webpage).
Share this project:

Updates