在微信开发工具点击添加项目，选择 无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页面改造一下，把用户头像上的点击事件去掉，然后再新增两个按钮，用来跳转到游戏主界面和游戏成绩界面。

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

在pages下新建一个images目录存照片

图片下载地址
http://pan.baidu.com/share/link?shareid=1434710849&uk=3758963053

在pages目录下新建一个game目录，然后再照着index页面新建game.js、game.json、game.wxml、game.wxss4个文件。

然后在app.json中增加game页的配置,顺便改下游戏标题.

{"pages":["pages/index/index","pages/logs/logs","pages/game/game" ],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"white","navigationBarTitleText": "微信翻牌小程序","navigationBarTextStyle":"black"}
}

1.game.js 游戏的逻辑

游戏的界面元素不能直接用js操作,只能用page的setData方法通过重新绑定数据来修改.界面上要用的变量都要定义在page的data中,界面有变化时必须要通过this.setData方法修改变量的值,直接修改变量界面不会变.

  data: {clickNum:0,      // 点击次数useTime:0,       // 游戏时间  checked:0,       // 已匹配牌数allCard:allCard,    // 全部卡牌数组backImage:backCardImage, // 牌背面 图片地址modalHidden: true,    // 游戏完成提示是否显示firstX:-1,        // 点击的第一张卡牌的坐标 firstY:-1,cards:[],        // 随机挑选出来的牌   size:8 ,        // 界面显示的牌数=size*2clickable:false,    // 当前是否可点击timer:''        // 游戏计时的定时器}

游戏初始化时随机从牌堆中挑出一些,打乱显示在界面上几秒,然后翻回去游戏正式开始.

  startGame:function(){  // 开始游戏var data = this.data;var that = this;console.log('startGame');var tmp = this.data.allCard.sort(function(a,b){ return Math.random()>.5 ? -1 : 1;}).splice(0,Math.floor(data.size)); // 打乱牌堆,挑出size/2张牌tmp = tmp.concat(tmp).sort(function(a,b){ return Math.random()>.5 ? -1 : 1;}); // 牌*2,再打乱// 添加图片src和卡牌翻转状态state,存在二维数组方便展示var cards = [];var ix = -1;   var iy = 0;for(var i in tmp){if( i%4 == 0){cards.push([]);ix++; iy = 0;}cards[ix].push({src:'../images/' +tmp[i]+ '.jpg',state:1   // 为1时显示图片,为0时显示牌背面});}this.data.cards = cards;this.setData({cards:cards,clickNum:0,useTime:0,checked:0,modalHidden:true,firstX:-1,clickable:false});var that = this;setTimeout(function(){that.turnAllBack();  // 所有的牌翻到背面console.log('turn all back');data.clickable = true;if(data.timer === ''){data.timer = setInterval(function(){data.useTime++;that.setData({useTime:data.useTime});},1000); // 游戏开始计时}else{that.setData({useTime:0});}},5000); // 游戏开始前先让玩家记忆几秒钟}

响应点击事件

onTap: function(event){var that = this;var data = this.data;var ix = event.currentTarget.dataset.ix; // 获取点击对象的坐标var iy = event.currentTarget.dataset.iy; console.log('onTap ' + ix + ' ' + iy);if(data.cards[ix][iy].state != 0 || !data.clickable)  // 点击的不是未翻过来的牌或者现在不让点直接passreturn;that.setData({clickNum:++data.clickNum}); //点击数加1   // 1. 检测是翻过来的第几张牌if(data.firstX == -1){// 1.1 第一张修改状态为 1data.cards[ix][iy].state = 1;data.firstX = ix; data.firstY = iy;  // 记下坐标that.setData({cards:data.cards});     // 通过setData让界面变化}else{// 1.2 前面已经有张牌翻过来了,先翻到正面然后看是不是一样data.cards[ix][iy].state = 1;that.setData({cards:data.cards});if(data.cards[data.firstX][data.firstY].src === data.cards[ix][iy].src){// 1.2.1.1 两张牌相同, 修改两张牌的state为2完成配对data.cards[data.firstX][data.firstY].state = 2;data.cards[ix][iy].state = 2;data.checked += 1; // 完成配对数++data.firstX = -1; // 准备下一轮匹配 // 1.2.1.2 检查是否所有牌都已经翻过来,都已翻过来提示游戏结束if(data.checked == data.size){ // 所有牌都配对成功了!this.setData({ modalHidden: false});     clearInterval(this.data.timer); // 暂停计时this.data.timer = '';this.saveScore({'time':data.useTime,'click':data.clickNum}) // 保存成绩}}else{  // 1.2.2 两张牌不同, 修改两张牌的state为 0data.cards[data.firstX][data.firstY].state = 0; data.cards[ix][iy].state = 0;data.firstX = -1;data.clickable = false;setTimeout(function(){that.setData({cards:data.cards,clickable:true});},500); //过半秒再翻回去}} console.log(this.data.cards);}

把所有牌翻到反面

turnAllBack:function(){for(var ix in  this.data.cards)for(var iy in this.data.cards[ix])this.data.cards[ix][iy].state = 0;this.setData({ cards:this.data.cards });}

游戏结束时,对游戏成绩进行排名然后通过wx.getStorageSync保存到本地

saveScore:function(score){ // 保存分数var maxscore = wx.getStorageSync('maxscore');if(maxscore == undefined || maxscore == '')maxscore = [];maxscore.push(score);maxscore = maxscore.sort(function(a,b){ if(a.time < b.time )return -1;else if( a.time == b.time && a.click < b.click)return -1;else return 1;});wx.setStorageSync( 'maxscore',maxscore);}

进入页面时记得调用startGame

  onLoad: function () {this.startGame();console.log(this.data.cards);}

2.界面布局

开发时参考了这个版本

http://blog.csdn.net/fdipzone/article/details/8630427