不知道多少人和营长一样，在结束一天的工作后，就想瘫在沙发上玩玩游戏，一扫一天的疲惫。不过现在的游戏都越来越氪金了，就像玩家们常说的：不充钱你怎么能变强！！！
但要说氪金，很少有哪个游戏能比得上区块链游戏，因为区块链上的游戏都建立在一笔笔真实的加密货币交易之上。
就拿最火的去中心化游戏加密猫来说，其刚上线时一只加密猫能卖到上千元人民币，最贵的一只竟卖到了125673个以太币，在当时约合人民币2.6亿元。
当时最贵的一只加密猫
不禁让人直呼：玩不起，玩不起。
玩不起又想玩怎么办？
手把手开发一款区块链游戏，不就OK了，何况又那么简单，10分钟就够了
这是一款怎样的DApp？
从现在开始，我们将构建一个类似于加密猫的简单DApp，我们称之为加密蛇
你可能会问为什么是蛇呢，但为什么不能是蛇呢？Python翻译过来也是蛇呀。
在这个DApp中，你可以购买蛇和养殖蛇，应用页面是这样的：
加密蛇程序的页面
其功能列表如下：
创造蛇–用户能够通过购买或让两条蛇交配来创造新的蛇。
查看蛇的详细信息–用户应该能够查看自己拥有的蛇的详细信息并进行显示。
创建加密蛇，你至少需要用到以下工具
智能合约相关：
智能合约编程语言Solidity
开源智能合约开发环境Remix
用于调试和测试智能合约的Metamask
前端技术相关：
用于与本地以太坊节点进行通信的js库Web3.js
构建用户界面的渐进式框架Vue.js
用于创建vue项目的Vue-cli
前端框架Boostrap-vue
此外，你还需要使用Git来克隆一些代码模板。
在进行编程之前，这里先假定你已经对以下的知识有了基本的了解。
了解智能合约及其编程语言Solidity。
了解使用MetaMask进行智能合约的调试和测试。
了解使用RemixIDE进行智能合约的编译和部署。
当然了，如果你对这一些知识还有欠缺，也不用担心，本文会详细介绍每一个细节。
深入了解ERC-721标准
ERC-721是一个用来描述如何在以太坊区块链上制造不可替代token的标准。满足ERC-721标准的每个token或其他数字资产都是唯一的，这意味着它不等同于任何其他token。你可以把它们想象成一种特殊的，独一无二的收藏品。
Magic Eden宣布聘请前Coinbase产品总监Linus Chung担任产品主管:金色财经报道，跨链NFT平台Magic Eden宣布聘请Linus Chung担任产品主管。并将专注于领导产品开发，增强用户体验，推动增长并制定长期战略。
在加入Magic Eden之前，Linus曾担任Origin Protocol产品副总裁，之前是Coinbase的产品总监，他还管理着构建和扩展Coinbase一些增长最快的产品的团队，包括Coinbase Earn，Coinbase Card和 Coinbase Pay。
在加入Coinbase之前，Linus还曾在特斯拉、Pinterest和LinkedIn担任高级职位。[2023/7/23 15:52:57]
ERC-721标准的接口
根据标准的官方文档，ERC-721规定了智能合约用以管理、持有和交易唯一token必须实现的最小接口：
balanceOf-返回特定所有者_owner钱包中的token余额。
ownerOf-返回特定token所有者的钱包地址。
totalSupply-返回创建的token总数。
transfer-将_tokenId标记的token从发送者的钱包转移到指定接收者的钱包。
takeOwnership-声明给定ID的token的所有权。
approve-批准另一个地址来声明给定ID的token所有权。
此外，它还定义了两个事件：Transfer和Approval。当token从一个钱包转移到另一个钱包时，会触发转移事件。另一方面，当一个账户批准另一个账户声明他拥有的某个token的所有权时，会触发批准事件。
OpenZeppelin的ERC-721token实现
OpenZeppelin是一款开源智能合约开发框架，它提供了可重复使用的智能合约模板，包括ERC-20和ERC-721等标准token的实现模板。在这里，我们将导入他们的ERC-721token实现，这样我们就不必从头开始编写它，避免了重复造轮子。
创建智能合约
此DApp是基于以太坊平台开发，所以需要使用Solidity语言发行token。
首先，在开源智能合约开发环境Remix中，创建一个名为ViperToken.sol的新文件并在其中添加以下代码：
1//WewillbeusingSolidityversion0.5.32pragmasolidity0.5.3;3//ImportingOpenZeppelin'sERC-721Implementation4import"https://github.com/OpenZeppelin/openzeppelin-solidity/contracts/token/ERC721/ERC721Full.sol";5//ImportingOpenZeppelin'sSafeMathImplementation6import"https://github.com/OpenZeppelin/openzeppelin-solidity/contracts/math/SafeMath.sol";789contractViperTokenisERC721Full{10usingSafeMathforuint256;11//Thisstructwillbeusedtorepresentoneviper12structViper{13uint8genes;14uint256matronId;15uint256sireId;16}1718//Listofexistingvipers19Viperpublicvipers;2021//Eventthatwillbeemittedwheneveranewviperiscreated22eventBirth(23addressowner,24uint256viperId,25uint256matronId,26uint256sireId,27uint8genes28);2930//InitializinganERC-721Tokennamed'Vipers'withasymbol'VPR'31constructor()ERC721Full("Vipers","VPR")public{32}3334//Fallbackfunction35function()externalpayable{36}3738/**5354/**);75uint256newViperId=vipers.push(newViper).sub(1);76super._mint(viperOwner,newViperId);77emitBirth(78viperOwner,79newViperId,80newViper.matronId,81newViper.sireId,82newViper.genes83);84returnnewViperId;85}8687/**9495/**104105/**113114/**else{122uint256memoryresult=newuint256(viperCount);123uint256totalVipers=vipers.length;124uint256resultIndex=0;125uint256viperId=0;126while(viperId<totalVipers){127if(ownerOf(viperId)==msg.sender){128result=viperId;129resultIndex=resultIndex.add(1);130}131viperId=viperId.add(1);132}133returnresult;134}135}136}
港股上市公司中国信息科技将使用分布式帐本技术发行上限为1亿港元的债券:6月28日消息，港股上市公司中国信息科技发展有限公司在港交所公告中披露，将使用分布式账本技术（DLT）发行上限为 1 亿港元的债券，并将使用数字拥有权代币（Digital Ownership Token）标准实施。所有债券文件连同其相应的智能合约代码将透过参考建立具约束力的李嘉图合约（Ricardian Contract），使用 DOT 标准载入债券证券代币。债券发行期从首次发行期至 2023 年 7 月 12 日，到期日为 2053 年 6 月 27 日。[2023/6/28 22:04:40]
由GitHub托管的ViperToken.sol
在上面的代码中，我们套用了OpenZeppelin的ERC-721token实现，并在其中添加了自定义函数。此外，还在代码中导入了SafeMath库以避免出现整数的上溢和下溢漏洞。
接下来，详细介绍一下代码的功能：
首先，函数generateViperGenes用来确定新出生蛇的基因，主要用在两条蛇繁育新蛇时。我们选择了一种非常简单的实现方式，在这种情况下，我们使用1到6这几个简单的数字来确定新出生蛇的长相。当然了，你也可以修改代码，创造出更多独具特色的蛇。
然后，我们实现了一个createViper函数，这个函数用来创建一条新的蛇，并通过传入函数的参数“viperOwner”指定该新创建蛇的所有者。
函数buyViper是一个可以接受以太币付款的函数，函数中调用了我们之前定义的createViper函数。Payable这个标记是一个修饰符，用于指出此函数在执行时可以接收以太币付款。相信你能从这行明摆着就是要钱的代码中看出来：
1require(msg.value==0.02ether);
代码中的require语句会检查是否满足给定的条件，并在不满足条件时报错。在Solidity语言中，msg.value语句用来存储调用该函数的用户发送的以太币数量。
在上面的代码中，我们要求用户支付0.02个以太币来购买一条随机分配的蛇。在这里，你就是上帝，你可以随意修改这个金额，如果你愿意的话，甚至还可以删除这条语句，这样每个用户都可以访问这个函数来免费得到一条蛇。
函数breedVipers在调用时代价更为昂贵，它需要用户支付0.05个以太币，不过这并不是为了蒙小白，因为该函数允许用户根据两条蛇父母的基因创建一条新的蛇，也就是说可以让用户得到一条高身价的蛇。
当然了，我们还需要定义一个能够查看蛇详细信息的函数。函数getViperDetails在被调用时会返回给定蛇的基因和父母ID之类的细节。
dYdX 2022年活跃交易者达3.39万名，累计交易量超4600亿美元:1月31日消息，dYdX基金会发布 2022年生态系统年度报告，表示团队成员由3名全职人员扩展到12名全职人员和7名兼职人员；2022年流通供应量（包括社区金库）达到 194449829 枚（占总供应量的 19.4%），同时社区投票决定减少代币释放，并将社区金库的五年分配增加了 11.2%；2022 年共涉及 22 项治理提案；2022 年 dYdX 协议上有 3.39 万名活跃交易者；累计交易量和累计费用收入分别为 4663 亿美元和 1.378 亿美元。[2023/1/31 11:38:15]
最后是一个ownVipers函数，该函数可以返回调用者拥有的蛇的ID列表。具体的实现是通过msg.sender这个语句，它用来标记调用函数的用户的地址。
现在，所有的函数都已定义完毕，接下来，我们需要编译ViperToken智能合约，这里需要注意的是，请在Remix界面的右侧选择编译器的版本，指定版本为0.5.3commit.10d17f24，因为我们使用的是0.5.3版本的Solidity语言，完成后我们就可以将智能合约部署到以太坊Ropsten测试网络上了。
这里我们编译并部署了ViperToken智能合约，由于操作步骤较多，你最好检查一下每一步是否都已正确完成。
如果所有的步骤都没有出错，智能合约得到了正确的部署，你会看到如下页面：
智能合约编译成功的页面
智能合约已被成功部署并加入到“已部署智能合约”中
构建Web应用程序
到这里，智能合约就可以正常运行了，但如果没有一个与之交互的Web应用程序，那么运行起来就只能看到一些数字。为了让这个DApp更有意思，接下来营长带你制作一个简单的Web应用程序。
配置开发环境
构建Web应用程序首先需要配置开发环境，在这里废话不多说，让我们直接切入正题。让我们在终端中执行以下操作来克隆GitHub上的代码模板：
1#CloningtheboilerplatefromGitHub2gitclone-bboilerplate--single-branchhttps://github.com/openberry-ac/cryptovipers.git3#Navigatingtothedirectoryandinstallingpackages4cdcryptovipers5npminstall6#InstallingWeb37npminstall-s1.0.0-beta.378#Toruntheapp9npmrundev
克隆GitHub上的代码模板
机构：2030年汽车元宇宙市场将达到165亿美元:1月5日消息，根据MarketsandMarkets的调查，到2030年，汽车元宇宙市场将达到165亿美元。根据这些统计数据，部分汽车公司将经由不断改变现有的生产线，来生产智能汽车。另外，行业专家表示，汽车想要实现成为元宇宙入口的愿景，座舱的智能化程度尤为关键。[2023/1/5 9:52:57]
这可能需要几分钟的执行时间，操作完成后，你的Web应用程序就运行起来了。
你可以在浏览器中访问http：//localhost：8080看到它，应用程序界面长这样：
加密蛇的页面
连接到智能合约实例
为了使我们的Web应用程序能够与先前部署的智能合约进行交互，这里我们会用到与本地以太坊节点进行通信的js库web3.js。在配置开发环境时我们已经安装好了软件包，现在我们要在“contracts”文件夹下名为web3.js的文件中加入如下代码来调用它：
1importWeb3from'web3';23constgetWeb3=()=>newPromise((resolve)=>{4window.addEventListener('load',()=>{5letcurrentWeb3;67if(window.ethereum){8currentWeb3=newWeb3(window.ethereum);9try{10//Requestaccountaccessifneeded11window.ethereum.enable();12//Acccountsnowexposed13resolve(currentWeb3);14}catch(error){15//Userdeniedaccountaccess...16alert('Pleaseallowaccessfortheapptowork');17}18}elseif(window.web3){19window.web3=newWeb3(web3.currentProvider);20//Acccountsalwaysexposed21resolve(currentWeb3);22}else{23console.log('Non-Ethereumbrowserdetected.YoushouldconsidertryingMetaMask!');24}25});26});2728exportdefaultgetWeb3;
由GitHub托管的web3.js
上面的代码加载了MetaMask浏览器扩展初始化的web3实例，稍后我们将用它来和先前部署的智能合约进行交互。
在这个过程中你可能会遇到MetaMask的弹出窗口，它会要求获取访问权限。这是因为我们在代码中加入了ethereum.enable，所以在Web应用程序请求访问帐户时窗口就会自动弹出，这时你只需要像下图一样点击“Connect”按钮即可：
Web3基金会Grant资助项目已超400个:金色财经报道，据波卡官方消息，Web3基金会Grant资助项目已超400个，截至目前共有415个项目通过我们的资助计划，而且已经拥有超过1000份的Grant申请。自2018年12月启动Grant资助计划以来，共收到1054份申请，其中415份已被接受，其中14.4%的团队在美国，12.8%在中国，8.1%在新加坡。迄今为止，已有181个团队完成了至少一个项目，300个团队成功交付了他们的第一个里程碑。[2022/8/2 2:52:57]
MetaMask的弹出窗口
现在，我们需要让这个Web应用程序连接到智能合约的ABI上。要获取ABI我们需要返回到Remix的界面，转到Compile选项卡，然后单击Details按钮旁边的ABI按钮，具体操作如下图所示：
点击ABI按钮来复制智能合约的ABI
获取了ABI后，在contract文件夹下打开名为abi.js的文件，然后将ABI粘贴为变量contractAbi的值，如下所示：
1constcontractAbi=//PASTEABICODEHERE23exportdefaultcontractAbi;
由GitHub托管的abi.js
文件中应该会有一个示例代码，遇到问题时你可以随时参考它。然后，我们还必须指定智能合约实例的地址，你需要回到Remix界面的Deploy选项卡，然后单击已部署智能合约上的复制图标，具体操作如下图所示：
点击“复制”按钮复制智能合约实例地址
在src文件夹下找到的App.vue，打开并将你的智能合约地址粘贴到第86行，作为变量contractAddress的值：
1constcontractAddress='';//Righthere!2//Ex:constcontractAddress='0xf59c4c3c79071d3e11034a9344789bd3';
定义实现的方法
现在你可能会注意到用户界面一切都正常，但点击按钮却不起任何作用。这是因为我们还没有定义Web应用程序的功能，接下来我们就开动。首先返回到App.vue文件中，转到第116行，你可以在其中查到所有的方法，但所有方法的实现都只包含一个输出方法名的console.log。
Web应用程序的第一个功能是购买蛇。让我们用以下代码修改buyViper方法：
1buyViper(){2this.isLoading=true;3this.contractInstance.methods.buyViper().send({4from:this.account,5value:web3.toWei(0.02,'ether'),6}).then((receipt)=>{7this.addViperFromReceipt(receipt);8this.isLoading=false;9}).catch((err)=>{10console.log(err,'err');11this.isLoading=false;12});13},
由GitHub托管的App.vue
还记得我们在智能合约中的规定么？购买一条蛇我们需要收取0.02个以太币的费用，因此在代码中我们需要同时发送我们的帐户信息和0.02个以太币来进行支付。然后我们就可以调用智能合约中的buyViper函数，该函数会返回新生成蛇的详细信息，紧接着我们将这些细节保存在vipers数组中。
接下来，修改繁殖蛇的功能breedVipers：
1breedVipers(){2this.isLoading=true;3this.contractInstance.methods.breedVipers(this.matron,this.sire).send({4from:this.account,5value:web3.toWei(0.05,'ether'),6}).then((receipt)=>{7this.addViperFromReceipt(receipt);8this.isLoading=false;9}).catch((err)=>{10console.log(err,'err');11this.isLoading=false;12});13},
由GitHub托管的App.vue
在智能合约中，我们规定了用户需要支付0.05个以太币才能访问繁殖蛇的函数，同时，在调用breedVipers函数时需要传入两个整数参数，matron和sire，所以在上面的代码中我们将两个整数参数传递给函数。这个函数在执行后会返回新出生蛇的详细信息，我们需要将其保存到vipers数组中。
最后，定义检索自己拥有蛇的详细信息的方法，称为getVipers：
1getVipers(){2this.isLoading=true;3this.contractInstance.methods.ownedVipers().call({4from:this.account,5}).then((receipt)=>{6for(leti=0;i<receipt.length;i=1){7this.contractInstance.methods.getViperDetails(receipt).call({8from:this.account,9}).then((viper)=>{10this.vipers.push({11id:viper,12genes:viper,13matron:viper,14sire:viper,15url:vipersMap],16});17}).catch((err)=>{18console.log(err,'err');19});20}21this.isLoading=false;22}).catch((err)=>{23console.log(err,'err');24this.isLoading=false;25});26},
由GitHub托管的App.vue
想要获取你所拥有蛇的详细信息，你可以采用以下两种方法：ownedVipers方法和getViperDetails方法。第一种方法能获取存有我们蛇详细信息的数组，而第二方法能获取每条蛇的详细信息。在获取每条蛇的详细信息后，我们将其保存到vipers数组中。
恭喜你，完成了所有的开发工作！
加密蛇游戏的玩法示范：花费0.02个以太币购买一条新的蛇，然后让编号为15和编号为16的蛇繁殖一条蛇宝宝，恭喜你，你做到了！
写在最后
刚刚我们开发了一个类似于加密猫的DApp！同时，也学习了如何创建自己的ERC-721标准实现，并定义了DApp的自定义函数，学习了如何使用Vue.js开发项目，并创建了一个简单的Web应用程序。
如果你觉得这样太简单了，还想挑战一下自己，这是我的一点建议：
首先，你可以锻炼一下自己的token开发能力，在本文中我们直接使用了现成的ERC-721token代码，你可以试着自己从头来开始编写，在这个过程中你可以参考开源智能合约开发框架OpenZeppelin的实现或以太坊ERC-721token的标准规范。
或者，你可能试着扩展一下我们已经完成的工作，在这个去中心化应用程序中添加更多的功能，就比如说加入与其他用户进行蛇交易的功能，这也是一个不错的主意。
老铁们，学到干货了吗？
郑重声明： 本文版权归原作者所有， 转载文章仅为传播更多信息之目的， 如作者信息标记有误， 请第一时间联系我们修改或删除， 多谢。