微信小程序開發(fā)簡單入門Demo 石頭剪刀布

//index.js  

//獲取應用實例  

var app = getApp()  

Page({  

  data:{  

    // text:"這是一個頁面"  

    //0是石頭、1是剪刀、2是布  

    game:[0,1,2],  

    computer:null,  

    my:null,  

  },  

  onLoad:function(options){  

    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)  

    console.log("----onLoad-----")  

  },  

  onReady:function(){  

    // 頁面渲染完成  

    console.log("----onReady-----")  

  },  

  onShow:function(){  

    // 頁面顯示  

    console.log("----onShow-----")  

  },  

  onHide:function(){  

    // 頁面隱藏  

    console.log("----onHide-----")  

  },  

  onUnload:function(){  

    // 頁面關閉  

    console.log("----onUnload-----")  

  },  

  // toLog:function(){  

  //   wx.navigateTo({url:"../logs/logs?id=1"})  

  // },  

  btnclick:function(e){  

    var random=Math.round(Math.random()*2);  

    this.setData({computer:random})  

    console.log(e.target.dataset.choose)  

    this.setData({my:e.target.dataset.choose})  

  }  

})<pre class="javascript" name="code">  

btnclick:function(e){  

   var random=Math.round(Math.random()*2);  

   this.setData({computer:random})  

   console.log(e.target.dataset.choose)  

   this.setData({my:e.target.dataset.choose})  

 }  

<!--index.wxml-->  

<view class="container">  

  <view wx:if="{{computer==0}}">  

    計算機：石頭  

  </view>  

  <view wx:elif="{{computer==1}}">  

    計算機：剪刀  

  </view>  

  <view wx:elif="{{computer==2}}">  

    計算機：布  

  </view>  

  <view wx:else>  

    計算機:你個渣渣  

  </view>  

  <view wx:if="{{my==0}}">  

    我：石頭  

  </view>  

  <view wx:elif="{{my==1}}">  

    我：剪刀  

  </view>  

  <view wx:elif="{{my==2}}">  

    我：布  

  </view>  

  <view wx:else>  

    我：  

  </view>  

   <view class="test">  

      <view class="imageGroup">  

        <image type="primary" class="btn" bindtap="btnclick" data-choose="0" src="../../image/shitou.png" class="image"></image>  

        <image type="primary" class="btn" bindtap="btnclick" data-choose="1" src="../../image/jiandao.png" class="image"></image>  

        <image type="primary" class="btn" bindtap="btnclick" data-choose="2" src="../../image/bu.png" class="image"></image>  

      </view>  

   </view>  

  <view wx:if="{{my==computer}}">  

    所以，平局了  

  </view>  

  <view wx:elif="{{my!=computer}}">  

    <view wx:if="{{computer==0&&my==1}}">  

      所以，你輸了  

    </view>  

    <view wx:if="{{computer==0&&my==2}}">  

      所以，你贏了  

    </view>  

    <view wx:if="{{computer==1&&my==0}}">  

      所以，你贏了  

    </view>  

    <view wx:if="{{computer==1&&my==2}}">  

      所以，你輸了  

    </view>  

    <view wx:if="{{computer==2&&my==0}}">  

      所以，你輸了  

    </view>  

    <view wx:if="{{computer==2&&my==1}}">  

      所以，你贏了  

    </view>  

  </view>  

</view>