[笔记]微信小程序开发《番外》骰子 小游戏
2024-04-20 20:03:30
参考
参考
文章目录
- 前言
- 骰子 小游戏
- Page/Index
- index.js
- index.wxml
- index.wxss
- 效果图
前言
- 微信小程序框架中的单向数据绑定应用
- 微信小程序框架中按钮组件的使用以及的事件绑定技术
- 微信小程序框架中视图模版的定义与使用
- CSS3 flex弹性布局（参考的是阮一峰前辈的Flex教程一文中的骰子实例）
骰子 小游戏
创建一个默认小程序项目
Page/Index
index.js
Page({global : {timer : null ,isRand : false},data: {dice : ['first','second','third','fourth','fifth','sixth'],buttonType : 'primary',buttonValue : '摇一摇',num : 0},shake : function () { let me = this;this.global.isRand = !this.global.isRand;if ( this.global.isRand ) {this.global.timer = setInterval(function (){let num = Math.floor(Math.random()*6);me.setData({num : num});},50);} else {clearInterval(this.global.timer);}this.setData({dice: this.data.dice, buttonType : (this.global.isRand) ? 'default' : 'primary',buttonValue : (this.global.isRand) ? '点击停止' : '摇一摇',});},
})
index.wxml
<!-- 骰子模版视图 -->
<template name="first"><view class="first face"><span class="pip"></span></view>
</template>
<template name="second"><view class="second face"><span class="pip"></span><span class="pip"></span></view>
</template>
<template name="third"><view class="third face"><span class="pip"></span><span class="pip third-item-center"></span><span class="pip"></span></view>
</template>
<template name="fourth"><view class="fourth face"><view class="column"><span class="pip"></span><span class="pip"></span></view><view class="column"><span class="pip"></span><span class="pip"></span></view></view>
</template>
<template name="fifth"><view class="fifth face"><view class="column"><span class="pip"></span><span class="pip"></span></view><view class="column fifth-column-center"><span class="pip"></span> </view> <view class="column"><span class="pip"></span><span class="pip"></span></view></view>
</template>
<template name="sixth"><view class="sixth face"><view class="column"><span class="pip"></span><span class="pip"></span><span class="pip"></span></view> <view class="column"><span class="pip"></span><span class="pip"></span><span class="pip"></span></view></view>
</template>
<!--index.wxml-->
<view class="flex-container"> <view class="dice-box"><block><template is="{{dice[num]}}"></template></block></view><view class="button-box"><button type="{{buttonType}}" size="mini" bindtap="shake" >{{buttonValue}}</button></view>
</view>index.wxss
.flex-container{display:flex;height: 100vh;background-color:#292929;flex-direction : column;justify-content: center;align-items: center;color: #fff;
}.dice-box{padding: 10px;
} /* 筛子容器公用样式 */
.face {display: flex;margin: 5px;padding: 4px;background-color:#e7e7e7;width: 104px;height: 104px;object-fit: contain;border-radius:10%;box-shadow: inset 0 5px white,inset 0 -5px #bbb,inset 5px 0 #d7d7d7,inset -5px 0 #d7d7d7;
}/* 筛子中的点的样式 */
.pip {display: block;width: 24px;height: 24px;border-radius: 50%;margin:4px;background-color: #333;box-shadow: inset 0 3px #111,inset 0 -3px #555;
}/* 面公用样式 *//* 第一面布局方式 */
.first {justify-content: center;align-items: center;
}/* 第二面布局方式 */
.second {justify-content: space-between;
}
.second .pip:last-child {align-self: flex-end;
}/* 第三面布局方式 */
.third {justify-content: space-between;
}
.third .pip.third-item-center {align-self: center;
}
.third .pip:last-child {align-self: flex-end;
}/* 第四面布局方式 */
.fourth {justify-content: space-between;
}
.fourth .column {display: flex;flex-direction: column;justify-content: space-between;
}/* 第五面布局方式 */
.fifth {justify-content: space-between;
}
.fifth .column {display: flex;flex-direction: column;justify-content: space-between;
}
.fifth .column.fifth-column-center{justify-content: center;
}/* 第六面布局方式 */
.sixth { justify-content:space-between;
}
.sixth .column {display: flex;flex-direction:column;justify-content:space-around;
}
效果图
[笔记]微信小程序开发《番外》骰子 小游戏相关推荐
- Java微信公众平台开发--番外篇，对GlobalConstants文件的补充
转自:http://www.cuiyongzhi.com/post/63.html 之前发过一个[微信开发]系列性的文章,也引来了不少朋友观看和点评交流,可能我在写文章时有所疏忽,对部分文件给出的不是 ...
- 【微信小程序开发（云壁纸小程序教程）】
微信小程序开发(云壁纸小程序教程) 1. 准备 HBuilder X 和 微信开发者工具 2. 进入网站注册小程序 3. 点击发行,这时候就用到微信开发者工具 1. 准备 HBuilder X 和 微 ...
- 微信小程序开发初试实例结算小助手
微信小程序开发初试实例结算小助手 小程序码 创作背景 小程序功能 小程序实现 小程序开发方案(想看源代码,直接看这一项) 本着自己参加过学校组织的微信小程序云开发培训,就抱着尝试的心理去参加今年的高校 ...
- 微信小程序开发详细步骤(企业小程序开发流程)
今天珍奶bb给大家简单唠唠微信小程序开发详细步骤(企业小程序开发流程)? 微信小程序制作流程是什么?微信小程序制作模板套用怎么操作?今天珍奶bb给大家简单唠唠微信小程序制作流程是什么? 在唠微信小程序 ...
- 视频教程-老司机讲前端之微信小程序开发成语消消乐游戏视频课程-微信开发
老司机讲前端之微信小程序开发成语消消乐游戏视频课程 中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3 ...
- 老司机讲前端之微信小程序开发成语消消乐游戏视频课程-陶国荣-专题视频课程...
老司机讲前端之微信小程序开发成语消消乐游戏视频课程-102人已学习 课程介绍 本课通过一个完整.真实的游戏项目,带着学员手动开发代码,本课分项目介绍.界面效果.技术分析.代码实现.打包 ...
- 微信小程序开发学习1（小程序的入门知识）
微信小程序开发学习1(小程序的入门知识) 1.制定学习目标: 能够知道如何创建小程序项目 能够清楚小程序项目的基本组成结构 能够知道小程序页面的几个组成部分 能够知道小程序中常见的组件如何使用 能够知 ...
- 微信小程序开发打开另一个小程序的实现方法
微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json {..." ...
- 微信废品回收小程序开发上门回收废品小程序开发
废品回收小程序系统如何做_微信小程序助力废品回收 微信废品回收小程序开发 微信废品回收小程序开发
- 从网页到微信小程序开发：一：小程序与普通网页的区别
提示:文章内容大部分摘抄微信官方文档,不喜勿喷,在此做个记录,同时也提出自己的思考和想法,希望看到的人也可以提出自己的看法,我会依照大家的看法不断修改文章,谢谢大家支持! 前言 相信有很多人都有过类似 ...
最新文章
- python读取csv文件第一行_尝试读取CSV文件的第一行返回['/']
- pandas新字段（数据列）生成、使用np.where或者apply lambda函数结合if else生成新的字段，详解及实战
- 编程成长日记——有意思的编程题（二）
- javascript体系-DOM原理
- 用 IDEA 看源码的正确姿势！你掌握了吗？
- C++的黑科技 利用一个字符对字符串进行分离
- 如何利用ZBrush中的DynaMesh创建身体（一）
- java File文件路径获取的几种方法
- System.Linq捉虫记 | 论变量命名的重要性
- NET问答: Find() 和 Where().FirstOrDefault() 该如何选择 ？
- MySQL怎么导出用户权限表_导出MySQL用户权限_MySQL
- 2019年京东Java研发岗社招面经（面试经历+真题总结+经验分享）！
- 基于JAVA+SpringBoot+Mybatis+MYSQL的课程评价系统
- Oracle Enterprise Linux 64-bit 下Oracle11g的监听配置改动及測试步骤
- Hadoop-学习笔记-黑马程序员
- elemtnui 表格如何修改某行文字颜色（elemtnui table 修改某行文字颜色）
- Django应用容器封装DockerFile分享
- Java学习总结3——枚举类和反射机制
- mysql 占位符使用_Mysql占位符插入
- 二叉树存储结构 mysql_为什么mysql索引选择b+树作为底层存储结构？