How I made a Blockchain-based Game just using HTML
In this post, I will share with you how I used DappHero to easily integrate blockchain into my HTML5 game without worrying about Web3.js or Metamask.
I took part in DappHero’s bounty at MetaCartel’s ‘Dragon Quest’ (you may visit Hackathons.Live to never miss out on Hackathons).
For this, I brought a twist to the classic Snake Game by rewarding the winner with Ether.
Overview of the Project
In order to start the match, the player deposits .001 ETH into the Game Pool and begins the game. On biting the snake’s tail or hitting the wall, the game ends and the score is sent to the Game’s Smart Contract.
If the player’s score is greater than the current overall Player Average than he is rewarded with .001 ETH (initial deposit) + 1% winning prize (0.00001 ETH). Losers lose the entire 0.001 ETH to the Game Pool.
Video Walkthrough: https://www.youtube.com/watch?v=cBSaPn-Pdh0
How it Works
I coded a very simple smart contract in Solidity that received Ether from players, keeps track of the total average score, and rewards the Winner.
I deployed the contract to Rinkeby testnet via Remix and imported the ABI into DappHero. The HTML5 game was developed using the help of Phaser.js.
To fetch the content from blockchain and submit transactions, I just had to change the classes of Html’s <div> elements. That’s it! I was so blown away by its such simple to use approach. I believe that this would definitely lower the entrance barrier for developers switching from Web2.0 to Web3.0.
In order to use this data in the game mechanics, I just used js to get value of the Html elements, and my project was good to go!
You may check out my Project via these links:
Working Demo (Rinkeby Testnet): https://apoorvlathey.com/projects/BlockchainSnakeGame/
GitHub Repo: https://github.com/CodinMaster/Blockchain-Snake-Game-Using-DappHero-
I would like to thank for helping me integrating DappHero into my project, solving all my queries, and for developing this great product!
