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


Posted in Javascript onFebruary 21, 2017

微信小程序  扎金花

实现效果图:

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

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

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

 

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

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

Javascript 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
JS实现放烟花效果
Mar 10 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 #Javascript
微信小程序 PHP生成带参数二维码
Feb 21 #Javascript
vue-resource 拦截器使用详解
Feb 21 #Javascript
微信小程序 template模板详解及实例
Feb 21 #Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 #Javascript
Angular实现购物车计算示例代码
Feb 21 #Javascript
原生js实现倒计时--2018
Feb 21 #Javascript
You might like
浅谈PHP中的
2016/04/23 PHP
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
python实现猜拳游戏项目
2020/11/30 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
微博营销计划书
2014/01/10 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
确保工程质量承诺书
2015/04/29 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
golang定时器
2022/04/14 Golang
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android
Redis keys命令的具体使用
2022/06/05 Redis