這篇文章主要介紹了小程序游戲開發(fā)之扎金花的示例,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、商城網(wǎng)站建設(shè)、微信營銷、系統(tǒng)平臺開發(fā), 與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同,創(chuàng)新互聯(lián)建站的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念,并將策略和執(zhí)行緊密結(jié)合,為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。微信小程序 扎金花
實(shí)現(xiàn)效果圖:
app.json:
{ "pages": ["pages/index/index"], "window": { "navigationBarBackgroundColor": "#333333", "navigationBarTextStyle": "white", "navigationBarTitleText": "炸金花", "backgroundColor": "#ffffff", "backgroundTextStyle": "light", "enablePullDownRefresh": false } }
index.js:
Page({ data: { num1: 1, num2: 2, num3: 3, imgNum1: 1, imgNum2: 2, imgNum3: 3, b1: "white", b2: "white", b3: "white", flag: true, butype: "primary", butext: "開始", hidden: true, score: 0 }, start: function() { var that = this; that.setData({ butype: "default", butext: "停止" }) if (this.data.flag) { this.go = setInterval(function() { that.setData({ num1: Math.ceil(Math.random() * 10), num2: Math.ceil(Math.random() * 10), num3: Math.ceil(Math.random() * 10), imgNum1: Math.ceil(Math.random() * 4), imgNum2: Math.ceil(Math.random() * 4), imgNum3: Math.ceil(Math.random() * 4), b1: "#" + Math.floor(Math.random() * 1000000), b2: "#" + Math.floor(Math.random() * 1000000), b3: "#" + Math.floor(Math.random() * 1000000) }) }, 100) this.setData({ flag: false, hidden: true, score: 0 }) } else { clearInterval(this.go) this.setData({ flag: true, butype: "primary", butext: "開始", b1: "white", b2: "white", b3: "white" }) var n1 = this.data.num1; var n2 = this.data.num2; var n3 = this.data.num3; var img1 = this.data.imgNum1; var img2 = this.data.imgNum2; var img3 = this.data.imgNum3; var result = n1 + n2 + n3; if (img1 == img2 && img2 == img3) { result += 20; } else if (img1 == img2 || img2 == img3 || img1 == img3) { result += 10; } var newarr = new Array(); newarr.push(n1) newarr.push(n2) newarr.push(n3) for (var i = 0; i < newarr.length; i++) { for (var j = i + 1; j < newarr.length; j++) { if (newarr > newarr[j]) { var tmp = newarr; newarr = newarr[j]; newarr[j] = tmp; } } } if (((newarr[2] - newarr[1]) == 1) && ((newarr[1] - newarr[0]) == 1)) { result += 30; } else if (newarr[2] == newarr[1] || newarr[2] == newarr[0] || newarr[0] == newarr[1]) { result += 10; } else if (newarr[2] == newarr[1] && newarr[2] == newarr[0]) { result += 40; } this.setData({ hidden: false, score: result }) } }, onShareAppMessage: function() { return { title: "大小之爭", desc: '激烈的競技游戲', path: '/pages/index/index' } } })
index.wxml:
<html> <head></head> <body> <view style="text-align:center;position:fixed;top:10px;left:0;width:100%;color:green;font-weight:bolder" hidden="pw_hidden"> 恭喜你得了pw_score分! </view> <view style="clear:both;overflow:hidden;display:flex;margin-top:50px"> <view class="container" style="background:pw_b1;"> <text class="text"> pw_num1 </text> <img class="img" src="../../images/pw_imgNum1.png" style="transform: rotate(pw_deg1deg)" /> <text class="text1"> pw_num1 </text> </view> <view class="container" style="background:pw_b2;"> <text class="text"> pw_num2 </text> <img class="img" src="../../images/pw_imgNum2.png" style="transform: rotate(pw_deg2deg)" /> <text class="text1"> pw_num2 </text> </view> <view class="container" style="background:pw_b3;"> <text class="text"> pw_num3 </text> <img class="img" src="../../images/pw_imgNum3.png" style="transform: rotate(pw_deg3deg)" /> <text class="text1"> pw_num3 </text> </view> </view> <button bindtap="start" type="pw_butype" style="margin:20px">pw_butext</button> <view style="font-size:13px;padding:20px;color:gray"> <view> 1.如果三張數(shù)字相同得40分,如果三張數(shù)字是連續(xù)的得30分,如果兩個(gè)數(shù)字是相同的得10分 </view> <view> 2.如果三張花色一樣得20分,如果兩張花色一樣得10分 </view> <view> 3.三張數(shù)字之和 </view> <view> 以上所有數(shù)字的總和為總分 </view> </view> </body> </html>
index.wxss:
.container { width: 30%; height: 200px; position: relative; border: 1px solid #787775; box-sizing: border-box; display: inline-block; flex: 1; margin: 10px; border-radius: 10px; box-shadow: 5px 5px 3px #787775 } .text { width: 30px; height: 30px; position: absolute; top: 15px; left: 15px; font-size: 25px; font-weight: bolder } .img { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px } .text1 { width: 30px; height: 30px; position: absolute; bottom: 15px; right: 15px; font-size: 25px; font-weight: bolder; transform: rotate(180deg) }
1.png:
2.png:
3.png
4.png
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“小程序游戲開發(fā)之扎金花的示例”這篇文章對大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前標(biāo)題:小程序游戲開發(fā)之扎金花的示例-創(chuàng)新互聯(lián)
URL鏈接:http://jinyejixie.com/article26/dpsejg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、虛擬主機(jī)、電子商務(wù)、全網(wǎng)營銷推廣、網(wǎng)站營銷、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容