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


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 相关文章推荐
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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 一元分词算法
2009/11/30 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
使用JS动态显示文本
2017/09/09 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
js实现微信聊天效果
2020/08/09 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
python生成密码字典的方法
2018/07/06 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
小学运动会演讲稿
2014/08/25 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
工作服管理制度范本
2015/08/06 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android