区块链开发学习第七章：第一个Dapp-猜拳游戏
时间：2021-12-22 作者：I-will-be-different
第一个简单的Dapp-猜拳游戏。本智能合约的功能很简单，就是用户与电脑猜拳，用户选择出手后，电脑随机一个选项，然后调用智能合约方法把两个选项值传过去，在智能合约上进行比较，并通过区块链合约事件广播结果，本地监听事件拿到结果后展示猜拳结果。
先大体声明下几个环境跟工具：
1、没有用truffle，直接MetaMask链接以太坊Ropsten测试链后，用Remix部署合约代码
2、前端用域名（1.6.1版本）
下面分成几步详细说明：
一、从Ropsten上获取eth
因为调用合约需要消耗eth，所以要先在Ropsten测试网上获取eth，可以复制自己的钱包地址后在这个网站上获取：https://域名/ 获取过程可能会有延时，多点几次就好。
二、编写猜拳智能合约
Remix上新建域名文件，并写入以下内容：
// SPDX-License-Identifier: MIT
pragma solidity >=域名 <0.9.0;
contract GuessGame {
event GuessResult(uint playerChoice,uint computerChoice,uint result);
function play(uint playerChoice,uint computerChoice) public returns (bool){
if(playerChoice > 0 && playerChoice <=3 && computerChoice > 0 && computerChoice <=3){
if(playerChoice == computerChoice){
//平手
emit GuessResult(playerChoice,computerChoice,1);
}else if(playerChoice == (computerChoice + 1) % 3){
//电脑赢了
emit GuessResult(playerChoice,computerChoice,2);
}else{
//其余都算玩家赢了
emit GuessResult(playerChoice,computerChoice,3);
}
return true;
}else{
return false;
}
}
}
编译后部署到Ropsten上，当然首先到MetaMask连上Ropsten网络，并且账户上有足够的eth
部署成功后，这里其实就显示了智能合约上的play方法了，可以直接在这里传值点击transact进行调用，调用成功后再控制台会输出结果，点击Debug可以查看详细信息
三、前端用域名调用智能合约
我后台因为集成了项目，所以是用jsp写的，大家简单点可以直接写Html，先贴下文件目录结构：
1、复制ABI文件：在Remix上点击复制ABI文件内容，并新建域名文件，将复制的abi内容贴进去
2、引入域名等其它js
3、编写域名文件：
<%--
Created by IntelliJ IDEA.
User: ****
Date: 2021/12/13
Time: 21:35
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://域名/jsp/jstl/core"%>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*" >
<c:set var="ctx" value="${域名extPath}" />
<script type="text/javascript" src="${ctx}/resource/js/jquery-1.域名.js" charset="utf-8"></script>
<script type="text/javascript" src="${ctx}/resource/js/域名-1.域名"></script>
<title>猜拳游戏</title>
<style>
*{margin:0; padding: 0; font-weight: 200;}
.player,.computer{
width: 50%;
float: left;
padding-top: 30px;
text-align: center
}
.player,.computer dt{
font-size: 28px;
}
.player img,.computer img{
margin-top: 30px;
width: 30%;
}
.player img{
transform:rotateY(180deg);
}
.select{
text-align: center;
font-size: 18px;
max-width: 800px;
margin: 0 auto;
padding-top: 2%;
}
.select dt{
width: 100%;
overflow: hidden;
line-height: 50px;
}
.select button{
width: 20%;
border:none;
color: #fff;
border-radius: 8px;
line-height: 45px;
margin: 0 5%;
outline: none;
font-size: 18px;
cursor: pointer;
}
#info{
width: 100%;
text-align: center;
overflow: hidden;
font-size: 25px;
line-height: 50px;
color: red;
padding-top: 2%;
opacity: 0;
}
</style>
<script type="text/javascript">
var web3,guessGameABI,guessGameContract,refresh_timer;
$(function(){
web3Auth();
jspFun();
//var version = 域名ion;
//域名(version);
//域名.getNetworkType().then(域名);
域名ccounts(域名);
$.getJSON(\'/resource/abi/域名\',function(data){
guessGameABI = data;
//创建合约实例
guessGameContract = new 域名ract(guessGameABI, \'0x85daAd7dbB5Ba1B4020444Ab2f1D84c58d409edF\', []);
域名(域名ultAccount);
域名(域名ultBlock);
listenEvent();
});
})
function listenEvent(){
域名sResult({
//filter: {myIndexedParam: [20,23], myOtherIndexedParam: \'0x123456789...\'}, // 使用数组表示 或：如 20 或 23。
//fromBlock: 0
}, function(error, event){
域名(event);
}).on("connected", function(subscriptionId){
域名(subscriptionId);
}).on(\'data\', function(event){
域名(event); // 与上述可选的回调结果相同
//uint playerChoice,uint computerChoice,uint result
resultDeal(域名erChoice,域名uterChoice,域名lt);
}).on(\'changed\', function(event){
// 从本地数据库中删除事件
域名("事件删除");
}).on(\'error\', function(error, receipt) {
// 如果交易被网络拒绝并带有交易收据，第二个参数将是交易收据。
域名("事件被网络拒绝");
});
}
function resultDeal(player_choice,computer_choice,r){
//var r = 域名域名mber();
var info = "未知";
if(r == 1){
info = "平手";
}else if(r == 2){
info = "你输了";
}else if(r == 3){
info = "你赢了";
}
update_page(player_choice, computer_choice, info);
}
function update_page(player,computer,result){
域名(player+"----"+computer+"-----"+result);
var info = 域名lementById(\'info\');
var playerImg = 域名lementById(\'player\');
var comImg = 域名lementById(\'computer\');
域名ity = \'0\';
clearInterval(refresh_timer);
域名 = \'/resource/images/\'+player+\'.png\';
域名 = \'/resource/images/\'+computer+\'.png\';
域名ity = 1;
域名rText = result;
}
function guess(player_choice){
//域名oinbase().then(域名);
//1:剪刀 2:石头 3:布
var result;
player_choice = parseInt(player_choice);
computer_choice = parseInt(域名om()*3)+1;
域名lementById(\'info\').innerText = \'\';
域名(player_choice,computer_choice).send({
from: \'0x229Ea411D368C97b008c7bc19B01Fdd813163701\'
}).on(\'transactionHash\', function(hash){
域名(hash);
beginGame();
}).on(\'confirmation\', function(confirmationNumber, receipt){
域名(confirmationNumber);
域名(receipt);
}).on(\'receipt\', function(receipt) {
// receipt 相关例子
域名(receipt);
}).on(\'error\', function(error, receipt) { // 如果交易被网络拒绝并带有交易收据，则第二个参数将是交易收据。
域名(error);
域名(receipt);
});
}
function beginGame(){
var playerImg = 域名lementById(\'player\');
var comImg = 域名lementById(\'computer\');
refresh_timer = setInterval(function(){
this.n?this.n:this.n=1;this.n++
this.n>3?this.n=1:this.n;
域名 = \'/resource/images/\'+this.n+\'.png\';
域名 = \'/resource/images/\'+this.n+\'.png\';
},100);
}
function jspFun(){
choices = $(\'button\');
for(var i=0; i<域名th; i++){
choices[i].onclick = function(){
guess(域名e);
}
}
}
function web3Auth(){
//初始化过程
//var Web3 = require(\'web3\');
if (typeof web3 !== \'undefined\') {
域名("init web3");
web3 = new Web3(域名entProvider);
} else {
域名("init new web3");
// set the provider you want from 域名iders
web3 = new Web3(new 域名Provider("http://localhost:8545"));
}
}
</script>
</head>
<body>
<div class="computer">
<dl>
<dt>对手</dt>
<dd><img src="${ctx}/resource/images/域名" id="computer" alt=""></dd>
</dl>
</div>
<div class="player">
<dl>
<dt>你</dt>
<dd><img src="${ctx}/resource/images/域名" id="player" alt=""></dd>
</dl>
</div>
<div id="info">平手</div>
<div class="select">
<dl>
<dt>点击下列图标选择要出的选项：</dt>
<dd>
<button value="1"><img src=\'${ctx}/resource/images/域名\' style="width:80px"></button>
<button value="2"><img src=\'${ctx}/resource/images/域名\' style="width:80px"></button>
<button value="3"><img src=\'${ctx}/resource/images/域名\' style="width:80px"></button>
</dd>
</dl>
</div>
</body>
</html>
详细内容参考web3文档看吧，我也是参考文档一点点写的，文档地址：https://域名/docs/域名/
四、运行结果示例：
如果有学习计划的童鞋，可以加我QQ一起交流：
