[笔记]微信小程序开发《番外》骰子 小游戏

参考
参考

前言

• 微信小程序框架中的单向数据绑定应用
• 微信小程序框架中按钮组件的使用以及的事件绑定技术
• 微信小程序框架中视图模版的定义与使用
• CSS3 flex弹性布局（参考的是阮一峰前辈的Flex教程一文中的骰子实例）

骰子 小游戏

创建一个默认小程序项目

Page/Index

index.js

Page({
  global : {
      timer : null ,
      isRand : false
  },
  data: {
    dice : ['first','second','third','fourth','fifth','sixth'],
    buttonType : 'primary',
    buttonValue : '摇一摇',
    num : 0
  },
  shake : function () { 
    let me = this;
    this.global.isRand = !this.global.isRand;
    if ( this.global.isRand ) {
      this.global.timer = setInterval(function (){
        let num = Math.floor(Math.random()*6);
        me.setData({num : num});
      },50);
    } else {
      clearInterval(this.global.timer);
    }

    this.setData({
      dice: this.data.dice, 
      buttonType : (this.global.isRand) ? 'default' : 'primary',
      buttonValue : (this.global.isRand) ? '点击停止' : '摇一摇',
    });

  },
})

index.wxml

<!-- 骰子模版视图 -->
<template name="first">
    <view class="first face">
        <span class="pip"></span>
    </view>
</template>
<template name="second">
    <view class="second face">
        <span class="pip"></span>
        <span class="pip"></span>
    </view>
</template>
<template name="third">
    <view class="third face">
        <span class="pip"></span>
        <span class="pip third-item-center"></span>
        <span class="pip"></span>
    </view>
</template>
<template name="fourth">
    <view class="fourth face">
        <view class="column">
            <span class="pip"></span>
            <span class="pip"></span>
        </view>
        <view class="column">
            <span class="pip"></span>
            <span class="pip"></span>
        </view>
    </view>
</template>
<template name="fifth">
    <view class="fifth face">
        <view class="column">
            <span class="pip"></span>
            <span class="pip"></span>
        </view>
        <view class="column fifth-column-center">
            <span class="pip"></span> 
        </view> 
        <view class="column">
            <span class="pip"></span>
            <span class="pip"></span>
        </view>
    </view>
</template>
<template name="sixth">
    <view class="sixth face">
        <view class="column">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </view> 
        <view class="column">
            <span class="pip"></span>
            <span class="pip"></span>
            <span class="pip"></span>
        </view>
    </view>
</template>
<!--index.wxml-->
<view class="flex-container"> 
    <view class="dice-box">
        <block><template is="{{dice[num]}}"></template></block>
    </view>
    <view class="button-box">
        <button type="{{buttonType}}" size="mini" bindtap="shake" >{{buttonValue}}</button>
    </view>
</view>

index.wxss

.flex-container{
  display:flex;
  height: 100vh;
  background-color:#292929;
  flex-direction : column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.dice-box{
  padding: 10px;
} 

/* 筛子容器公用样式 */
.face {
  display: flex;
  margin: 5px;
  padding: 4px;
  background-color:#e7e7e7;
  width: 104px;
  height: 104px;
  object-fit: contain;
  border-radius:10%;
  box-shadow: inset 0 5px white,
              inset 0 -5px #bbb,
              inset 5px 0 #d7d7d7,
              inset -5px 0 #d7d7d7;
}


/* 筛子中的点的样式 */
.pip {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin:4px;
  background-color: #333;
  box-shadow: inset 0 3px #111,
              inset 0 -3px #555;
}

/* 面公用样式 */


/* 第一面布局方式 */
.first {
  justify-content: center;
  align-items: center;
}

/* 第二面布局方式 */
.second {
  justify-content: space-between;
}
.second .pip:last-child {
  align-self: flex-end;
}

/* 第三面布局方式 */
.third {
  justify-content: space-between;
}
.third .pip.third-item-center {
  align-self: center; 
}
.third .pip:last-child {
  align-self: flex-end;
}


/* 第四面布局方式 */
.fourth {
  justify-content: space-between; 
}
.fourth .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}

/* 第五面布局方式 */
.fifth {
  justify-content: space-between; 
}
.fifth .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
}
.fifth .column.fifth-column-center{
  justify-content: center;
}

/* 第六面布局方式 */
.sixth { 
  justify-content:space-between;
}
.sixth .column {
  display: flex;
  flex-direction:column;
  justify-content:space-around;
}

效果图