How I made a Minecraft NFT Game on the Blockchain
So, a month ago I was scrolling on buildspace since I had a lot of time on my hands. I decided to click on the “Create your own mini turn-based NFT browser game” project and give it a try.
Here is the link if you want it: https://minecraft-nft-game.meghmistry.repl.co/
So, I’ll guide you through the journey of how I made the Minecraft NFT Game, but I won’t bore you with the coding details. I’ll explain the logic behind the game, so it is easier to understand for you!
1: Getting the Basic Logic and Contract Set-Up
So, this is where we tell the Blockchain how all of our characters will work. One very important thing that we need to know is that all of the characters in our game are NFTs. So when someone connects to our game, we need to:
- Connect their wallet to our game.
- Check if their wallet has a character NFT.
- We’ll let them choose a character and mint their character NFT to play the game. Each character NFT has its attributes stored on the NFT directly like: HP, Attack Damage, the image of the character, etc. So, when the character’s HP hits 0, it would say hp: 0 on the NFT itself.
Here, we added attributes to our NFT, which are:
- characterIndex
- name
- imageURI
- hp
- maxHp
- attackDamage
Pretty much all of these are pretty obvious to people who know their NFTs (If you don’t know what NFTs are, follow my newsletter, we are a blockchain newsletter that gives you info about blockchain every week.).
The first thing I do is create two state variables which are sorta like permanent global variables on the contract. Read about them here.
nftHolderAttributes will be where we store the state of the player’s NFTs. We map the NFT’s id to a CharacterAttributes struct.
What we do now is initialize the bosses for our game, with these properties:
- nameimageURI
- bossImageURI
- hp
- maxHp
- attackDamage
Yeah, we finally have all the characters and the bosses set up. Now it’s time to set up the attack logic.
2. Making The Character Attributes Dynamic
So, next what we do is we create a function called attackBoss, which subtracts the Boss attackDamage from the Character hp, and the Character attackDamage from the Boss hp. We also later add a function that makes sure that the Character hp and the Boss hp don’t go into the negative. That’s just as simple as we need the function to be. When we subtract these attributes, they should update in the character’s metadata, even on Opensea in the “levels” dropdown.
The final step is to make a frontend app to work with our smart contract this allows users to connect their wallets and interact with the smart contract using a U.I. Again I won’t bore you with the coding details.
3. Designing The Front End
So here is the time for the front end. To start things off, we create a basic React project, start making a basic U.I, and start to add some styling to make it all look good.
Now, we make the “Connect to Wallet” button on the website. This is easy, I won’t explain the logic, since I don’t know it either. It is as simple as copy-pasting some code. As I like to say: “The most important skill a programmer needs is the skill of copy-pasting code from the internet”.
Now we make a new file and create a Select Character component. This is the logic we are trying to aim using this component:
If the user has connected to your app **AND** does not have a character NFT — **Show SelectCharacter Component**
We are going to start by creating a render function named: renderContent . This will handle all the logic for what to render. The renderContent function will contain if statements and will display certain pages depending on what level you are at. For now, we are going to make it display the front page if a user has not connected their wallet, and display the Select Character component if the users have connected their wallet and don’t have the NFT needed. Now we import our ABI file from our deployed contract into a folder called “utils” that we have created (or it already exists). Now every time we redeploy our contract, we have to reimport that ABI file into the “utils” folder and delete the old one. We now call ethers.js and display the NFTs and a minting button with them. We also import the ABI file and get access to all the functions of our smart contract. We also import our contract address. We use those functions and access the NFTs using the contract addresses to get their image file locations. We can now mint the NFTs from this place, and see what the NFTs look like, all coming from the smart contract!
Now we have to set up the boss battle U.I. We set up another component called Arena, and access the attackBoss function from the smart contract using ethers.js. We can easily set up a U.I. to attack the boss now using a little bit of coding power. We now want to set up a “progress bar” to show the health of the boss and the character. That is done using some easy-peasy CSS.
We now add another if statement to the renderContent function, that says if the person already has connected their wallet and they have the NFT, then React will display the boss battle component on the page, with the active health of the user and the boss. If the boss is dead, then React will display a final game finished page. That’s pretty much it for the logic of the Front End U.I.
Whoo! We have now finished the game, time to celebrate!! 🎉
Some Final Things to Say
So this article has described the logic behind the game, and how I built it in terms of the logic and mathematics behind the game. I did this since it allows people to think in terms of the code themselves, and it allows for more flexibility and freedom and choice. I hope you attempt to build this game, and if you get it done successfully, put it down in the comments below! See ya next time!
Also, thanks to buildspace for designing this project!