Code Monkey home page Code Monkey logo

crypto-car-battle's Introduction

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

crypto-car-battle's People

Contributors

apoorvlathey avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.