微信小程序?qū)崿F(xiàn)簡(jiǎn)單的搖骰子游戲
更新時(shí)間：2021年05月26日 11:14:48 作者：Honey-回憶天明
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的搖骰子游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)搖骰子游戲的具體代碼，供大家參考，具體內(nèi)容如下
頁(yè)面代碼
<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
//獲取應(yīng)用實(shí)例
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',
//圖片的素材和效果圖會(huì)發(fā)在最下面
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,
})
}
},
})
圖片素材和效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)登錄滑塊驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
利用js來(lái)實(shí)現(xiàn)縮略語(yǔ)列表、文獻(xiàn)來(lái)源鏈接和快捷鍵列表
本文主要對(duì)利用js來(lái)實(shí)現(xiàn)縮略語(yǔ)列表、文獻(xiàn)來(lái)源鏈接和快捷鍵列表的方法進(jìn)行詳細(xì)分析介紹。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
淺析原生JavaScript中拖拽屬性draggable的使用
這篇文章主要為大家詳細(xì)介紹了原生JavaScript中拖拽屬性draggable使用的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
bootstrap里bootstrap動(dòng)態(tài)加載下拉框的實(shí)例講解
今天小編就為大家分享一篇bootstrap里bootstrap動(dòng)態(tài)加載下拉框的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
javascript實(shí)現(xiàn)的拖拽效果，可以把屏幕上的圖片拖動(dòng)到任意地方，效果平滑，點(diǎn)擊圖片還可以從側(cè)邊展開(kāi)圖片的詳細(xì)信息，非常好的相冊(cè)效果2015-05-05
為了提高網(wǎng)站的加載速度，有一個(gè)很重要的手段就是在用戶(hù)瀏覽過(guò)程中的上游網(wǎng)站做一個(gè)文件的預(yù)加載。2010-04-04
layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改)
今天小編就為大家分享一篇layui+SSM的數(shù)據(jù)表的增刪改實(shí)例(利用彈框添加、修改)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
js 父窗口控制子窗口的行為-打開(kāi)，關(guān)閉，重定位，回復(fù)
技術(shù)要點(diǎn)可以利用windows的open和closed來(lái)對(duì)子窗口的控制,需要父窗口和子窗口之間進(jìn)行互動(dòng)。2010-04-04
我們?cè)趯?xiě)CSS的時(shí)候，會(huì)遇到大量相同的屬性(比如：margin-top:10px)這種屬性幾乎每個(gè)vue頁(yè)面都有。這個(gè)時(shí)候，我們可以把css掛載到全局上，供所有vue頁(yè)面使用，同時(shí)也方便修改。感興趣的同學(xué)可以參考一下2023-04-04
微信小程序基于ColorUI構(gòu)建皮皮蝦短視頻去水印組件
這篇文章主要介紹了微信小程序-基于ColorUI構(gòu)建皮皮蝦短視頻去水印組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-11-11