微信小程序版翻牌小游戏


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结合css实现网页换肤功能
Nov 02 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
Vue.js表单控件实践
Oct 27 Javascript
详解ES6中的let命令
Apr 05 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
JavaScript实现简单图片切换
Apr 29 Javascript
基于百度地图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
牡丹941资料
2021/03/01 无线电
php中Smarty模板初体验
2011/08/08 PHP
前端必学之PHP语法基础
2016/01/01 PHP
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python实现画图工具
2020/08/27 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
幼儿园家长评语
2014/02/10 职场文书
《草原》教学反思
2014/02/15 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
win7配置本地ftp服务器的图文教程
2022/08/05 Servers