Heim > Artikel > WeChat-Applet > Mini-Programm zur Spieleentwicklung Zha Jinhua

Mini-Programm zur Spieleentwicklung Zha Jinhua

巴扎黑Original: 2017-08-23 16:16:433476Durchsuche

WeChat Mini-Programm Zha Jinhua

Implementierungsrenderings:

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: &#39;激烈的竞技游戏&#39;,
            path: &#39;/pages/index/index&#39;
        }
    }
})

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="max-width:90%" / alt="Mini-Programm zur Spieleentwicklung Zha Jinhua" > 
    <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="max-width:90%" / alt="Mini-Programm zur Spieleentwicklung Zha Jinhua" > 
    <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="max-width:90%" / alt="Mini-Programm zur Spieleentwicklung Zha Jinhua" > 
    <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.如果三张数字相同得40分，如果三张数字是连续的得30分,如果两个数字是相同的得10分
   </view> 
   <view>
    2.如果三张花色一样得20分，如果两张花色一样得10分
   </view> 
   <view>
    3.三张数字之和
   </view> 
   <view>
    以上所有数字的总和为总分
   </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

Das obige ist der detaillierte Inhalt vonMini-Programm zur Spieleentwicklung Zha Jinhua. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Mini-Programmentwicklung und Analyse von WebinhaltenNächster Artikel：Mini-Programmentwicklung und Analyse von Webinhalten

In Verbindung stehende Artikel

Mehr sehen