小程序|微信小程序游戏开发│石头剪刀布游戏(附源码)

小程序|微信小程序游戏开发│石头剪刀布游戏(附源码)
文章图片

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

在这段代码中,image和text组件的内容都需要动态改变,所以image组件的src属性和text组件的文本值(夹在和之间的部分)都分别于一个变量绑定,这是小程序的一个重要特性。在改变组件的属性值时,并不需要直接获取该组件的实例,而只需将该属性与某个同类型的变量绑定,一旦该变量的值改变,属性值也就会随之改变了,绑定变量的格式是“{{变量名}}”。
下面2个是显示电脑出的拳图片和玩家选择的拳图片。
{{notice}}

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

对应样式文件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: ' ', }) }, })

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

    推荐阅读