微信小程序版翻牌小游戏


Posted in Javascript onJanuary 26, 2018

本文实例为大家分享了微信小程序翻牌游戏的具体代码,供大家参考,具体内容如下

一、新建一个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

<!--index.wxml--> 
<view class="container"> 
 <view class="userinfo"> 
 <text class="userinfo-nickname"></text> 
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> 
 <text class="userinfo-nickname">{{userInfo.nickName}}</text> 
 <text class="userinfo-nickname">你好</text> 
 </view> 
 <view class="usermotto" > 
 <text class="user-motto" bindtap="startGame">{{motto}}</text> 
 </view> 
 <view style="margin-top:30rpx; "> 
 <text class="user-motto" bindtap="viewScore" >查看排名</text> 
 </view> 
</view>

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; }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 #Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 #Javascript
微信小程序实现animation动画
Jan 26 #Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 #Javascript
微信小程序如何获取openid及用户信息
Jan 26 #Javascript
微信小程序如何获取用户手机号
Jan 26 #Javascript
Vue header组件开发详解
Jan 26 #Javascript
You might like
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
Python中使用PDB库调试程序
2015/04/05 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
Python os模块常用方法和属性总结
2020/02/20 Python
iPython pylab模式启动方式
2020/04/24 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
应聘编辑职位自荐信范文
2014/01/05 职场文书
平面设计求职信
2014/03/10 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
物流业务员岗位职责
2015/04/03 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python
python中 Flask Web 表单的使用方法
2022/05/20 Python