微信小程序之猜拳游戏

时间:2021-09-08 11:47:39

---恢复内容开始---

  最近几天在学习小程序,看了网上的学习视频,于是自己捣鼓着做出了视频里面的小程序。

  这是实现的效果图

微信小程序之猜拳游戏 

  一个小程序页面,一般有三个部分文件组成,index.js 这个文件里面放的是实现小程序的js代码;index.wxml文件里面放的是页面的结构层代码;相当于html,index.wxss放的是样式层代码,相当于css代码。

index.wxml运用的是小程序里面的组件,代码如下:

<!--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="item">

<text class="notice-punches">出拳吧,少年~</text>

<block wx:for="{{srcs}}" wx:key="*this">
<view class="img-item" id="{{index}}" >
<image src="{{item}}" class="img-size" bindtap="userChooseImg"></image>
</view>
</block>

<button class="btn-again" bindtap="again">再来!</button>

</view>

</view>
 
 
index.js 的代码如下:
//index.js
//获取应用实例
var numAi = 0;
var timer;
Page({
data: {
srcs: [
'/pages/images/shiyou.jpg',
'/pages/images/jiandao.jpg',
'/pages/images/bu.jpg',
],
imgAi: '', // 电脑随机显示的图片
imgUser: '/pages/images/wenhao.jpg', // 用户选中的图片
notice: '', // 猜拳对比结果
winNum: wx.getStorageSync('winNum'), //用户猜拳赢的次数
btnpunches: false, // 是否点击出拳
},

onLoad: function () {
this.timerGo();
},

//设置电脑每间隔0.2s随机显示石头剪刀布
timerGo() {
timer = setInterval(this.change, 200);
},

//设置电脑随机显示石头剪刀布
change() {

if (numAi >= 3) {
numAi = 0;
}
this.setData({
imgAi: this.data.srcs[parseInt(Math.random() * 3)],
})
},

//当用户点击下面方框的石头剪刀布,将用户数据设置为对用的图片
userChooseImg(e) {

if (this.data.btnpunches == true) {
return;
}

var num = this.data.winNum;

this.setData({
notice: '你输了',
btnpunches: true,
})

if (e.currentTarget.offsetLeft == 155) {
this.setData({
imgUser: '/pages/images/shiyou.jpg',
})
//清除计时器
clearInterval(timer);
if (this.data.imgAi == '/pages/images/jiandao.jpg') {
num++;
wx.setStorageSync('winNum', num)
this.setData({
notice: '你赢了',
winNum: num,
})
}

} else if (e.currentTarget.offsetLeft == 280) {
this.setData({
imgUser: '/pages/images/jiandao.jpg',
})
//清除计时器
clearInterval(timer);
if (this.data.imgAi == '/pages/images/bu.jpg') {

num++;
wx.setStorageSync('winNum', num)
this.setData({
notice: '你赢了',
winNum: num,
})
}

} else {
this.setData({
imgUser: '/pages/images/bu.jpg',
})
//清除计时器
clearInterval(timer);
if (this.data.imgAi == '/pages/images/shitou.jpg') {

num++;
wx.setStorageSync('winNum', num)
this.setData({
notice: '你赢了',
winNum:num,
})
}

}

if (this.data.imgAi == this.data.imgUser) {
this.setData({
notice: '平局',
})
//清除计时器
clearInterval(timer);
}
},

//点击再来,电脑重新启动猜拳
again() {

//控制按钮
if (this.data.btnpunches == false) {
return;
}
this.timerGo();
this.setData({
btnpunches: false,
imgUser: '/pages/images/wenhao.jpg',
})
},

})
 
 
index.wxss文件的代码如下:
/**index.wxss**/
.container {
">yellow;
}

.win-text {
text-align: center;
}

.win-num {
color: red;
text-align: center;
}

.result {
height: 160px;
display: inline-block;
}

.notice {
width: 100px;
color: red;
/*height:140px;*//*line-height:140px;*/
text-align: center;
display: inline-block;
padding-top: 0px;
}

.imgAi {
width: 140px;
height: 140px;
padding: 10px 0 10px 10px;
}

.imgUser {
width: 140px;
height: 140px;
padding: 10px 0 10px 10px;
}

.item {
width: 92%;
height: 300px;
">#fff;
margin: 15px;
}

.notice-punches{
text-align:center;
display: block;
padding-top:20px;
}

.img-item {
display: inline-block;
padding: 25px 0 30px 15px;
}

.img-size {
width: 110px;
height: 110px;
border-radius: 50%;
}

.btn-again{
width:80%;
">yellow;
}
 
  该页面的实现到这里就结束了,谨以文来纪念我的第一个小程序的诞生。

 

 

 

---恢复内容结束---