第 1 個 DApp 開發實例是基於智能合約實現猜拳小遊戲。這個 DApp 實現的功能如下：首先有一個猜拳遊戲的交互頁面，用戶可以在頁面上選擇石頭、剪刀、布中的一個手勢；然後用戶的選擇和計算機隨機的一個選擇會發送到智能合約進行處理；智能合約會自動比較兩個選擇的輸贏結果反饋給頁面；頁面會顯示猜拳結果。與傳統的猜拳遊戲不同的是，這是一個去中心化的 DApp，且代碼是公開的。通過這個案例的開發，可以學習如何實現一個智能合約並與這個智能合約進行交互。
猜拳遊戲的頁面如圖 5-36 所示，上半部分是計算機和用戶進行猜拳的結果，下半部分是用戶選擇出拳手勢的按鈕。
以下是實現這個猜拳遊戲 DApp 的具體開發過程。主要有 3 個階段，首先使用 Truffle 創建這個猜拳項目，然後開發用於自動比較輸贏結果的智能合約，最後開發猜拳遊戲的 UI，也就是遊戲的用戶界面
這裡先更新配置文件 truffle.js 使之連接的是本地的測試環境，更新內容如下：
智能合約的實現#
接下來是實現一個智能合約，這個智能合約的作用是接收兩個猜拳選項，返回輸贏結果，具體的代碼如下：
需要說明的是，在 web3.js 中調用 play 函數無法直接獲取返回值，智能合約的執行需要消耗以太幣產生交易，故 web3.js 執行 play 函數後，得到的返回結果是產生交易的 hash 值。若 web3.js 要獲取猜拳選項需要通過在 js 中監聽 GuessResult 事件。
在智能合約中，事件（event）是以太坊虛擬機提供的一種操作日誌的工具，也可以用來實現一些交互功能，比如通知用戶界面返回函數調用結果等。上面的 play 函數可以通過以下方式進行監聽；
或者采用直接回調的方法進行，代碼如下：
這樣當智能合約中執行該事件時，上面的監聽就會被調用。
實現智能合約後就可以對該合約進行編譯生成二進制文件，如圖
之後需要將這個二級制文件部署到區塊鏈中。使用 Truffle 部署智能合約需要在 migrations 文件夾中新建一個部署文件，這裡新建一個名為 2_deploy_contracts.js 的部署文件，並輸入以下內容
此時再執行 truffle deploy 命令，可以將智能合約部署到區塊鏈中，如圖 5-38 所示。
猜拳遊戲用戶界面的實現#
智能合約完成後，接下來要實現一個用戶界面，也就是玩這個 DApp 遊戲的交互頁面，從而最終完成一個完整的 DApp。要實現這個用戶界面需要使用 3 個 js 庫。第 1 個是 jquery，這是一個常用的 js 庫，用來操作 HTML 元素；第 2 個是 web3.js，這個是前面提到的以太坊提供的 js 封裝的 API 接口；第 3 個是 truffle-contract.js，truffle-contract 對以太坊的智能合約做了更好的封裝，比如在 truffle-contract 中會自動給參數加上默認值，並且在返回信息中添加了日誌信息、交易的哈希值等。相比於 web3.js，使用 truffle-contract 操作智能合約更加方便。
首先實現這個 DApp 的 HTML 頁面，頁面功能是顯示兩個猜拳選項和用戶可以選擇 “剪刀”“石頭”“布” 的按鈕，這個頁面主要的 HTML 代碼如下：
2. 加載智能合約#
HTML 頁面完成之後，接下來新建一個 app.js，在這個 js 文件中加載智能合約並監聽事件，主要代碼如下：
3. 調用智能合約
最後在 js 文件中實現一個函數，獲取頁面的猜拳選項，包括玩家選項和計算機的隨機選項，並將這兩個選項發送給智能合約，其中發送時需要支付一定數量的交易費用，實現代碼如下
