使用以太坊區塊鏈構建去中心化游戲，游戲主題為三英占呂布，選擇其中的角色鑄造 NFT 與呂布進行戰斗，通過簡單的游戲規則逐步了解使用以太坊公共區塊鏈創建去中心化游戲的方法：

• 編寫智能合約語言：Solidity，一種用于實現智能合約的面向對象的高級語言。
• Hardhat：
• Vue.js
• Ethers.js：憑借其易用性和豐富的功能， Ethers.js 甚至超越了之前被稱為 ETH 第一庫的 web3.js。這個通用的以太坊庫與 Parity、Geth、Crowdsale等流行的錢包完美配合。

文章涉及的代碼地址：https://github.com/QuintionTang/vue-game-dapp

Solidity

對于 Solidity 的初學者，可以關注 buildspace 上的教程。

這里智能合約需要完成用戶角色創建，鑄造選擇的角色，然后用它來對抗 BOSS。

開始構建

打開一個終端并使用以下命令在項目文件夾中創建一個文件夾：

mkdir vue-game-dapp

進入創建的項目文件夾：

cd vue-game-dapp

運行以下命令來初始化項目信息：

npm init

填寫項目信息，并安裝相關依賴：

npm install @openzeppelin/contracts --save
npm install hardhat chai @nomiclabs/hardhat-waffle @nomiclabs/hardhat-ethers ethers ethereum-waffle --save-dev 

現在編寫智能合約，在項目根目錄下創建智能合約文件夾 contracts ：

mkdir contracts

在 contracts 文件夾中創建一個新文件并將其命名為 EpicGame.sol，并在其中寫入以下代碼：

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

這始終是智能合約文件中的第一行，用來指定 solidity 的版本?，F在來編寫代碼制作完整的游戲智能合約 EpicGame ：

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/utils/Strings.sol";

import "./libraries/Base64.sol";

import "hardhat/console.sol";

contract EpicGame is ERC721 {
    struct CharacterAttributes {
        uint256 characterIndex;
        string name;
        string imageURI;
        uint256 hp;
        uint256 maxHp;
        uint256 attackDamage;
    }

    struct BigBoss {
        string name;
        string imageURI;
        uint256 hp;
        uint256 maxHp;
        uint256 attackDamage;
    }

    BigBoss public bigBoss;

    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    CharacterAttributes[] defaultCharacters;

    mapping(uint256 => CharacterAttributes) public nftHolderAttributes;

    mapping(address => uint256) public nftHolders;

    event CharacterNFTMinted(
        address sender,
        uint256 tokenId,
        uint256 characterIndex
    );
    event AttackComplete(uint256 newBossHp, uint256 newPlayerHp);

    constructor(
        string[] memory characterNames,
        string[] memory characterImageURIs,
        uint256[] memory characterHp,
        uint256[] memory characterAttackDmg,
        string memory bossName,
        string memory bossImageURI,
        uint256 bossHp,
        uint256 bossAttackDamage
    ) ERC721("Heroes", "HERO") {
        for (uint256 i = 0; i < characterNames.length; i += 1) {
            defaultCharacters.push(
                CharacterAttributes({
                    characterIndex: i,
                    name: characterNames[i],
                    imageURI: characterImageURIs[i],
                    hp: characterHp[i],
                    maxHp: characterHp[i],
                    attackDamage: characterAttackDmg[i]
                })
            );

            CharacterAttributes memory c = defaultCharacters[i];
            console.log(
                "Done initializing %s w/ HP %s, img %s",
                c.name,
                c.hp,
                c.imageURI
            );
        }

        bigBoss = BigBoss({
            name: bossName,
            imageURI: bossImageURI,
            hp: bossHp,
            maxHp: bossHp,
            attackDamage: bossAttackDamage
        });

        console.log(
            "Done initializing boss %s w/ HP %s, img %s",
            bigBoss.name,
            bigBoss.hp,
            bigBoss.imageURI
        );

        _tokenIds.increment();
    }

    function mintCharacterNFT(uint256 _characterIndex) external {
        uint256 newItemId = _tokenIds.current();

        _safeMint(msg.sender, newItemId);

        nftHolderAttributes[newItemId] = CharacterAttributes({
            characterIndex: _characterIndex,
            name: defaultCharacters[_characterIndex].name,
            imageURI: defaultCharacters[_characterIndex].imageURI,
            hp: defaultCharacters[_characterIndex].hp,
            maxHp: defaultCharacters[_characterIndex].hp,
            attackDamage: defaultCharacters[_characterIndex].attackDamage
        });

        console.log(
            "Minted NFT w/ tokenId %s and characterIndex %s",
            newItemId,
            _characterIndex
        );

        nftHolders[msg.sender] = newItemId;

        _tokenIds.increment();
        emit CharacterNFTMinted(msg.sender, newItemId, _characterIndex);
    }

    function attackBoss() public {
        uint256 nftTokenIdOfPlayer = nftHolders[msg.sender];
        CharacterAttributes storage player = nftHolderAttributes[
            nftTokenIdOfPlayer
        ];
        console.log(
            "\nPlayer w/ character %s about to attack. Has %s HP and %s AD",
            player.name,
            player.hp,
            player.attackDamage
        );
        console.log(
            "Boss %s has %s HP and %s AD",
            bigBoss.name,
            bigBoss.hp,
            bigBoss.attackDamage
        );

        require(player.hp > 0, "Error: character must have HP to attack boss.");
        require(bigBoss.hp > 0, "Error: boss must have HP to attack boss.");

        if (bigBoss.hp < player.attackDamage) {
            bigBoss.hp = 0;
        } else {
            bigBoss.hp = bigBoss.hp - player.attackDamage;
        }

        if (player.hp < bigBoss.attackDamage) {
            player.hp = 0;
        } else {
            player.hp = player.hp - bigBoss.attackDamage;
        }

        console.log("Boss attacked player. New player hp: %s\n", player.hp);
        emit AttackComplete(bigBoss.hp, player.hp);
    }

    function checkIfUserHasNFT()
        public
        view
        returns (CharacterAttributes memory)
    {
        uint256 userNftTokenId = nftHolders[msg.sender];
        if (userNftTokenId > 0) {
            return nftHolderAttributes[userNftTokenId];
        } else {
            CharacterAttributes memory emptyStruct;
            return emptyStruct;
        }
    }

    function getAllDefaultCharacters()
        public
        view
        returns (CharacterAttributes[] memory)
    {
        return defaultCharacters;
    }

    function getBigBoss() public view returns (BigBoss memory) {
        return bigBoss;
    }

    function tokenURI(uint256 _tokenId)
        public
        view
        override
        returns (string memory)
    {
        CharacterAttributes memory charAttributes = nftHolderAttributes[
            _tokenId
        ];

        string memory strHp = Strings.toString(charAttributes.hp);
        string memory strMaxHp = Strings.toString(charAttributes.maxHp);
        string memory strAttackDamage = Strings.toString(
            charAttributes.attackDamage
        );

        string memory json = Base64.encode(
            bytes(
                string(
                    abi.encodePacked(
                        '{"name": "',
                        charAttributes.name,
                        " -- NFT #: ",
                        Strings.toString(_tokenId),
                        '", "description": "This is an NFT that lets people play in the game", "image": "',
                        charAttributes.imageURI,
                        '", "attributes": [ { "trait_type": "Health Points", "value": ',
                        strHp,
                        ', "max_value":',
                        strMaxHp,
                        '}, { "trait_type": "Attack Damage", "value": ',
                        strAttackDamage,
                        "} ]}"
                    )
                )
            )
        );

        string memory output = string(
            abi.encodePacked("data:application/json;base64,", json)
        );

        return output;
    }
}

合約引用了 Base64.sol ，用于將數據編碼為 Base64 字符串。

測試

在部署之前，先來測試合約以確?？梢赃壿嫸际钦_的。在項目根目錄中創建文件夾 test ,此文件夾可以包含客戶端測試和以太坊測試。

在 test 文件夾中添加 test.js 文件，該文件將在一個文件中包含合約測試。

const { expect } = require("chai");
const { ethers } = require("hardhat");
describe("EpicGame", function () {
    let gameContract;
    before(async () => {
        const gameContractFactory = await ethers.getContractFactory("EpicGame");
        gameContract = await gameContractFactory.deploy(
            ["劉備", "關羽", "張飛"],
            [
                "https://resources.crayon.dev/suangguosha/liubei.png",
                "https://resources.crayon.dev/suangguosha/guanyu.png",
                "https://resources.crayon.dev/suangguosha/zhangfei.png",
            ],
            [100, 200, 300],
            [100, 50, 25],
            "呂布",
            "https://resources.crayon.dev/suangguosha/lvbu.png", // boss
            1000,
            50
        );
        await gameContract.deployed();
    });
    it("Should have 3 default characters", async () => {
        let characters = await gameContract.getAllDefaultCharacters();
        expect(characters.length).to.equal(3);
    });
    it("Should have a boss", async () => {
        let boss = await gameContract.getBigBoss();
        expect(boss.name).to.equal("呂布");
    });
});

然后在項目根目錄下執行腳本：

npx hardhat test

選擇創建 Create an empty hardhat.config.js：

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
require("@nomiclabs/hardhat-waffle");

const config = {
    alchemy: "9aa3d95b3bc440fa88ea12eaa4456161", // 測試網絡token
    privateKey: "", // 錢包私鑰
};

module.exports = {
    solidity: "0.8.4",
    networks: {
        ropsten: {
            url: `https://ropsten.infura.io/v3/${config.alchemy}`,
            accounts: [config.privateKey],
            chainId: 3,
        },
    },
};

再次執行：

npx hardhat test

部署（到 Ropsten 測試網絡）

在項目根目錄下創建文件夾 scripts，然后在文件夾中創建文件 deploy.js 將從合約的構造函數中創建 3 個默認角色和一個 Boss 。

const main = async () => {
    const gameContractFactory = await hre.ethers.getContractFactory("EpicGame");
    const gameContract = await gameContractFactory.deploy(
        ["劉備", "關羽", "張飛"],
        [
            "https://resources.crayon.dev/suangguosha/liubei.png",
            "https://resources.crayon.dev/suangguosha/guanyu.png",
            "https://resources.crayon.dev/suangguosha/zhangfei.png",
        ],
        [100, 200, 300],
        [100, 50, 25],
        "呂布",
        "https://resources.crayon.dev/suangguosha/lvbu.png", // boss
        1000,
        50
    );
    const [deployer] = await ethers.getSigners();

    console.log("Deploying contracts with the account: ", deployer.address);

    console.log("Account balance: ", (await deployer.getBalance()).toString());
    await gameContract.deployed();
    console.log("Contract deployed to: ", gameContract.address);
};
const runMain = async () => {
    try {
        await main();
        process.exit(0);
    } catch (error) {
        console.log(error);
        process.exit(1);
    }
};
runMain();

要部署合約，請在項目根目錄下運行命令：

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

執行完成之后可以看到結果：

Deploying contracts with the account:  0xDC13b48Cf2a42160f820A255Ad79B39E695C0c84
Account balance:  4807257090844068484
Contract deployed to:  0x0006544b9c915Ab3cb0e8aC5d21000E4a4ABE746

到此完成了智能合約部分，下面開始使用 VUE 創建前端交互界面。

VUE 部分

從創建項目開始：

vue create game

選擇 vue2 ，前端部分還將使用 ethers 進行 Web3 交互，使用 Vuex 進行狀態管理，安裝相關依賴：

npm install --save vuex ethers

好了，現在項目準備開始了，前端應用程序 VUE 部分需要完成以下功能：

• 連接用戶的錢包
• 選擇一個角色
• 角色和呂布較量

連接錢包

為了讓用戶與應用程序交互，必須安裝 Metamask 并選擇 Ropsten 網絡。

打開 App.vue 文件，創建一個帶鏈接的按鈕，它將在 Metamask 中打開一個提示，以允許應用程序選擇用戶錢包：

<template>
    <div class="app" id="app">
        <div class="container mx-auto">
            <div class="header-container">
                <p class="header gradient-text">
                    ?? Metaverse Slayer 元宇宙殺手 ??
                </p>
                <p class="sub-text">
                    Team up to protect the Metaverse! 齊心協力保護元宇宙
                </p>
                <div class="connect-wallet-container">
                    <img
                        src="<https://64.media.tumblr.com/tumblr_mbia5vdmRd1r1mkubo1_500.gifv>"
                        alt="Monty Python Gif"
                    />
                    <button
                        class="cta-button connect-wallet-button"
                        @click="connect"
                    >
                        連接錢包
                    </button>
                </div>
            </div>
            <div class="footer-container">
                <img
                    alt="Twitter Logo"
                    class="twitter-logo"
                    src="./assets/twitter-logo.svg"
                />
                <a
                    class="footer-text"
                    :href="twitter_link"
                    target="_blank"
                    rel="noreferrer"
                    >built by @{{ twitter_handle }}</a
                >
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "App",
    data() {
        return {
            twitter_handle: "DevPointCn",
            twitter_link: "<https://twitter.com/DevPointCn>",
        };
    },
    methods: {
        async connect() {
            await this.$store.dispatch("connect", true);
        },
    },
    async mounted() {
        await this.$store.dispatch("connect", false);
    },
};
</script>

連接按鈕有一個點擊事件，它將向 Vuex Store 發送一個事件，下面是 Store 的結構：

import Vue from "vue";
import Vuex from "vuex";
import { ethers } from "ethers";
import MyEpicGame from "../utils/MyEpicGame.json";

Vue.use(Vuex);

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

export default new Vuex.Store({
    state: {
        account: null,
        error: null,
        mining: false,
        characterNFT: null,
        characters: [],
        boss: null,
        attackState: null,
        contract_address: "0x0006544b9c915Ab3cb0e8aC5d21000E4a4ABE746", // 合約地址
    },
    getters: {
        account: (state) => state.account,
        error: (state) => state.error,
        mining: (state) => state.mining,
        characterNFT: (state) => state.characterNFT
        characters: (state) => state.characters,
        boss: (state) => state.boss,
        attackState: (state) => state.attackState,
    },
    mutations: {
        setAccount(state, account) {
            state.account = account;
        },
        setError(state, error) {
            state.error = error;
        },
        setMining(state, mining) {
            state.mining = mining;
        },
        setCharacterNFT(state, characterNFT) {
            state.characterNFT = characterNFT;
        },
        setCharacters(state, characters) {
            state.characters = characters;
        },
        setBoss(state, boss) {
            state.boss = boss;
        },
        setAttackState(state, attackState) {
            state.attackState = attackState;
        },
    },
    actions: {},
});

數據結構說明：

• account：存儲連接的帳戶信息
• error：異常信息
• mining：用于檢查是否正在挖掘交易的布爾值
• characterNFT：存儲選擇的角色信息
• characters：將保存默認字符的位置
• boss：與角色戰斗的BOSS
• attackState：攻擊 boss 時，交易被挖掘時狀態發生變化
• contract_address：合約地址，當將合約部署到 Ropsten 網絡時返回的地址。

并且不要忘記在部署合約后從構建中導入 EpicGame.json，將需要它來使用區塊鏈中的合約進行 web3 調用。

為狀態創建了 getter 和 setter。首先，來實現連接操作：

actions: {	
    async connect({ commit, dispatch }, connect) {
        try {
          const { ethereum } = window;
          if (!ethereum) {
            commit("setError", "Metamask not installed!");
            return;
          }
          if (!(await dispatch("checkIfConnected")) && connect) {
            await dispatch("requestAccess");
          }
          await dispatch("checkNetwork");
        } catch (error) {
          console.log(error);
          commit("setError", "Account request refused.");
        }
      },
      async checkNetwork({ commit, dispatch }) {
        let chainId = await ethereum.request({ method: "eth_chainId" });
        const rinkebyChainId = "0x4";
        if (chainId !== rinkebyChainId) {
          if (!(await dispatch("switchNetwork"))) {
            commit(
              "setError",
              "You are not connected to the Rinkeby Test Network!"
            );
          }
        }
      },
      async switchNetwork() {
        try {
          await ethereum.request({
            method: "wallet_switchEthereumChain",
            params: [{ chainId: "0x4" }],
          });
          return 1;
        } catch (switchError) {
          return 0;
        }
      },
      async checkIfConnected({ commit }) {
        const { ethereum } = window;
        const accounts = await ethereum.request({ method: "eth_accounts" });
        if (accounts.length !== 0) {
          commit("setAccount", accounts[0]);
          return 1;
        } else {
          return 0;
        }
      },
      async requestAccess({ commit }) {
        const { ethereum } = window;
        const accounts = await ethereum.request({
          method: "eth_requestAccounts",
        });
        commit("setAccount", accounts[0]);
      },
  }

首先，檢查是否安裝了 Metamask：

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

如果一切正常，檢查用戶是否已經授予應用訪問 Metamask 的權限，然后只需要連接帳戶，如果沒有，則返回 0，即找到的帳戶數。這意味著必須向用戶請求訪問權限：

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

注意：connect 變量知道它是單擊按鈕還是實際調用它的掛載函數。

在檢查了選擇的網絡之后，如果它不是 Ropsten 網絡，發送一個請求來改變它：

await dispatch("checkNetwork");

找到帳戶后，將帳戶提交給 mutation 以將其保存在狀態中：

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

到此連接相關的操作已完成。

現在將創建一個操作來獲取默認字符供用戶從智能合約中選擇：

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);
    }
}

為了從合約中調用一個函數，需要通過為它創建一個動作來獲取合約，然后返回它。提供提供者、合約 abi 和簽名者：

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,
            EpicGame.abi,
            signer
        );
        return connectedContract;
    } catch (error) {
        console.log(error);
        console.log("connected contract not found");
        return null;
    }
}

然后可以在智能合約中調用返回默認字符的函數，并在函數的幫助下映射每個字符數據，該函數將字符數據轉換為 JavaScript 可用的對象：

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

transformCharacterData 函數添加在 Vuex.Store 初始化之上。它將 hp、attackDamage 從 bigNumber 轉換為可讀數字：

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

前端部分的代碼主要是實現游戲的邏輯，選擇一個角色鑄造英雄NFT，這里不繼續對代碼進行解讀，詳見代碼倉庫：

https://github.com/QuintionTang/vue-game-dapp