The first DApp development example is based on smart contracts to implement a rock-paper-scissors game. The functionality of this DApp is as follows: first, there is an interactive page for the rock-paper-scissors game, where users can choose one gesture from rock, paper, or scissors; then the user's choice and a randomly generated choice by the computer will be sent to the smart contract for processing; the smart contract will automatically compare the results of the two choices and provide feedback to the page; the page will display the result of the game. Unlike traditional rock-paper-scissors games, this is a decentralized DApp, and the code is public. Through the development of this case, you can learn how to implement a smart contract and interact with it.
The page of the rock-paper-scissors game is shown in Figure 5-36. The top half shows the results of the rock-paper-scissors game between the computer and the user, and the bottom half shows the buttons for the user to choose a gesture.
The specific development process of implementing this rock-paper-scissors game DApp is as follows. There are mainly three stages: first, use Truffle to create this rock-paper-scissors project; then develop a smart contract to automatically compare the results of winning or losing; finally, develop the UI of the rock-paper-scissors game, which is the user interface of the game.
Here, update the configuration file truffle.js to connect to the local test environment, and the updated content is as follows:
Implementation of Smart Contract#
Next, implement a smart contract. The purpose of this smart contract is to receive two rock-paper-scissors options and return the result of winning or losing. The specific code is as follows:
It should be noted that in web3.js, calling the play function cannot directly obtain the return value. The execution of the smart contract requires the consumption of Ether to generate transactions. Therefore, after web3.js executes the play function, the return result obtained is the hash value of the generated transaction. If web3.js needs to obtain the rock-paper-scissors options, it needs to listen to the GuessResult event in JavaScript.
In the smart contract, events are tools provided by the Ethereum virtual machine for logging operations. They can also be used to implement some interactive functions, such as notifying the user interface to return the result of a function call. The play function above can be listened to in the following way:
Or it can be done using direct callbacks, as shown in the following code:
In this way, when the event is executed in the smart contract, the above listener will be called.
After implementing the smart contract, you can compile it to generate the binary file, as shown in the figure:
Then, this binary file needs to be deployed to the blockchain. To deploy the smart contract using Truffle, you need to create a deployment file in the migrations folder. Here, create a deployment file named 2_deploy_contracts.js and enter the following content:
At this time, when executing the truffle deploy command, the smart contract can be deployed to the blockchain, as shown in Figure 5-38.
Implementation of User Interface for Rock-Paper-Scissors Game#
After completing the smart contract, the next step is to implement a user interface, which is the interactive page for playing this DApp game, in order to finally complete a complete DApp. To implement this user interface, you need to use three JavaScript libraries. The first one is jQuery, which is a commonly used JavaScript library for manipulating HTML elements. The second one is web3.js, which is the API interface provided by Ethereum mentioned earlier. The third one is truffle-contract.js, which provides better encapsulation for Ethereum smart contracts in truffle-contract. For example, truffle-contract automatically adds default values to parameters and adds log information and transaction hash values to the return information. Compared with web3.js, using truffle-contract to operate smart contracts is more convenient.
First, implement the HTML page of this DApp. The functionality of the page is to display two rock-paper-scissors options and buttons for the user to choose "scissors," "rock," or "paper." The main HTML code of this page is as follows:
2. Load Smart Contract#
After completing the HTML page, create a new app.js file. In this JavaScript file, load the smart contract and listen to events. The main code is as follows:
- Call Smart Contract
Finally, implement a function in the JavaScript file to get the rock-paper-scissors options from the page, including the player's option and a randomly generated option by the computer, and send these two options to the smart contract. When sending, a certain amount of transaction fee needs to be paid. The implementation code is as follows:
