---恢復內(nèi)容開始---
最近幾天在學習小程序,看了網(wǎng)上的學習視頻,于是自己搗鼓著做出了視頻里面的小程序。
這是實現(xiàn)的效果圖
一個小程序頁面,一般有三個部分文件組成,index.js 這個文件里面放的是實現(xiàn)小程序的js代碼;index.wxml文件里面放的是頁面的結(jié)構(gòu)層代碼;相當于html,index.wxss放的是樣式層代碼,相當于css代碼。
index.wxml運用的是小程序里面的組件,代碼如下:
-
<!--index.wxml-->
-
<view class="container">
-
-
<text class="win-text">你已經(jīng)獲勝了</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: '', // 猜拳對比結(jié)果
-
winNum: wx.getStorageSync('winNum'), //用戶猜拳贏的次數(shù)
-
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)],
-
})
-
},
-
-
//當用戶點擊下面方框的石頭剪刀布,將用戶數(shù)據(jù)設置為對用的圖片
-
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'
|