微信小程序开发一个简单的摇骰子游戏

页面代码

<view class='top'>{{txt}}</view>
<view class='point1'><image src='{{one_img}}'></image>
</view>
<view class='point2'><image src='{{two_img}}'></image><image src='{{three_img}}'></image>
</view>
<view class='btn' bindtap='enter'>{{msg}}</view>

样式代码

.top{width: 220px;height: 30px;font-size: 25px;margin: 20px auto;
}
.point1 image,.point2 image{width: 150px;height: 150px;
}
.point1 image{display: block;margin:45px auto;
}
.point2 image{margin-top: -20px;margin-left: 25px;
}
.btn{width:100%;height:60px;background:green;border-radius: 10px;line-height: 60px;text-align: center;font-size: 30px;margin-top: 60px;
}

js代码

//index.js
//获取应用实例
const app = getApp()Page({data: {one_img:'../../image/6-point.png',two_img: '../../image/6-point.png',three_img: '../../image/6-point.png',flag:true,timer:null,msg:'摇一摇',total:0,txt:'恭喜你摇到了：0',//图片的素材和效果图会发在最下面arr:['../../image/1-point.png','../../image/2-point.png','../../image/3-point.png','../../image/4-point.png','../../image/5-point.png','../../image/6-point.png',]},enter:function(event){let obj = this;if(obj.data.flag==true){obj.data.timer = setInterval(function () {let one = Math.floor(Math.random() * 6);let two = Math.floor(Math.random() * 6);let three = Math.floor(Math.random() * 6);obj.setData({one_img: obj.data.arr[one],two_img: obj.data.arr[two],three_img: obj.data.arr[three],flag:false,msg:'停止',total:one+two+three+3,// total:18,txt:'',})}, 50);}else{clearInterval(obj.data.timer);obj.setData({//one_img: obj.data.arr[5],//two_img: obj.data.arr[5],//three_img: obj.data.arr[5],msg:'摇一摇',flag:true,txt:'恭喜你摇到了:'+obj.data.total,})}},})

图片素材和效果图

微信小程序开发一个简单的摇骰子游戏相关推荐

android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...
微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...
微信小程序开发一个小型商城（五、商品详情）
上一篇文章:微信小程序开发一个小型商城(四.商品列表) 在从上一个界面跳转过来,会看到商品详情这个界面goods_detail :如下图所示: 页面分析:从上到下:一个轮播图+一个view标签存储商品 ...
微信小程序开发一个小型商城（七、支付页面）
上一篇:微信小程序开发一个小型商城(六.购物车页面) 在这里,基本上是与购物车页面相似的: 在从购物车页面跳转过来,在购物车界面对购物车商品会进行合法判断,是否有收货人的信息和是否存在商品,而在订单页 ...
微信小程序开发一个小型商城（一、准备工作）
文章根据b站视频零基础玩转微信小程序教程(黑马) 最开始我们需要在app.json文件当中声明所有使用到的界面.代码如下所示: "pages": ["pages/in ...
微信小程序开发：简单列表界面的实现
最近,想了解下微信小程序的开发. 看了下官网的组件和API介绍,想通过一个简单的列表展示,来学习下如何开发微信小程序. 先来看下最后的效果(使用的测试数据,后期可改为http请求返回的数据). 底部的 ...
用微信小程序开发一个计算器
今天我们用微信小程序来写一个计算器的案例页面布局首先我们需要对页面进行一个简单的规划,计算器一般在页面中都分为两部分,一部分是上面的结果显示区,另一部分就是下面的数字按钮及其运算符按钮,整体页面布 ...
微信小程序开发一个多少钱
小程序开发是当前比较流行的一项技术服务,能够为企业和个人带来巨大的商业价值和社会价值,但是小程序开发费用也是潜在的成本之一.在选择小程序开发服务时,了解开发费用如何计算.影响价格的因素以及如何降低成本 ...

微信小程序开发一个简单的摇骰子游戏

微信小程序开发一个简单的摇骰子游戏相关推荐

最新文章

热门文章