微信小程式實現簡單的搖骰子游戲
阿新 • • 發佈:2021-05-27
本文例項為大家分享了微信小程式實現搖骰子游戲的具體程式碼,供大家參考,具體內容如下
頁面程式碼
<view class='top'>{{txt}}</view> <view class='point1'> <image src='{{one_img}}'></image> </view> <view clCwsDEhfass='point2'> <image src='{{two_img}}'></image> <image src='{{three_img}}'></image> </view> <view class='btn' bindtap='enter'>{{msg}}</view>
樣式程式碼
.top{ width: 220px; height: 30px; font-size: 25px; margin: 20px auto; } .point1 image,.point2 image{ width: 150px; height: 150px; } .point1 image{ display: block; margin:45px auto; } .point2 image{ margin-top: -20px; margin-left: 25px; } .btn{ http://www.cppcns.comwidth:100%; height:60px; background:green; border-radius: 10px; line-height: 60px; text-align: center; font-size: 30px; margin-top: 60px; }
js程式碼
//index.js //獲取應用例項 const app = getApp() Page({ data: { one_img:'../../image/6-point.png',two_img: '../../image/6-point.png',three_img: '../../image/6-point.png',flag:true,timer:null,msg:'搖一搖',total:0,txt:程式設計客棧'恭喜你搖到了:0',//圖片的素材和效果圖會發在最下面 arr:[ '../../image/1-point.png','../../image/2-point.png','../../image/3-point.png','../../image/4-point.png','../../image/5-point.png','../../image/6-point.png',] },enter:function(event){ let obj = this; if(obj.data.flag==true){程式設計客棧 obj.data.timer = setInterval(function () { let one = Math.floor(Math.random() * 6); let two = Math.floor(Math.random() * 6); let three = Math.floor(Math.random() * 6); obj.setDat程式設計客棧a({ one_img: obj.data.arr[one],two_img: obj.data.arr[two],three_img: obj.data.arr[three],flag:false,msg:'停止',total:one+two+three+3,// total:18,txt:'',}) },50); }else{ clearInterval(obj.data.timer); obj.setData({ //one_img: obj.data.arr[5],//two_img: obj.data.arr[5],//three_img: obj.data.arr[5],txt:'恭喜你搖到了:'+obj.data.total,}) } },})
圖片素材和效果圖
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。