HTML5游戏实战《银行卡牌连连看看游戏》

开发平台：http://www.tangide.com/

游戏：http://www.i5r.com.cn/apprun-qq3AB7703F9C0E830593A4D0829A1D9611711435051680507.html

手机下方扫描二维码玩 ：

先打个广告，欢迎html5游戏开发爱好者扫描下方二维码或者搜群号223466431，加入开发者QQ群，我们免费提供最快速的开发工具，我们的所有html5游戏都开源。 

游戏主要功能：是实现相同的两张卡牌翻转对比相同消除，不同两张的卡牌在翻转回去，

看谁在最短的时间里把所有相同的卡牌找出来。

整个游戏的开发，基于在线HTML5游戏开发工具TangIDE，相关开发文档点击打开链接

先建立文件，在拖放图片和编写程序。

浏览器推荐谷歌浏览器或者猎豹浏览器。

新建窗口（准备部分点击登入，选择QQ登入）：

游戏开始界面：

图片要在位置与大小栏中设置缩放和与父窗口保持比例。

活动规则黑色的底可以设置成填充父窗口X属性和Y属性填充父窗口。

               

游戏界面：

放卡牌要用到网格，在网格的特殊属性中对他进行行列设置：设置成4*4。接下来就是向其中拖拉图片，在替换图片就可以了；游戏的使用说明可以用label控件在他的属性文本中就行编辑内容就可以了；点击开始控件可以用色块实现，然后在修改只提到色值，同样在他的属性中编辑内容。

游戏结束界面：

活动规则的内容说明也可以用label控件，在文本中编写内容，在设置字的颜色，然后设置字体大小就可以了。

游戏分三部分：开始游戏界面，游戏界面，结束游戏界面；

一，开始游戏界面的实现：

               1，活动规则的实现的效果程序：

               

<span style="font-size:14px;color:#3366ff;"><strong>var me = this;var win = this.getWindow();win.find("活动规则背景").setVisible(true);win.find("活动规则背景/活动提示底").setVisible(true);var scalexyRule = {duration:150, scaleXStart:1, scaleXEnd:0.8, scaleYStart:1, scaleYEnd:0.8, interpolator:'b'};scalexyRule.next = {duration:150, scaleXStart:0.8, scaleXEnd:1, scaleYStart:0.8, scaleYEnd:1, interpolator:'b'};me.animate(scalexyRule);var scalexyBackground = {duration:50, scaleXStart:1, scaleXEnd:0.5, scaleYStart:1, scaleYEnd:0.5, interpolator:'b'};var scalexyBackground = {duration:200, scaleXStart:0.5, scaleXEnd:1, scaleYStart:0.5, scaleYEnd:1, interpolator:'b'};win.find("活动规则背景/活动提示底").opacity = 1;win.find("活动规则背景/活动提示底").animate(scalexyBackground);</strong></span>

          2，我知道实现的效果程序

          

<span style="font-size:14px;color:#3333ff;"><strong>var me = this;var win = this.getWindow();var scalexy = {duration:200, scaleXStart:1, scaleXEnd:0.3, scaleYStart:1, scaleYEnd:0.3, opacityEnd:0};var bg =  this.getParent();bg.animate(scalexy,function(){    bg.setVisible(false);    win.find("活动规则背景").setVisible(false);});</strong></span>

二，游戏界面的实现（主要程序）：

      1，点击开始事件的效果实现，只需要隐藏对象就可以了，我们这个平台可以自动生成代码，就不讲了。

      2，翻牌点击事件的实现和牌匹配的实现程序.

点击事件的实现：

（1）卡牌的点击事件

<strong><span style="color:#3366ff;">var me = this;var win = this.getWindow();var scale = {duration:50,scaleXStart:1,scaleXEnd:0.3,scaleYStart:1,scaleYEnd:0.7};scale.next = {duration:50,scaleXStart:0.3,scaleXEnd:1,scaleYStart:0.7,scaleYEnd:1};scale.next.next = {duration:50,scaleXStart:1,scaleXEnd:1.05,scaleYStart:1,scaleYEnd:1.05};scale.next.next.next = {duration:50,scaleXStart:1.05,scaleXEnd:1,scaleYStart:1.05,scaleYEnd:1};var i = this.getZIndex();var CARD_DIFFERENT_NUMBER = 8;//不同的卡牌的数量var num = win.arrayCoordinate[i].img%CARD_DIFFERENT_NUMBER; if((win.twoProvideControls[0][1] < 0 ||win.twoProvideControls[1][1] < 0) && win.arrayCoordinate[i].turnFlag){    if(win.twoProvideControls[0][0] === null){        win.twoProvideControls[0][1]  = num;        win.twoProvideControls[0][0]  = this;    }else{        win.twoProvideControls[1][1] = num;         win.twoProvideControls[1][0] = this;    }    win.arrayCoordinate[i].turnFlag = false;    this.setImageSrc(num);    this.animate(scale,function(){win.provide()});}</span></strong>

牌匹配的实现程序：

窗口打开前事件(主要逻辑)    

<strong><span style="color:#3333ff;">var me = this;var win = this.getWindow();win.resetGame();var car = win.find("背景图片/网格/银行卡");win.initVar = function(){    win.arrayCoordinate = Array();    win.twoProvideControls = [[null,-1],[null,-1]];    win.cardsNumber = 8;//匹配的牌数    win.timems = 0;     win.start = false;};//对应位置随机生成对应数win.bankRandNumber = function(arraylength){    var len = arraylength;    var value = 0;    var median = 0;    if(arraylength <= 0 ){        return;    }    for(var j = 0;j < arraylength; j++ ){        win.arrayCoordinate[j]={                                    img:j+1,                                   turnFlag:true                                };    }    /*do{        var randnum = Math.floor(Math.random()*len);        if(win.arrayCoordinate[randnum].img === -1){            win.arrayCoordinate[randnum].img = arraylength;            arraylength--;        }    }while(arraylength);*/    //洗牌算法    for(var i = 0; i < arraylength; i++){        value = i + rand() % (length - i);        median = win.arrayCoordinate[i].img;          win.arrayCoordinate[i].img = win.arrayCoordinate[value].img;          win.arrayCoordinate[value].img = median;      }};function twoControls(){    win.twoProvideControls[0][0] = null;    win.twoProvideControls[0][1] = -1;    win.twoProvideControls[1][0] = null;    win.twoProvideControls[1][1]  = -1;}function twoControlsIndex(i,j){    var index = win.twoProvideControls[i][j].getZIndex();    win.arrayCoordinate[index].turnFlag = true;    win.twoProvideControls[i][j].setImageSrc(8);}win.provide = function(){        if(win.twoProvideControls[0][1] === win.twoProvideControls[1][1] && win.twoProvideControls[0][1] >= 0){        var scalexy =  { duration:80, scaleXStart:1, scaleXEnd:0.5, scaleYStart:1, scaleYEnd:0.5, interpolator:'d'};        scalexy.next = { duration:150, scaleXStart:0.5, scaleXEnd:1, scaleYStart:0.5, scaleYEnd:1 };        scalexy.next.next = {duration:50, opacityStart:1, opacityEnd:0, scaleXStart:1, scaleXEnd:1.2, scaleYStart:1, scaleYEnd:1.2 };                setTimeout(function() {            win.twoProvideControls[0][0].animate(scalexy);            win.twoProvideControls[1][0].animate(scalexy,function(){                twoControls();               win.cardsNumber--;               if(win.cardsNumber === 0){                  var initData = win.timems;                  me.openWindow("结束游戏",                    function (retData) {console.log("window closed.");}, true, initData);                }            });        }, 300);    }else if(win.twoProvideControls[0][1] >= 0 && win.twoProvideControls[1][1] >= 0){        var scale = { duration:50, scaleXStart:1, scaleXEnd:0.3, scaleYStart:1, scaleYEnd:0.7, interpolator:'b'};        scale.next = { duration:50, scaleXStart:0.3, scaleXEnd:1, scaleYStart:0.7, scaleYEnd:1, interpolator:'b'};        scale.next.next = { duration:50, scaleXStart:1, scaleXEnd:1.05, scaleYStart:1, scaleYEnd:1.05, interpolator:'b'};        scale.next.next.next = {duration:50, scaleXStart:1.05, scaleXEnd:1, scaleYStart:1.05, scaleYEnd:1, interpolator:'b'};        setTimeout(function() {            twoControlsIndex(0,0);            twoControlsIndex(1,0);            win.twoProvideControls[0][0].animate(scale);            win.twoProvideControls[1][0].animate(scale,function(){                twoControls();             });        }, 300);    }};win.initVar();win.bankRandNumber(16);var start = win.find("开始底");start.resize(win.w,win.h);start.setPosition(0,0);win.find("背景图片/网格").relayoutChildren = function(animHint) {    if(this.disableRelayout) {       return;    }    var r = 0;    var c = 0;    var x = 0;    var y = 0;    var w = this.getWidth(true);    var h = this.getHeight(true);    var spacer = this.spacer;    var itemSize = this.calcItemSize();    var itemW = itemSize.w + spacer;    var itemH = itemSize.h + spacer;    var cols = Math.floor(w/itemW);    var rows = Math.floor(h/itemH);    var vMargin = (this.h - rows * itemH) >> 1;    var hMargin = (this.w - cols * itemW) >> 1;    this.cols = cols;    this.rows = rows;    for(var i = 0; i < this.children.length; i++) {        var child = this.children[i];                r = Math.floor(i/cols);        c = Math.floor(i%cols);                x = hMargin + c * itemW;        y = vMargin + r * itemH + 5;        if(animHint || this.mode === Shape.MODE_EDITING) {             child.animMove(x, y, animHint);        }        else {            child.move(x, y);        }        child.xAttr = UIElement.X_FIX_LEFT;        child.yAttr = UIElement.Y_FIX_TOP;        child.widthAttr = UIElement.WIDTH_FIX;        child.heightAttr = UIElement.HEIGHT_FIX;        child.setSize(itemSize.w - 1, itemSize.h - 5);        child.setUserMovable(true);        child.setUserResizable(false);        child.relayoutChildren();                if(!this.isUIScrollView) {            child.setDraggable(this.itemDraggable);        }    }    return;};win.find("背景图片/网格").relayoutChildren(false);</span></strong>

三，结束游戏界面的实现：

结束游戏界面和开始界面功能相同参考开始界面就可以了。

游戏总体来说功能实现还是蛮简单的，想交流或者有建议的朋友可以

发邮件联系，也可以加我们的交流群(群号：223466431)，我们将尽可能的完善我们的游戏和解决您的问题。谢谢！