php 翻牌,微信小程序版翻牌小游戏的实现
这篇文章主要为大家详细介绍了微信小程序版翻牌小游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序翻牌游戏的具体代码,供大家参考,具体内容如下
一、新建一个quick start项目看看结构
在微信开发工具点击添加项目,选择 无appid,勾上"在当前目录中创建quick start 项目"。
可以看到一共有两个目录 pages和utils,和根目录下的3个app文件。pages存放的是小程序的页面,每个也面都有自己独立的文件夹。 一个页面由4文件构成,js文件是程序逻辑;wxss是微信定义的样式文件,语法跟css一样,支持的样式要少一些;wxml文件用来定义小程序的界面,作用类似于html,但是只能用微信自定义的一些标签,而且页面元素不能直接用js操作,只能通过绑定数据来修改;json是页面的配置文件一般用不着。根目录下的app.js,app.json,app.wxml作用和pages下面的作用类似,只不过pages下面的是页面级的,根目录下的是成个应用级的>。utils下面定义了一个转换时间格式工具函数,然后通过module.exports将函数暴露出去,再在logs.js中通过require引入。
二、改造index页面
知道了小程序的结构就可以动手开始做了,首先把index页面改造一下,把用户头像上的点击事件去掉,然后再新增两个按钮,用来跳转到游戏主界面和游戏成绩界面。
1.界面,bindtap相当于html的onclick
{{userInfo.nickName}}
你好
{{motto}}
查看排名
2.index.js 文件的Page中增加两个处理点击事件的函数,用wx.navigateTo来跳转的目标页
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: '开始游戏',
userInfo: {},
welcome:'你好'
},
//事件处理函数
startGame: function() {
wx.navigateTo({
url: '../game/game'
})
},viewScore: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
3.index.wxss中增加游戏背景图
page{background: url('../images/gamebg.jpg') center top; }
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
php 翻牌,微信小程序版翻牌小游戏的实现相关推荐
- 微信小程序版翻牌游戏
一.新建一个quick start项目看看结构 在微信开发工具点击添加项目,选择 无appid,勾上"在当前目录中创建quick start 项目". 可以看到一共有两个目录 pa ...
- 微信小程序版 九宫格数独游戏
前言 继上次JAVA版的九宫格数独,这几天把java版的迁移到了小程序这边,写一篇记录一下. 核心还是在算法上,话不多说,直接干代码 一.核心算法 先把81个格子填满,填充之前需要先判断当前格子填的数 ...
- 用mpvue实现的微信小程序版cnode社区
五一放假,没出去玩,想熟悉下vue的开发流程,又想体验下mpvue,于是写了个练手项目.一个用mpvue实现的cnode微信小程序版. 代码在仓库.欢迎各位star.fork.issue.pr.目前已 ...
- 玩Android微信小程序版
最近开始针对项目性全面学习了一点js,和同事一起用MUI写了个项目,就敢拿出来献丑,我也是diaodiao的.经过几十个工时业余时间*(最近两周有点忙,周期拖得有点长,本来计划五一之前发出来的),在仿 ...
- 适合编程初学者的开源项目:小游戏2048(微信小程序版)
目标 为编程初学者打造入门学习项目,使用各种主流编程语言来实现. 2048游戏规则 一共16个单元格,初始时由2或者4构成. 1.手指向一个方向滑动,所有格子会向那个方向运动. 2.相同数字的两个格子 ...
- 微信小程序版博客——开发汇总总结(附源码)
花了点时间陆陆续续,拼拼凑凑将我的小程序版博客搭建完了,这里做个简单的分享和总结. 整体效果 对于博客来说功能页面不是很多,且有些限制于后端服务(基于ghost博客提供的服务),相关样式可以参考截图或 ...
- 分享一个源代码:微信电影票预订(微信小程序版)
项目说明: 微信推出小程序,操作原理类似React Native,ionic framework,现实现一个小程序版微票 源代码下载地址: http://pan.baidu.com/s/1nvjPfK ...
- 微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)
上一篇讲了WXML:小程序版HTML,这一篇介绍WXSS:小程序版CSS. 1. WXSS:小程序版CSS. WXSS是一套样式语言,为了便于前端开发的上手,WXSS同HTML的CSS样式文件大部分特 ...
- 视频直播终端开发之微信小程序版
前言 由于项目需要最近接到公司的一个研发任务,尝试开发视频直播功能,要求双方可以对讲互动,并提供微信小程序.PC.Web等版本.由于之前对流媒体技术有所积累,这个任务只要满足功能演示,因此这个任务对我 ...
最新文章
- 一种互补间歇振荡器工作电压
- 从netty-example分析Netty组件
- BASIC-1_蓝桥杯_闰年判断
- 师从施一公,4年8篇CNS,西湖大学博士后获世界最具潜力女科学家奖
- 混合牛奶(洛谷-P1208)
- 2018农行--软开
- 手机--修改dns服务器地址,DNS怎么修改 电脑和手机设置DNS全攻略
- Elasticsearch相关操作梳理
- 丹麦皇家音乐学院大师班-本特历钢琴
- 中山技术学院计算机学院,计算机科学与技术学院
- 残留的过往伤感QQ日志_说太多,不如沉默
- 全国计算机二级等级考试报名官网入口
- Android 优化开机启动
- 群晖NAS教程(二十二)、利用Docker安装minio
- 在Sql Server 中调用Jmail组件发送邮件
- 硬盘数据丢失能恢复吗 硬盘数据丢失怎么找回
- 软文营销登顶销售奇迹的4U定律你知道吗?
- 毫米波雷达的系统设计细节(1) - 从雷达方程到雷达威力图
- 版本管理:RCS之命令基础篇
- Ubuntu22.04 中Drag and drop is not supported问题
热门文章
- 游戏策划的excel配置表转成json文件(二)
- linux8软件升级,CentOS 8设置自动更新的完整步骤
- HTML生日快乐代码 HTML5七夕情人节表白【粉色烂漫的七夕情人节专题页面】 HTML5七夕情人节表白网页源码 html css javascript
- dagger android,Dagger Android 使用解惑
- 图片加载失败时,显示默认图片
- OpenCV:金字塔LK光流法
- [社工dos]饭客大型职业教程社工及dos笔记
- 闲云旅游网01(基于vue+element ui)
- 用Mathematica画红心
- MySQL面试知识点追命连环问(一)执行流程存储引擎查询缓存