search

apoorvlathey / Crypto-Car-Battle

NFT (ERC721) based HTML5 game with Crypto Payouts to the Winner.
https://apoorvlathey.com/projects/crypto-car-battle
98 stars 77 forks source link
erc-721 ethereum game html5 nft phaser

readme

Crypto Car Battle

NFT (ERC721) based HTML5 game with Crypto Payouts to the Winner.

(Demo deployed on Rinkeby Network)

Try it out: Web Demo Link

Game Walkthrough

  1. Login via Metamask

  2. i) a. New Users get to Mint new Cars token. b. Confirm Metamask Transaction

ii) View your ERC-721 Cars collection

New Cars Minted start from Level 1. With each win, their level increases by 1. (Max. level: 7)

Higher Level corresponds to Higher Speeds

  1. Click on your desired car to get to the following menu:

  2. Let's Create New Battle! The Main Game Loads up: The Aim of this game is quite simple, the player has to complete the lap in minimum time possible. (Here you may observe that the car that we chose above is being used as player here.) As soon as the user cross the start line, the timer starts. User has to pass through checkpoint, so no cheating is possible. On crossing the finish line, game ends.

  3. After completing the level, we are greeted with the following screen:

  4. On clicking the "Challenge Others" button, our score gets saved in the Smart Contract. We have to deposit 0.001 Eth into this match (Explainatory figure below)

After transaction goes through, we get Battle Id:

PLAYER 2

Say some other player wants to compete in an existing battle, so the second button is clicked.

We get a list of Battles available:

Click Battle button and Deposit 0.001 Eth into the Match Pool.

After transaction confirmation, the Game Starts. Goal? To finish faster then the opponent!

After game ends:

Click the Button and Confirm Contract Interaction, to get this (in case you win) :

If we now view our cars, we observe increased level as well as new color!

TRANSFER CARS TO ANOTHER USER

Being the ERC-721 standard NFT tokens, the Cars can be traded with players and change ownership.

  1. Click on the Transfer button:

  2. Just fill-up the "Transfer To" address field and click Transfer.

  3. Confirm the Metamask popup

  4. And the token has been success fully transferred!

  5. Login to that account to view your new Car:

Project Setup

  1. Clone the Repository
  2. Deploy contracts via Remix. Save the abi and contract address in './assets/js/web3setup.js'
  3. Use live-server or any custom server (js, python, php) to serve the HTML5 Phaser Game.
  4. Visit ./index.htmlin browser to start the game.

Stack Used

  1. Phaser
  2. Web3.js
  3. HTML5, Vanilla Javascript