小程序游戲開發(fā)之扎金花的示例-創(chuàng)新互聯(lián)

這篇文章主要介紹了小程序游戲開發(fā)之扎金花的示例，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專業(yè)領(lǐng)域包括成都網(wǎng)站設(shè)計、網(wǎng)站制作、商城網(wǎng)站建設(shè)、微信營銷、系統(tǒng)平臺開發(fā)，與其他網(wǎng)站設(shè)計及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)建站的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

微信小程序扎金花

實現(xiàn)效果圖：

小程序游戲開發(fā)之扎金花的示例

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分,如果兩個數(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ā)之扎金花的示例”這篇文章對大家有幫助，同時也希望大家多多支持創(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://muchs.cn/article26/dpsejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、虛擬主機、電子商務(wù)、全網(wǎng)營銷推廣、網(wǎng)站營銷、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容