石头剪刀布游戏功能中一方是电脑，另一方是玩家。游戏时电脑一直快速切换出拳显示，当玩家选择底部的剪子、石头、布后，则电脑出拳停止，并在紫色方块中显示用户的出拳图片。游戏判断出输赢结果，记录玩家赢的次数。对战一局后可以单击“再来！”按钮重新一局。运行效果如图1所示。

(a)玩家出拳前 (b)玩家出拳后

■ 图1 石头剪刀布游戏运行效果

01、程序设计的思路

1. 控制剪子、石头、布的快速切换

猜拳游戏的核心就是快速切换剪子、石头、布三个图像，电脑的出拳一直是动态切换的，一直到用户选择剪子、石头、布的图片后才停止。这里将这三个图像文件名存储在一个srcs数组中，并使用定时器快速从这个数组中依次循环获取图像文件名，并将该文件名指定的图像显示到image组件中即可。

data: { srcs: [ '/images/shitou.png', '/images/jiandao.png', '/images/bu.png', ] , imgAi: '', // 电脑随机显示的图片 imgUser: '/images/wenhao.png', // 用户选中的图片 }, //设置电脑每间隔0.2s随机显示石头剪刀布 timerGo() { timer = setInterval(this.change, 200); //200毫秒 }, //设置电脑随机显示石头剪刀布，0对应石头，1对应剪刀、2对应布 change() { this.setData({ imgAi: this.data.srcs[parseInt(Math.random() * 3)], }) },

这里涉及到两个主要变量：srcs（图片数组）和imgAi（电脑出拳），这两个都定义在data对象中。

本游戏对石头、剪子、布进行编号，其中0对应石头，1对应剪刀、2对应布。所以电脑随机出拳就是产生0~2之间的随机自然数。

这里使用了Math中的parseInt()函数和Math中的random()函数，其中random()函数会产生0~1之间的小数，当Math.random() * 3时，random函数就会生成0~3之间的一个随机小数，然后通过parseInt()函数进行取整处理得到0~2之间的随机自然数。接着通过this.data.srcs[parseInt(Math.random()*3)]就完成了使电脑随机选择石头剪刀布中的一种情况。

2. 用户出拳

用户出拳比较简单，这里提供3个图像组件（image）供用户单击选择。对此3个图像组件分别绑定单击事件，单击事件获取并识别那个image图像组件，从而得知玩家用户的出拳。

02、程序设计的步骤

新建一个微信小程序后，在app.json中修改原有的"window"值，实现导航条标题文字为"石头剪刀布游戏"，具体如下：

"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "石头剪刀布游戏", "navigationBarTextStyle": "black"

1. 游戏布局

猜拳游戏的布局是纵向显示4个文本组件（text）、5个图像组件（image）和1个按钮组件（button）。在创建小程序工程时，默认建立了两个页面：index和logs。我们不需要管logs，在这个例子中只需修改和index页面相关的文件，index是小程序第一个显示的页面，其中index.wxml文件是index页面的布局文件。

按猜拳游戏的布局修改index.wxml文件如下:

<!--pages/index/index.wxml--> <view class="container"> <text class="win-text">你已经获胜了</text> <text class="win-num">{{winNum}}次</text> <view class="result"> <image src="{{imgAi}}" class="imgAi"></image> <text class="notice">{{notice}}</text> <image src="{{imgUser}}" class="imgUser"></image> </view> <view class="test"> <text class="notice-punches">出拳吧，少年~</text> <view class="imageGroup"> <image type="primary" class="btn" bindtap="btnclick" data-choose="0" src="/images/shitou.png" class="image"></image> <image type="primary" class="btn" bindtap="btnclick" data-choose="1" src="/images/jiandao.png" class="image"></image> <image type="primary" class="btn" bindtap="btnclick" data-choose="2" src="/images/bu.png" class="image"></image> </view> </view> <button class="btn-again" bindtap="again">再来！</button> </view> 

在这段代码中，image和text组件的内容都需要动态改变，所以image组件的src属性和text组件的文本值（夹在<textclass="win-num">和</text>之间的部分）都分别于一个变量绑定，这是小程序的一个重要特性。在改变组件的属性值时，并不需要直接获取该组件的实例，而只需将该属性与某个同类型的变量绑定，一旦该变量的值改变，属性值也就会随之改变了，绑定变量的格式是“{{变量名}}”。

下面2个<image>是显示电脑出的拳图片和玩家选择的拳图片。

<view class="result"> <image src="{{imgAi}}" class="imgAi"></image> <text class="notice">{{notice}}</text> <image src="{{imgUser}}" class="imgUser"></image> </view>

以下三个<image>是供玩家选择的出拳图片。bindtap绑定单击事件，data-choose用于单击时识别那个<image>。

<image type="primary" class="btn" bindtap="btnclick" data-choose="0" src="/images/shitou.png" class="image"></image> <image type="primary" class="btn" bindtap="btnclick" data-choose="1" src="/images/jiandao.png" class="image"></image> <image type="primary" class="btn" bindtap="btnclick" data-choose="2" src="/images/bu.png" class="image"></image>

对应样式文件index.wxss如下：

.win-text { text-align: center; } .win-num { color: red; text-align: center; } .result { height: 160rpx; display: inline-block; } .notice { width: 100rpx; color: red; /*height:140rpx;*//*line-height:140rpx;*/ text-align: center; display: inline-block; padding-top: 0rpx; } .imgAi { width: 140rpx; height: 140rpx; padding: 10rpx 0 10rpx 10rpx; } .imgUser { width: 140rpx; height: 140rpx; padding: 10rpx 0 10rpx 10rpx; } .notice-punches { text-align: center; display: block; padding-top: 20rpx; } image { width: 100px; height: 100px; border-radius: 50%; }

并在小程序工程根目录建立一个images目录，将剪子、石头和布三个图片文件和一个wenhao.png放到该目录中。对应图片下图2所示。

■ 图2 石头剪刀布图片

2. 游戏脚本

// pages/index/index.js var timer; //定时器 Page({ data: { srcs: [ '/images/shitou.png', '/images/jiandao.png', '/images/bu.png', ], imgAi: '', //电脑随机显示的图片 imgUser: '/images/wenhao.png', //用户选中的图片 notice: '', //猜拳对比结果 winNum: wx.getStorageSync('winNum'), //用户猜拳赢的次数 btnpunches: false, //用户是否单击出拳，false表示未出拳 }, onLoad: function () { this.timerGo(); }, //设置电脑每间隔0.2s随机显示石头剪刀布 timerGo: function () { timer = setInterval(this.change, 200); //200毫秒 }, //设置电脑随机显示石头剪刀布 change: function () { this.setData({ imgAi: this.data.srcs[parseInt(Math.random() * 3)], }) },

btnclick:function(e)主要用来处理单（点）击事件，其中e是方法的回调，当我们触发了单击事件，小程序会调用该方法并传入一个Object对象，这个Object对象主要存储了单击事件的一些信息。其中当玩家单击剪刀的时候，在Object对象e的target下有个dataset中有个choose记录了玩家的选择。例如用户选择的石头，this.setData({imgUser: '/images/shitou.png'})将用户选择的石头图片设置给imgUser变量从而更新页面的显示。同时clearInterval(timer)清除计时器，这样相当于停止电脑方的剪子、石头、布三个图像切换，并在imgAi记录电脑方的出拳图片。

后面根据玩家的选择和电脑的出拳情况判断出输赢。

//当用户单击下面方框的石头剪刀布，将用户数据设置为对用的图片 btnclick:function (e) { if (this.data.btnpunches == true) { //用户已出拳，直接返回 return; } var num = this.data.winNum; //用户赢的次数 this.setData({ //先假设的值 notice: '你输了', btnpunches: true, }) //以下是赢的情况 if (e.target.dataset.choose == 0) { //用户选择石头 this.setData({ imgUser: '/images/shitou.png', //将用户选择的石头图片设置给imgUser变量 }) //清除计时器 clearInterval(timer); if (this.data.imgAi == '/images/jiandao.png') { //电脑是刀 num++; wx.setStorageSync('winNum', num) this.setData({ notice: '你赢了', winNum: num, }) } } else if (e.target.dataset.choose == 1) { //用户选择剪刀 this.setData({ imgUser: '/images/jiandao.png', //将用户选择的剪刀图片设置给imgUser变量 }) //清除计时器 clearInterval(timer); if (this.data.imgAi == '/images/bu.png') { //电脑是布 num++; wx.setStorageSync('winNum', num) //本地缓存赢的次数 this.setData({ notice: '你赢了', winNum: num, }) } } else { //用户选择布 this.setData({ imgUser: '/images/bu.png', //将用户选择的布图片设置给imgUser变量 }) //清除计时器 clearInterval(timer); if (this.data.imgAi == '/images/shitou.png') { //电脑是石头 num++; wx.setStorageSync('winNum', num) this.setData({ notice: '你赢了', winNum: num, }) } } //以下是平局的情况 if (this.data.imgAi == this.data.imgUser) { this.setData({ notice: '平局', }) //清除计时器 clearInterval(timer); } }, 

again()是再来按钮事件，电脑重新启动猜拳。

again() { if (this.data.btnpunches == false) { //用户还未出拳，不能再来 return; } this.timerGo(); //电脑启动猜拳，每间隔0.2s随机显示石头剪刀布 this.setData({ btnpunches: false, //设置为用户未出拳状态 imgUser: '/images/wenhao.png', notice: ' ', }) }, })

至此完成剪刀石头布游戏。

海报图正在生成中...

竖版 宽版