第 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 文件中实现一个函数，获取页面的猜拳选项，包括玩家选项和计算机的随机选项，并将这两个选项发送给智能合约，其中发送时需要支付一定数量的交易费用，实现代码如下
