微信小程序之猜拳游戏

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

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

　　这是实现的效果图

　　一个小程序页面，一般有三个部分文件组成，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;

}

 

　　该页面的实现到这里就结束了，谨以文来纪念我的第一个小程序的诞生。

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