微信小程序： 摇色子

---

前言

甲乙双方摇色子，谁的点数大 谁赢

代码：

1、wxml

页面布局

<view class="out_wrap">
  <text>甲:</text>
  <text>乙</text>

<view class="fist_result">
<image src="{{img[index].index}}"></image>
<!-- <text>{{resultText}}</text> -->
<image src="{{img[index1].index}}"></image>

</view>
<view class="button_wrap">
<view class="title">{{title}}</view>
<button bindtap="btnStart">开始</button>
<button bindtap="btnEnd">结束</button>
</view>
</view>

2、wxss

页面样式

image {
  width: 100px;
  height: 100px;
}

.out_wrap {
  width: 100vw;
  height: 100vh;
  text-align: center;
  padding-top: 20rpx;
  background: rgba(3, 29, 11, 0.6);
}


.out_wrap text{
color: #fff;

}
.fist_result {
  /* 弹性盒子 */
  display: flex;
 /* 垂直方向的对齐方式 */
  align-items: center;
  height: 300rpx;
  background: rgb(18, 150, 219, 0.1);

}
.fist_result image {
  /* 外边距 */
  margin: 0 76rpx;
}
.button_wrap button {
  /* 行内块 */
  display: inline-block;
  /* 权重  优先级*/
  width: 36vw !important;
  margin: 0 30rpx !important;
}
.title {
  height: 100rpx;
  width: 400rpx;
  margin: 20rpx auto;
  font-size: 40rpx;
  line-height: 100rpx;
  text-align: center;
  border-radius: 10rpx;
  background: rgba(219, 18, 102, 0.1);
  color: #fff;
}

3.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 图片列表
    img: [{
        index: "../../point/1-point.png"
      },
      {
        index: "../../point/2-point.png"
      },
      {
        index: "../../point/3-point.png"
      },
      {
        index: "../../point/4-point.png"
      },
      {
        index: "../../point/5-point.png"
      },
      {
        index: "../../point/6-point.png"
      },

    ],
    index: 0, //存储下标
    index1: 1, //存储下标
    timer: "", //存储计时器
    timers: true, //防止连续点击 类似防抖
    title: "?" //判断文本
  },
//随机获取点数
  li(a) {
    // console.log(a)
    // 获取向下取整随机数
    this.data.index = Math.floor(Math.random() * 6)
    this.data.index1 = Math.floor(Math.random() * 6)
    // 更新数据
    this.setData({
      index: this.data.index,
      index1: this.data.index1
    })
    // console.log(this.data.img[0])

  },
  // 开始按钮
  btnStart() {
    // 防止连续点击
    // clearInterval(this.data.timer)
    // 判断this.data.timers ，
    // this.data.timers 为true执行操作，为false则不执行操作
    if (this.data.timers) {
    this.data.timers = false
      //隔100毫秒换一张图
      console.log("0"+" ")
      this.data.timer = setInterval(() => {
        this.li()
      }, 100)
   }

  },
  // 停止按钮
  btnEnd() {
    // 延时器
   
        // 停止计时器
   
    clearInterval(this.data.timer)
    this.data.timers = true
    // console.log(this.data.index + 1, this.data.index1 + 1)
    // 判断图片点数大小
    if (this.data.index  > this.data.index1 ) {
      // 当index>index1时渲染展示值
      this.data.title = "甲赢了！"
    
      // console.log(this.data.title)
    } else if (this.data.index  == this.data.index1 ) {

      this.data.title = "平局了！"
     
      console.log(this.data.title)
    } else {
      this.data.title = "乙赢了！"
    
    } 
    // 更新数据 
    this.setData({
        title: this.data.title
      })

  
  },

页面效果

小白实习一个星期写的，请多指教