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

最新推荐文章于 2024-06-07 22:31:27 发布

shenhaijy123

最新推荐文章于 2024-06-07 22:31:27 发布

阅读量2.1k

点赞数

文章标签：游戏 HTML5 控件

本文链接：https://blog.youkuaiyun.com/shenhaijy/article/details/46658935

版权

开发平台：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)，我们将尽可能的完善我们的游戏和解决您的问题。谢谢！