WeChatアプリで簡単にサイコロ遊びができます。
3654 ワード
本稿の例では、WeChatアプレットの実现サイコロゲームの具体的なコードを共有します。
ページコード
・


・

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
ページコード
<view class='top'>{{txt}}</view>
<view class='point1'>
<image src='{{one_img}}'></image>
</view>
<view class='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{
width: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.setData({
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],
msg:' ',
flag:true,
txt:' :'+obj.data.total,
})
}
},
})
画像の素材と効果図






以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。