微信小程序 扎金花简单实例

前端之家收集整理的这篇文章主要介绍了微信小程序 扎金花简单实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序 扎金花

实现效果图:

app.json:

  index.js:

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,score:0

})

}else{

clearInterval(this.go)
this.setData({
flag:true,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[i]>newarr[j]){
var tmp = newarr[i];
newarr[i] = 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:

  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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

原文链接:https://www.f2er.com/weapp/41417.html

猜你在找的微信小程序相关文章