微信小遊戲---猜拳遊戲

最近幾天在學習小程式，看了網上的學習視訊，于是自己搗鼓着做出了視訊裡面的小程式。

這是實作的效果圖

一個小程式頁面，一般有三個部分檔案組成，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' 
           

本文作者：淺草yan

原文位址： 微信小程式執行個體-猜拳遊戲-教程-小程式社群-微信小程式-微信小程式開發社群-小程式開發論壇-微信小程式聯盟