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


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 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python isinstance判断对象类型
2008/09/06 Python
Python生成验证码实例
2014/08/21 Python
Python实现拼接多张图片的方法
2014/12/01 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python妙用之编码的转换详解
2017/04/21 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python实现微信自动回复机器人功能
2019/07/11 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Python小白垃圾回收机制入门
2020/06/09 Python
存储过程和sql语句的优缺点
2014/07/02 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
总裁秘书岗位职责
2013/12/04 职场文书
个人主要事迹材料
2014/08/26 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
Redis高并发缓存架构性能优化
2022/05/15 Redis