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


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中的this指针
Mar 18 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
javascript自定义的addClass()方法
May 28 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
JavaScript控制台的更多功能
Apr 28 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异常处理技术,顶级异常处理器
2012/06/13 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
Python模拟三级菜单效果
2017/09/11 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
女大学生自我鉴定
2013/12/09 职场文书
市场营销管理制度
2014/01/29 职场文书
三方合作协议书范本
2014/04/18 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
药剂专业求职信
2014/06/20 职场文书
公务员检讨书
2014/11/01 职场文书
2019教师的学习计划
2019/06/25 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
python playwright之元素定位示例详解
2022/07/23 Python
使用CSS实现音波加载效果
2023/05/07 HTML / CSS