微信小程序——猜拳游戏

// app.json
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

 

/* index.wxss */
.userinfo{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
.imageStyle{
  width: 500rpx;
  height: 500rpx;
  margin: 40rpx;
}

<!-- index.wxml -->
<view class='userinfo'>
  <text style='textStyle'>猜拳游戏</text>
  <view class='userinfo2'>
  <image class='imageStyle' src='{{imagePath}}'></image>
  <button class='buttonStyle' bindtap='guess'>{{title}}</button>
  </view>
</view>

//index.js
var app = getApp()
var imagePaths = ["../../images/1.png", "../../images/2.png", "../../images/3.png"];
var imageIndex = 0;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imagePath: imagePaths[0],
    title: '开始',
    isRunning: false,
    userInfo: {},
  },
  change: function(e) {
    imageIndex++;
    if (imageIndex > 2) {
      imageIndex = 0;
    }
    this.setData({
      imagePath: imagePaths[imageIndex]
    })
  },
  guess: function(e) {
    
    let isRunning = this.data.isRunning;
    if (!isRunning) {
      this.setData({
        title: "停止",
        isRunning: true
      });
      this.timer = setInterval((function() {
        this.change()
      }).bind(this), 100);
    } else {
      this.setData({
        title: "开始",
        isRunning: false
      });
      this.timer && clearInterval(this.timer);
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function() {
    var that = this
  }
})