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

微信小程序  扎金花

实现效果图：

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[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:

<view style="text-align:center;position:fixed;top:10px;left:0;width:100%;color:green;font-weight:bolder" hidden="{{hidden}}">恭喜你得了{{score}}分！</view>
<view style="clear:both;overflow:hidden;display:flex;margin-top:50px">
  <view class="container" style="background:{{b1}};" >
    <text class="text">{{num1}}</text>
    <image class="img" src="../../images/{{imgNum1}}.png" style="transform: rotate({{deg1}}deg)"></image>
    <text class="text1">{{num1}}</text>
  </view>
 
  <view class="container" style="background:{{b2}};">
    <text class="text">{{num2}}</text>
    <image class="img" src="../../images/{{imgNum2}}.png" style="transform: rotate({{deg2}}deg)"></image>
    <text class="text1">{{num2}}</text>
  </view>
  <view class="container" style="background:{{b3}};">
    <text class="text">{{num3}}</text>
    <image class="img" src="../../images/{{imgNum3}}.png" style="transform: rotate({{deg3}}deg)"></image>
    <text class="text1">{{num3}}</text>
  </view>
</view>
 
<button bindtap="start" type="{{butype}}" style="margin:20px">{{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>

　　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

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

# 微信小程序  # 扎金花  # 扎金花详解  # 扎金花实例  # 微信小程序 template模板详解及实例  # 微信小程序 基础组件与导航组件详细介绍  # 微信小程序 UI与容器组件总结  # 微信小程序 常用工具类详解及实例  # 微信小程序 基础知识css样式media标签  # 微信小程序 http请求封装详解及实例代码  # 微信小程序 开发经验整理  # 微信小程序开发之相册选择和拍照详解及实例代码  # 三张  # 希望能  # 两张  # 谢谢大家  # 之争  # 恭喜你  # random  # ceil  # default  # floor  # primary  # Math  # start  # function  # hidden  # score  # butext  # setInterval  # var  # setData 

相关文章： 定制建站模板如何实现SEO优化与智能系统配置？18字教程  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  定制建站流程步骤详解：一站式方案设计与开发指南  导航网站建站方案与优化指南：一站式高效搭建技巧解析  网站制作报价单模板图片,小松挖机官方网站报价？  如何注册花生壳免费域名并搭建个人网站？  整蛊网站制作软件,手机不停的收到各种网站的验证码短信,是手机病毒还是人为恶搞?有这种手机病毒吗？  怎么用手机制作网站链接,dw怎么把手机适应页面变成网页？  如何快速搭建高效服务器建站系统？  如何高效利用亚马逊云主机搭建企业网站？  高防服务器租用如何选择配置与防御等级？  如何快速配置高效服务器建站软件？  湖北网站制作公司有哪些,湖北清能集团官网？  如何快速搭建虚拟主机网站？新手必看指南  家庭建站与云服务器建站，如何选择更优？  如何在Golang中处理模块冲突_解决依赖版本不兼容问题  建站之星在线版空间：自助建站+智能模板一键生成方案  如何通过商城自助建站源码实现零基础高效建站？  建站主机选虚拟主机还是云服务器更好？  建站之星代理商如何保障技术支持与售后服务？  高端企业智能建站程序：SEO优化与响应式模板定制开发  如何高效配置IIS服务器搭建网站？  网站代码制作软件有哪些,如何生成自己网站的代码？  可靠的网站设计制作软件,做网站设计需要什么样的电脑配置？  如何在IIS中新建站点并解决端口绑定冲突？  如何在香港服务器上快速搭建免备案网站？  唐山网站制作公司有哪些,唐山找工作哪个网站最靠谱？  焦点电影公司作品,电影焦点结局是什么？  三星网站视频制作教程下载,三星w23网页如何全屏？  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息？  家具网站制作软件,家具厂怎么跑业务？  微信小程序 五星评分(包括半颗星评分)实例代码  如何选择高效便捷的WAP商城建站系统？  魔毅自助建站系统：模板定制与SEO优化一键生成指南  建站之星体验版：智能建站系统+响应式设计，多端适配快速建站  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  建站之星后台密码如何安全设置与找回？  小型网站制作HTML,*游戏网站怎么搭建？  小建面朝正北，A点实际方位是否存在偏差？  高端网站建设与定制开发一站式解决方案 中企动力  昆明高端网站制作公司,昆明公租房申请网上登录入口？  如何实现建站之星域名转发设置？  c# F# 的 MailboxProcessor 和 C# 的 Actor 模型  高防服务器如何保障网站安全无虞？  c# 在高并发下使用反射发射（Reflection.Emit）的性能  实现点击下箭头变上箭头来回切换的两种方法【推荐】  制作网站哪家好,cc、.co、.cm哪个域名更适合做网站？  天河区网站制作公司,广州天河区如何办理身份证？需要什么资料有预约的网站吗？  北京网站制作公司哪家好一点,北京租房网站有哪些？  如何获取免费开源的自助建站系统源码？