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


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实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
JS严格模式知识点总结
Feb 27 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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+MySQL 制作简单的留言本
2009/11/02 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
python实现复制整个目录的方法
2015/05/12 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python实现Dijkstra算法
2018/10/17 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
银行员工辞职信范文
2014/01/20 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
员工自我评价范文
2015/03/11 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS