# DApp开发实例1——猜拳游戏

By [leaf](https://paragraph.com/@leaf-6) · 2022-12-04

---

第1个DApp开发实例是基于智能合约实现猜拳小游戏。这个DApp实现的功能如下：首先有一个猜拳游戏的交互页面，用户可以在页面上选择石头、剪刀、布中的一个手势；然后用户的选择和计算机随机的一个选择会发送到智能合约进行处理；智能合约会自动比较两个选择的输赢结果反馈给页面；页面会显示猜拳结果。与传统的猜拳游戏不同的是，这是一个去中心化的DApp，且代码是公开的。通过这个案例的开发，可以学习如何实现一个智能合约并与这个智能合约进行交互。

猜拳游戏的页面如图5-36所示，上半部分是计算机和用户进行猜拳的结果，下半部分是用户选择出拳手势的按钮。

以下是实现这个猜拳游戏DApp的具体开发过程。主要有3个阶段，首先使用Truffle创建这个猜拳项目，然后开发用于自动比较输赢结果的智能合约，最后开发猜拳游戏的UI，也就是游戏的用户界面

![](https://storage.googleapis.com/papyrus_images/6c60a21eff3a876b144b18b6cc8fa5ae209d1aaffd4efa7e55ca4c4c40f89f71.png)

![](https://storage.googleapis.com/papyrus_images/2911328917e21ada6a91d264c64e55451c25422db6acbc488769d80448c4a96c.png)

这里先更新配置文件truffle.js使之连接的是本地的测试环境，更新内容如下：

![](https://storage.googleapis.com/papyrus_images/4bde3ef9949760a2ae1f0ee5b94889113fb4f4ba6a6c961afd66be48a17c5967.png)

智能合约的实现
=======

接下来是实现一个智能合约，这个智能合约的作用是接收两个猜拳选项，返回输赢结果，具体的代码如下：

![](https://storage.googleapis.com/papyrus_images/23dd5b798f0b4de80c320f59ddba899b72c233b6b76f1f260b68805f36921d17.png)

需要说明的是，在web3.js中调用play函数无法直接获取返回值，智能合约的执行需要消耗以太币产生交易，故web3.js执行play函数后，得到的返回结果是产生交易的hash值。若web3.js要获取猜拳选项需要通过在js中监听GuessResult事件。

在智能合约中，事件（event）是以太坊虚拟机提供的一种操作日志的工具，也可以用来实现一些交互功能，比如通知用户界面返回函数调用结果等。上面的play函数可以通过以下方式进行监听;

![](https://storage.googleapis.com/papyrus_images/bd8c1837c8016103ec9e16caf0ab486393151e9cb1edd58b7c045441d1702aaf.png)

![](https://storage.googleapis.com/papyrus_images/378daa8d333ec5ea41b2b32674d725a57daec71d1be18b1bfc0537d921351c10.png)

或者采用直接回调的方法进行，代码如下：

![](https://storage.googleapis.com/papyrus_images/336ad5d053088d17ee56a7bc5a27983b4da9e71dae1ba39248975cfe5f8422ea.png)

这样当智能合约中执行该事件时，上面的监听就会被调用。

实现智能合约后就可以对该合约进行编译生成二进制文件，如图

![编译生成二进制文件](https://storage.googleapis.com/papyrus_images/7f14be0dbbb58423e1df26e3bfc4a9530070b4097c4dc78263c2767ce30025a8.png)

编译生成二进制文件

之后需要将这个二级制文件部署到区块链中。使用Truffle部署智能合约需要在migrations文件夹中新建一个部署文件，这里新建一个名为2\_deploy\_contracts.js的部署文件，并输入以下内容

![](https://storage.googleapis.com/papyrus_images/d400cd6beeb7fa6a2a972517cf5a96364bdba8520ee9c18e5bd99a301d81a966.png)

此时再执行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操作智能合约更加方便。

![部署智能合约](https://storage.googleapis.com/papyrus_images/2e4c7763b4edb3bcab63ed8f2b2227c6199a96e1a756e7a52a67eca60b973b38.png)

部署智能合约

首先实现这个DApp的HTML页面，页面功能是显示两个猜拳选项和用户可以选择“剪刀”“石头”“布”的按钮，这个页面主要的HTML代码如下：

![](https://storage.googleapis.com/papyrus_images/ef4cac70f7658843e2f4a5f848843216d700afdbdd78e24d74fcfeb9a885c518.png)

![](https://storage.googleapis.com/papyrus_images/12c6e1b38e602d1cff2eed41e4bfc1a1ddc571d5e1b9a9168c3e37b78f953252.png)

2.加载智能合约
========

HTML页面完成之后，接下来新建一个app.js，在这个js文件中加载智能合约并监听事件，主要代码如下：

![](https://storage.googleapis.com/papyrus_images/9726866354e58c785568fde4cddf3a6d9f2191c042daaa364077830833bb413a.png)

![](https://storage.googleapis.com/papyrus_images/9726866354e58c785568fde4cddf3a6d9f2191c042daaa364077830833bb413a.png)

![](https://storage.googleapis.com/papyrus_images/bcf21c51e95497683aa5b9908d06d2a9b34bac930301f6ca4047e2363af7219d.png)

3.调用智能合约

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

![](https://storage.googleapis.com/papyrus_images/fc2ac6415f9dde430020977c34c68e98278d66c0fe4a3603518b6e2ee95ac4cb.png)

---

*Originally published on [leaf](https://paragraph.com/@leaf-6/dapp-1)*