知识为进步之母,而进步又为富强之源泉。这篇文章主要讲述使用 SolidityWeb3 和 Vue.js 创建区块链游戏相关的知识，希望能为你提供帮助。

文章图片

使用以太坊区块链构建去中心化游戏，游戏主题为三英占吕布，选择其中的角色铸造 NFT 与吕布进行战斗，通过简单的游戏规则逐步了解使用以太坊公共区块链创建去中心化游戏的方法：

• 编写智能合约语言：Solidity，一种用于实现智能合约的面向对象的高级语言。
• Hardhat：
• Vue.js
• Ethers.js：凭借其易用性和丰富的功能， Ethers.js 甚至超越了之前被称为 ETH 第一库的 web3.js。这个通用的以太坊库与 Parity、Geth、Crowdsale 等流行的钱包完美配合。

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 的版本。现在来编写代码制作完整的游戏智能合约 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 文件，该文件将在一个文件中包含合约测试。

constexpect= require("chai"); constethers= 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

【使用 SolidityWeb3 和 Vue.js 创建区块链游戏】好了，现在项目准备开始了，前端应用程序 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://www.songbingjia.com/android/< https://64.media.tumblr.com/tumblr_mbia5vdmRd1r1mkubo1_500.gifv>"/> < button class="cta-button connect-wallet-button" @click="connect" > 连接钱包 < /button> < /div> < /div> < div class="footer-container"> < imgclass="twitter-logo" src="https://www.songbingjia.com/android/assets/twitter-logo.svg" /> < a class="footer-text" :href="https://www.songbingjia.com/android/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"; importethersfrom "ethers"; import MyEpicGame from "../utils/MyEpicGame.json"; Vue.use(Vuex); const transformCharacterData = https://www.songbingjia.com/android/(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 constethereum= 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 ) constethereum= 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 ) constethereum= window; const accounts = await ethereum.request( method: "eth_requestAccounts", ); commit("setAccount", accounts[0]); ,

首先，检查是否安装了 Metamask：

constethereum= 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 constethereum= 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 = https://www.songbingjia.com/android/(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

推荐阅读

• 

  助学贷款贷款年限是什么意思
• 

  管家婆CRM
• 

  云顶之弈永恩带什么装备 云顶之弈10.25永恩阵容搭配攻略
• 

  你曾经学过的革命英烈和英雄人物还记得多少？
• 

  板栗糖尿病能吃吗 糖尿病患者能吃板栗吗
• 

  鲜虾仁怎么炒好吃又嫩
• 

  怎样清洗隐形内衣呢小妙招 怎样清洗隐形内衣呢
• 

  教高中好还是教小学好
• 

  编程it，什么是it编程
• 

  佳能5d微距镜头 怎样用佳能5d相机拍微距物品
• 

  哪些人不能喝洋葱蒸水
• 

  绞股蓝适合哪些人吃
• 

  芦笋皮有什么作用？
• 

  万科彩虹汇 扬州万科
• 

  月经|15岁女孩月经一直没有来，因为是“石女”！究竟是什么情况？
• 

  1314情话 数字情话表白1314*精选60句*
• 

  迅雷看看播放器中保存当前画面的详细操作教程是什么 迅雷看看播放器中保存当前画面的详细操作教程
• 

  Win8系统宽带连接出错623的处理办法
• 

  安徽省科技馆开放时间和门票 安徽省科技馆开放时间
• 

  香菇排骨汤的做法大全，香菇排骨汤的做法大全视频

• React vs Vue（谁是2022年的最佳框架（））
• web 自动化岗位常见面试题
• Java异常处理
• #yyds干货盘点# 学python，怎么能不学习scrapy呢，这篇博客带你学会它
• #yyds干货盘点# CSS盒子模型
• #yyds干货盘点#JUnit5学习之六（参数化测试(Parameterized Tests)基础）
• ClickHouse在大数据领域应用实践
• 甜甜酱OH文档补充OpenHarmony Toggle组件
• LNMP如何对接redis服务