微信小程序游戏开发│石头剪刀布游戏（附源码）

Posted 2022-09-14 TiAmo zhang

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

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