WEB:買不起2.6億一只的加密貓 他用10分鐘生了一窩

不知道多少人和營長一樣，在結束一天的工作后，就想癱在沙發上玩玩游戲，一掃一天的疲憊。不過現在的游戲都越來越氪金了，就像玩家們常說的：不充錢你怎么能變強！！！

但要說氪金，很少有哪個游戲能比得上區塊鏈游戲，因為區塊鏈上的游戲都建立在一筆筆真實的加密貨幣交易之上。

就拿最火的去中心化游戲加密貓來說，其剛上線時一只加密貓能賣到上千元人民幣，最貴的一只竟賣到了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。你可以把它們想象成一種特殊的，獨一無二的收藏品。

彭博分析師：比特幣180天波動率降至46%觸歷史最低水平:金色財經報道，Bloomberg Intelligence宏觀策略分析師Mike McGlone在社交媒體發布最新數據顯示，比特幣180天波動率指標數值已降至約46%，創下歷史最低水平，他認為雖然該指標走低通常對價格有利，但自一季度末以來比特幣價格相對于證券市場走勢仍表現疲軟，因此所有風險資產仍可能面臨壓力。[2023/8/3 16:15:35]

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}

美股區域性銀行股盤前持續走高，阿萊恩斯西部銀行漲幅擴大至20%:金色財經報道，美股區域性銀行股盤前持續走高，阿萊恩斯西部銀行(WAL.N)漲幅擴大至20%，第一共和銀行(FRC.N)現漲22%，西太平洋合眾銀行(PACW.O)漲超30%。[2023/3/14 13:03:14]

由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之類的細節。

最后是一個ownVipers函數，該函數可以返回調用者擁有的蛇的ID列表。具體的實現是通過msg.sender這個語句，它用來標記調用函數的用戶的地址。

現在，所有的函數都已定義完畢，接下來，我們需要編譯ViperToken智能合約，這里需要注意的是，請在Remix界面的右側選擇編譯器的版本，指定版本為0.5.3commit.10d17f24，因為我們使用的是0.5.3版本的Solidity語言，完成后我們就可以將智能合約部署到以太坊Ropsten測試網絡上了。

歐陽日輝：元宇宙是金融機構數字化轉型的未來:金色財經報道，中央財經大學中國互聯網經濟研究院副院長、教授歐陽日輝認為，金融的元宇宙世界，有兩條路徑：第一條，在元宇宙的世界，現實中的金融如何滲透，尋找金融新的發展空間。比如，緊隨元宇宙的發展路徑，支持元宇宙發展。目前，元宇宙的發展路徑，是沿著游戲、藝術、工作、生活這個路徑發展，在農業和工業領域也有所探索，比如阿里在農業領域，英偉達在工業領域的布局。

第二條路徑，元宇宙的知識理念和技術創新對金融發展產生影響。目前，國外銀行對于“元宇宙”的探索更加前沿。我國銀行屆也在積極探索，有三家代表已拋出了方案。招聯消費金融：普惠服務自動化、消費體驗全真化、智能管家定制化。百信銀行：AI數字人、沉浸式體驗、基于區塊鏈的數字資產。江蘇銀行：客戶感知、客戶連接、服務呈現。[2023/1/19 11:21:00]

這里我們編譯并部署了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上的代碼模板

這可能需要幾分鐘的執行時間，操作完成后，你的Web應用程序就運行起來了。

你可以在瀏覽器中訪問http：//localhost：8080看到它，應用程序界面長這樣：

加密蛇的頁面

連接到智能合約實例

為了使我們的Web應用程序能夠與先前部署的智能合約進行交互，這里我們會用到與本地以太坊節點進行通信的js庫web3.js。在配置開發環境時我們已經安裝好了軟件包，現在我們要在“contracts”文件夾下名為web3.js的文件中加入如下代碼來調用它：

BlockFi最大債權人為Ankura Trust，其次為FTX US和美國證券交易委員會:11月28日消息，據BlockFi破產申請表顯示，Ankura Trust Company, LLC是其最大債權人，擁有價值約7.29億美元的無擔保債權，其次是FTX US和美國證券交易委員會，無擔保債權分別為2.75億美元和3000萬美元。FTX US似乎源于今年早些時候向BlockFi提供的信貸額度，而美國證券交易委員會則是與BlockFi與其達成的多方調查和解金額有關。（The Block）[2022/11/28 21:07:48]

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”按鈕即可：

MetaMask的彈出窗口

現在，我們需要讓這個Web應用程序連接到智能合約的ABI上。要獲取ABI我們需要返回到Remix的界面，轉到Compile選項卡，然后單擊Details按鈕旁邊的ABI按鈕，具體操作如下圖所示：

dYdX過去24小時交易量達10億美元:金色財經消息，去中心化衍生品交易平臺dYdX發推稱，dYdX過去24小時交易量為10億美元，昨日交易筆數為12.4萬。[2022/8/17 12:29:57]

點擊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的標準規范。

或者，你可能試著擴展一下我們已經完成的工作，在這個去中心化應用程序中添加更多的功能，就比如說加入與其他用戶進行蛇交易的功能，這也是一個不錯的主意。

老鐵們，學到干貨了嗎？

Tags：VIPERVIPWEBTOKViper ProtocolBBVIP Tokenweb3游戲行業Dextoken

火必APP