微信小程序版翻牌小游戏

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 微信小程序—微信跳一跳,Android游戏助手(外挂)使用教程详解
  • 微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
  • 微信小程序实现的贪吃蛇游戏【附源码下载】
赞 (0)

相关推荐

  • 微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧

    前言 小程序跳一跳最近很火,之前爆出微信游戏小程序漏洞,网上也不乏大神.这里就用一大神的python脚本来刷下高分. 跳一跳python脚本传送门 配置过程 注: 电脑环境未配置python环境,请自行谷歌或者百度配置,这里不再做叙述. 1. 将上述传送门整个项目拷贝到本地(用git命令,或者直接压缩包下载,这里大家随意).比如我这里下载压缩包,解压我电脑以下的目录. 2. 楼主用的是 ios , 操作起来比较繁琐,也懒得找测试要 Android 测试机,所有就下了模拟器测试,首推雷电模拟器,安

  • 微信小程序—微信跳一跳,Android游戏助手(外挂)使用教程详解

    微信小程序—微信跳一跳,Android游戏助手(外挂)使用教程详解

    作为一名有着丰富实战经验的Android开发人员,作为一个有着一定基础和实战的逆向新司机,第一次面对github上的这个项目自己也是懵的,即使看完了README,也还是不知道从何下手.在此之前玩游戏从未使用过游戏助手之类的.那么我在想,作为小半个专业选手尚且这样,广大小白又能比我好到哪里去呢? 以前我也曾经是个单纯的好骚年啊! 后来经过仔细阅读README,加上摸索,和查看源码,才慢慢走上正途:下面记录一下,以备你查看: 成果 图片说明:本人排行第二,记得我自己才跳了昨天一百七十多分,大多数都是

  • 微信小程序实现的贪吃蛇游戏【附源码下载】

    本文实例讲述了微信小程序实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: 界面布局 pages/snake/snake/snake.wxml: <!--snake.wxml--> <view class="control" bindtouchstart="tapStart" bindtouchmove="tapMove" bindtouchend="tapEnd">

  • 微信小程序版翻牌小游戏

    本文实例为大家分享了微信小程序翻牌游戏的具体代码,供大家参考,具体内容如下 一.新建一个quick start项目看看结构 在微信开发工具点击添加项目,选择 无appid,勾上"在当前目录中创建quick start 项目". 可以看到一共有两个目录 pages和utils,和根目录下的3个app文件.pages存放的是小程序的页面,每个也面都有自己独立的文件夹. 一个页面由4文件构成,js文件是程序逻辑:wxss是微信定义的样式文件,语法跟css一样,支持的样式要少一些:wxml文件

  • 微信小程序实现翻牌小功能

    本文实例为大家分享了微信小程序翻牌小功能,供大家参考,具体内容如下 页面 <view id="container">     <view wx:for="{{newArr}}" class='cards'>         <view class="card card_a" style='display:{{item.showA}}' bindtap='change' data-id='{{item.id}}'>

  • 微信小程序实现翻牌抽奖动画

    本文实例为大家分享了微信小程序实现翻牌抽奖的具体代码,供大家参考,具体内容如下 效果图如下所示 这里做的比较简陋,就花了一点时间实现了翻牌抽奖效果,提供思路 .wxml <view class="button" bindtap="again">重新翻牌</view> <view class="curin-index"> <view bindtap="{{whether?'':'tamin'}}&

  • 微信小程序实现2048小游戏的详细过程

    微信小程序实现2048小游戏的详细过程

    效果图 实例代码 今天我们要用微信小程序实现2048小游戏,效果图如上面所示.游戏的规则很简单,你需要控制所有方块向同一个方向运动,两个相同数字方块撞在一起之后合并成为他们的和,每次操作之后会随机生成一个2或者4,最终得到一个"2048"的方块就算胜利了. // 构造一个空的矩阵[[null,..,size.length],[]] empty: function() { var cells = []; for (var x = 0; x < this.size; x++) { v

  • 微信小程序实现贪吃蛇游戏

    微信小程序实现贪吃蛇游戏

    本文实例为大家分享了微信小程序实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 一.项目截图 二.源代码 1.WXML 代码如下(示例): <view class='container'> <view class='content-bottom' bindtouchmove='touchMove' bindtouchstart='touchStart' bindtouchend='touchEnd'> <view wx:for="{{ground}}"

  • 微信小程序实现获取小程序码和二维码java接口开发

    前言:目前小程序推出了自己的识别码,小程序码,这个圆形的码看起来比二维码好看.本文总结微信小程序的获取小程序码和二维码并生成二维码图片的接口开发.主要内容摘抄自微信小程序的API文档,java接口开发是自己总结开发. 微信小程序API文档:获取二维码 一.简介 通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面.目前微信支持两种二维码,小程序码(左),小程序二维码(右),如下所示: 二.获取小程序码 目前有两个接口可以生成小程序码,开发者可以根据自己的需要选择合

  • 微信小程序使用蓝牙小插件

    本文实例为大家分享了微信小程序使用蓝牙小插件,供大家参考,具体内容如下 bluetooth.js function BLE(options) { this.options = options || { locator: {} }; } function ab2hex(buffer) { const hexArr = Array.prototype.map.call( new Uint8Array(buffer), function (bit) { return ('00' + bit.toStr

  • 如何在微信小程序里面退出小程序的方法

    如何在微信小程序里面退出小程序的方法

    公司要求用小程序重构已有的微信公众号,于是没接触过小程序的我...好的,直接进入主题. 如何在小程序里面退出小程序. 这个功能基本上都会用到,而文档里面没有找到如微信一样直接的api: WeixinJSBridge.call('closeWindow'); 于是我就各种上网搜,好的,结果告诉我小程序已经出了这个api,但未公开= =||| 那就是说 现在 是没有这个api的(掀桌!),查了又查,是有一个方法,就是利用现有的api自己做一个. 是的,就是用这几个美丽的东西. 首先我们有两个页面,i

  • 大转盘抽奖小程序版 转盘抽奖网页版

    大转盘抽奖小程序版 转盘抽奖网页版

    今天整理了下以前写的小demo,把大转盘抽奖的代码,整合下,列了网页版和小程序两个版本,这个转盘抽奖的核心是H5的canvas和Css3的translate属性,非常简单,写了网页版和小程序版供大家参考,主要核心代码就是利用canvas画图,完整代码见大转盘抽奖,下载可用 希望给大家带来帮助 //转盘内部绘制 lottery.prototype.getCanvasI=function(){ let itemsArc=360/this.itemsNum //获取大转盘每等分的角度 this.ite

  • 微信小程序常用简易小函数总结

    本文实例讲述了微信小程序常用简易小函数.分享给大家供大家参考,具体如下: 最近一直在写微信小程序,而且由于是第二次写了,所以针对很多通用的情况封装了一些函数,建议你们放在app.js中,方便全局去调用. 提示类函数 微信有一种原生的API用于显示提示类结果的wx.showToast,而且其中的图片是可以自定义的,所以为了保证全部一致性,而且方便调用,所以我将其全部封装在了app.js中: // 成功 showSuccess: function (message) { wx.showToast({

随机推荐