Mini-Turn NFT game with Solidity and Javascript

The best way I know how to learn is through building. In turn the best way I know how to teach is showcasing something I built. This blog post is going to cover an dapp (decentralized app) that I built with the help of buildspace. If you haven’t heard of them, they’re a must if you’re looking to get into web3 / blockchain. They’ve got great tutorials, an active telegram channel for help, and the projects are challenging from a technical standpoint so you will learn a ton! Plus the projects are great to build top of and add additional features. I added multi-player functionality, a total damageDone attribute for each player, additional UI to communicate next steps when a character dies, and hosted the images on IPFS (InterPlanatery File System).

The first thing I’m going to do is run this script in my terminal to deploy my Solidity smart contract to the Rinkeby test network: npx hardhat run scripts/deploy.js — network Rinkeby

I am using hardhat which is an ethereum development environment. I ran a hardhat script to create this project and that comes with tons of built in features including a local testing environment which is super helpful when building your contracts. More info on hardhat here: https://hardhat.org/

The first line of my code will actually compile our contract and generate the necessary files we need to work with our contract. It uses The Hardhat Runtime Environment, or hre for short, which is an object that hardhat exposes when running a task, test, or script. Then we deploy the contract to the rinkeby test network, which is an actual external blockchain, and send in the arguments to the constructor function to initialize our characters for the game. We console log the address of the contract because we will need that and something called an ABI (application binary interface) to communicate with our contract from our frontend later. The ABI is found in the artifacts directory of our hardhat project after we deploy our script in a file called “YourContractName.json”. ABI is essentially the communication layer between the Solidity world and the Javascript world. The ABI Specifies the our contract’s different methods and their format of inputs and outputs.

Contract deployed to: 0x0046c78EC1987244c01C64203065874aAdBB3647

Now I add the contract address and ABI to my frontend and start my server to begin the game. Think of each contract as a new game that lives on the blockchain and our frontend is our way to communicate with and experience the game. This is the first page of the website where the user is welcomed to the game and prompted to connect their wallet to play. In web3 your wallet is the way you login to decentralized applications, it acts like your username and password in addition to your wallet. This app is expecting a specific browser wallet, Metamask, which allows us to buy, store, and send cryptocurrency. In addition Metamask has support for Ethereum test networks like Rinkeby which is…