Race Car On-Chain NFTs

On-chain art is cool. On-chain games are cool. Let’s combine them and make an NFT game where users compete with their individualized cars around randomized racetracks.

Comment

What it does

We built a NFT game in which race cars are measured by how well they do on a given track by virtue of their time in completing the loop. We were inspired by the challenge of putting an NFT on a blockchain. Most NFTs are off-chain, meaning that at least part (if not all) is stored in a separate external service and the token is stored in the smart contract. But an on-chain NFT means the entire NFT exists on the blockchain in its entirety, making it more secure and easier for users to check and define ownership.

How we built it/components

We used Procreate and Adobe Illustrator to design the cars and the racetracks, which we then rendered into SVG files to place in the smart contract. We used JavaScript to write up the code for the movement of the car, the generation of the track, and animation for the NFT. Finally, Solidity was used to write up the smart contract for the NFT. Remix, Metamask, and OpenSea were technologies which we utilized to produce the actual NFT, visually rendered.

Here was the general allocation of roles we divided ourselves into: Smart contract and JS rendering (William), SVG art and traits (Libby), Physics and car movement (Andrew), Procedural generation and BFS (Carissa)

Challenges we ran into

The challenges of making on-chain game art was that it was much more difficult to render everything and run as SVG file formats, as opposed to the typical JPEG file format that an off-chain NFT would use. This meant that we not only had to have images of the cars, but we had to actually code the images by telling the computer to draw lines and shapes in certain angles or orientations. We also had a lot of more ideas to incorporate into our project (see What's next for Race Car On-Chain NFTs), but it was just really hard to get done within the time frame of the hackathon. We faced a lot of unforeseen issues, such as getting the physics of the cars to work or making SVG versions of the cars or just learning how to code in Javascript in general.

Accomplishments that we're proud of + What we learned

We learned how to code in Javascript, code in HTML, use Solidity, use Goerli ETH, and overall learned a lot about how NFTs and the blockchain works in general. Especially since none of us really have even been familiar with the concept of blockchain prior to TreeHacks, it was super cool to see us all being able to use these new technologies and pick up new skills in such a short amount of time.

What's next for Race Car On-Chain NFTs

We are planning on making the NFTs more elaborate, with the tracks and cars having more details to them. We are also planning on adding stats to the cars (such as top speed, acceleration, handling, traction, weight, etc) and then use a neural network on the blockchain, to make the cars drive in their own ways around randomized tracks. We are also planning on allowing for a mechanic where if users have multiple car NFTs, they can choose to fuse them together to achieve better stats or modify the visual designs of the cars. We would ultimately work up to a tournament system where users can race each other on the same daily or monthly random track, to achieve prizes such as limited edition cars. We were going to actually try and incorporate these mechanics during the hackathon, but found that it was a bit ambitious within the span of 36 hours.

Built With

  • adobe-illustrator
  • and-animation-for-the-nft.-finally
  • and-opensea-were-technologies-which-we-utilized-to-produce-the-actual-nft
  • javascript
  • metamask
  • opensea
  • procreate
  • remix
  • solidity
  • solidity-was-used-to-write-up-the-smart-contract-for-the-nft.-remix
  • the-generation-of-the-track
  • which-we-then-rendered-into-svg-files-to-place-in-the-smart-contract.-we-used-javascript-to-write-up-the-code-for-the-movement-of-the-car
Share this project:

Updates