Create a Blockchain Game With Solidity, Web3, and Vue.js

Build a decentralized game using Ethereum blockchain

Photo by Zoltan Tasi on Unsplash

In this article, we are going to see the step by step approach to create a decentralized game using Ethereum public blockchain using:

• Hardhat
• Solidity
• Vue.js

We will focus more on the frontend side in the next part, but first, I will give a brief explanation about the Solidity side and how to deploy it to Rinkeby testnet.

This is my first article and I felt like there is a lack of information about Web3 and Vue.js, as it needs some attention too.

Before we start, I want to give credit to buildspace for making this project. What I added is the Vue.js part. If you are new to this space, please feel free to check them out! They have the best learning tools and community!

So before we start, let’s talk about what you will really need if you are just starting in this space:

• You need to install MetaMask and enable the extensions in Chrome
• Basic knowledge about Metamask
• Basic knowledge about Solidity
• Knowledge about JavaScript and Vue.js.

What We’ll Build Today

We will build a blockchain-based game (inspired by buildspace) where you can mint your character and fight the boss!

You can check out the final results here:

• App
• GitHub repository

Solidity

For starters in Solidity, I’d recommend you to follow buildspace.

Our smart contract will allow us to create characters, mint our selected character and then fight a boss with it! Simple right?

Here’s our MyEpicGame.sol smart contract:

For the Base64.sol file, you can find it here.

This basically provides us with some helper functions to let us encode any data into a Base64 string — which is a standard way to encode some piece of data into a string.

Test

Before deploying. We should test the contract to make sure we can use it.

Create a new folder called test in the root directory. This folder can contain both client-side and Ethereum tests.

Inside the test, folder add a new JS file called test.js. This file would contain the contracts tests in one file. You can create your own, I create a simple test file:

To run the test:

npx hardhat test

Deploy (to the Rinkeby test network)

Let’s create a new file deploy.js in the scripts folder of our hardhat project. And have this code in it.

This will create 3 default characters and a boss from our constructor.

To deploy the contract run this command:

npx hardhat run scripts/deploy.js --network rinkeby

And we are done with our Solidity part. Now we have to make a frontend interface to interact with it.

Front end Vue.js

I will not be sharing the CSS here, please feel free to check it in my GitHub repo.

Let's start by creating our project:

vue create frontend
cd frontend

We will be using ethers for our Web3 interactions and Vuex for our state management. Here’s how to install them:

npm install --save vuex ethers

Alright, now the project is ready to start! Let’s talk about the steps we will go through to make our frontend app:

• Connect the user’s wallet
• Choose a character
• Attack the boss

Connect the Wallet

In order for users to interact with our app, they must have Metamask installed and the Rinkeby network selected. But we will take care of it in the last part.

Our App.vue template should look like this, with a connect button that will open a prompt in Metamask to allow our app to request transactions for the user to accept:

The connect button has a click event that will dispatch an action to our store (Vuex), we will talk about it later — for now, let's look at our store structure:

The state object has the following attributes:

• account: where our connected account will be saved
• error: to display errors
• mining: a boolean to check if a transaction is being mined
• characterNFT: where our selected character will be saved
• characters: where the default characters will be saved
• boss: the boss that will fight with our character
• attackState: when attacking the boss, the state changes while the transaction being mined
• contract_address: the address that was returned when we deployed the contract to the Rinkeby network.

And don’t forget to import MyEpicGame.json from the build after deploying the contract. We will need it for our web3 calls with the contract in the blockchain.

We created getters and setters (mutations) for the states. Now let's get to our actions.

To start, we have the connect action that we were talking about earlier, which I will breakdown to you now:

First, we check here if Metamask is installed:

const { ethereum } = window;
if (!ethereum) {
  commit("setError", "Metamask not installed!");
  return;
}

If all is alright, we check if the user has already granted our app access to Metamask, then we just have to get the account connected, if not it returns 0, the number of accounts found. That means we will have to request access from the user:

if (!(await dispatch("checkIfConnected")) && connect) {
	await dispatch("requestAccess");
}

Note: the connect variable help us know if it is a button clicked or it will actually be the mounted function that’s calling it

After we’ve checked the network selected, if it's not the Rinkeby network, we send a request to change it:

await dispatch("checkNetwork");

Once the account is found, we commit the account to the mutation to save it in our state:

// in checkIfConnected action
commit("setAccount", accounts[0]);

And that's it for our connect action.

Now we’ll create an action to get the default characters for our user to choose from our smart contract:

async getCharacters({ state, commit, dispatch }) {
  try {
    const connectedContract = await dispatch("getContract");
    const charactersTxn = await connectedContract.getAllDefaultCharacters();
    const characters = charactersTxn.map((characterData) =>
      transformCharacterData(characterData)
    );
    commit("setCharacters", characters);
  } catch (error) {
    console.log(error);
  }
},

In order to call a function from our contract, we need to fetch the contract, by creating an action for that too, and return it. We provide a provider, the contract abi, and the signer:

async getContract({ state }) {
  try {
    const { ethereum } = window;
    const provider = new ethers.providers.Web3Provider(ethereum);
    const signer = provider.getSigner();
    const connectedContract = new ethers.Contract(
      state.contract_address,
      MyEpicGame.abi,
      signer
    );
    return connectedContract;
  } catch (error) {
    console.log(error);
    console.log("connected contract not found");
    return null;
  }
},

Then we can call the function in our smart contract that returns the default characters, and map on each one with the help of our function that transforms the character data to an object usable by JavaScript:

const charactersTxn = await connectedContract.getAllDefaultCharacters();
const characters = charactersTxn.map((characterData) =>
  transformCharacterData(characterData)
);

The transformCharacterData function is added on top of the Vuex.Store initialization. It transforms the hp, attackDamage from bigNumber to readable numbers:

const transformCharacterData = (characterData) => {
  return {
    name: characterData.name,
    imageURI: characterData.imageURI,
    hp: characterData.hp.toNumber(),
    maxHp: characterData.maxHp.toNumber(),
    attackDamage: characterData.attackDamage.toNumber(),
  };
};

Now let's go back to our App.vue to set up our views and create a component called SelectCharacter.

Modify our App.vue, so when the user connects their wallet, we have an account saved in our store and then he can choose the character from the defaults we fetched earlier.

Add a v-if to our connect div holder and add our character select component in the view:

<div class="connect-wallet-container" v-if="!account">
  <img
    src="<https://64.media.tumblr.com/tumblr_mbia5vdmRd1r1mkubo1_500.gifv>"
    alt="Monty Python Gif"
  />
  <button class="cta-button connect-wallet-button" @click="connect">
    Connect Wallet To Get Started
  </button>
</div>
<select-character v-else-if="account" />

And for the account, it's actually a computed variable that is returned from our store:

computed: {
  account() {
    return this.$store.getters.account;
  },
}

Coming to our SelectCharacter component:

Once the component is mounted, we have to fetch the defaultCharacters and display them in our view.

For each item, we have a click event that will dispatch a mint action to our store called mintCharacterNFT based on the characterId or index selected. Let's add this action to our store:

async mintCharacterNFT({ commit, dispatch }, characterId) {
  try {
    const connectedContract = await dispatch("getContract");
    const mintTxn = await connectedContract.mintCharacterNFT(characterId);
    await mintTxn.wait();
  } catch (error) {
    console.log(error);
  }
},

Like before we call our smart contract function that is responsible for minting.

But there is a problem here, we didn't set our minted character in our state? Don't worry, if you remember our function in the smart contract, we have an event once the character is minted CharacterNFTMinted.

So what we have to do now is to listen to that event and set the character from it. Let's create an action to set up our event listeners:

async setupEventListeners({ state, commit, dispatch }) {
  try {
    const connectedContract = await dispatch("getContract");
    if (!connectedContract) return;
    connectedContract.on(
      "CharacterNFTMinted",
      async (from, tokenId, characterIndex) => {
        console.log(
          `CharacterNFTMinted - sender: ${from} tokenId: ${tokenId.toNumber()} characterIndex: ${characterIndex.toNumber()}`
        );
        const characterNFT = await connectedContract.checkIfUserHasNFT();
        console.log(characterNFT);
        commit("setCharacterNFT", transformCharacterData(characterNFT));
        alert(
          `Your NFT is all done -- see it here: <https://testnets.opensea.io/assets/$>{
            state.contract_address
          }/${tokenId.toNumber()}`
        );
      }
    );

  } catch (error) {
    console.log(error);
  }
},

To listen to an event in web3, we just use the contract.on("event_name", callback).

Inside the event, we check the user NFT selected with this function checkIfUserHasNFT and we commit it to our state. The alert is just additional information if the user wants to see the NFT link. So where do you think this action should be called?

We will add it to our connect action below the checkNetwork dispatch:

await dispatch("setupEventListeners");
await dispatch("fetchNFTMetadata");

Let's also add another action to check if the user already has an NFT once he accesses our app:

async fetchNFTMetadata({ state, commit, dispatch }) {
  try {
    const connectedContract = await dispatch("getContract");
    const txn = await connectedContract.checkIfUserHasNFT();
    if (txn.name) {
      commit("setCharacterNFT", transformCharacterData(txn));
    }
  } catch (error) {
    console.log(error);
  }
},

This action is almost the same as the event, but only check it once it's called.

Now we are done with our character selection, let’s go back to our App.vue and set up our Arena to fight the boss. We have to modify our select-character child called in App.vue, if the user has an NFT already selected, We have to go straight to the arena:

<select-character v-else-if="account && !characterNFT" />
<arena v-else-if="account && characterNFT" />

characterNFT variable is the computed variable like account:

characterNFT() {
  return this.$store.getters.characterNFT;
},

Let's create our Arena component:

Once this component is mounted, we call an action to fetch the boss and another action when the attack button is clicked, and that's where the attackState changes between (attacking / hit):

async fetchBoss({ state, commit, dispatch }) {
  try {
    const connectedContract = await dispatch("getContract");
    const bossTxn = await connectedContract.getBigBoss();
    commit("setBoss", transformCharacterData(bossTxn));
  } catch (error) {
    console.log(error);
  }
},
async attackBoss({ state, commit, dispatch }) {
  try {
    const connectedContract = await dispatch("getContract");
    commit("setAttackState", "attacking");
    console.log("Attacking boss...");
    const attackTxn = await connectedContract.attackBoss();
    await attackTxn.wait();
    console.log("attackTxn:", attackTxn);
    commit("setAttackState", "hit");
  } catch (error) {
    console.error("Error attacking boss:", error);
    setAttackState("");
  }
},

And let's not forget our attackComplete event in our setupEventListeners action, this updates the boss and player hp:

connectedContract.on(
  "AttackComplete",
  async (newBossHp, newPlayerHp) => {
    console.log(
      `AttackComplete: Boss Hp: ${newBossHp} Player Hp: ${newPlayerHp}`
    );
    let boss = state.boss;
    boss.hp = newBossHp;
    commit("setBoss", boss);
    let character = state.characterNFT;
    character.hp = newPlayerHp;
    commit("setCharacterNFT", character);
  }
);

You can add this loading-indicator component for better UX:

<template>
  <div class="lds-ring">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</template>
<script>
export default {};
</script>

Now, you have completed your first web3 game using Vue.js. You can host it on vercel as I did — for free.

Here’s my app and the GitHub Repository for the full source code.

Again big shoutout to buildspace for helping make this project!

I also got this NFT for completing the project:

Happy coding! Connect with me on Twitter.