cocos2d_js 拼图游戏源码(点击移动版)

原创 2017年08月11日 12:55:42

recrouse.js

var res = {
    pt1_url:"res/pt_1.jpg",
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

app.js

var H_NUM = 3;
var W_NUM = 3;
var CLICK_CELL_EVENT = "click_cell_event";  //自定义事件名

var HelloWorldLayer = cc.Layer.extend({
    //碎片数组
    arrCellSpr:[],
    //大图路径
    basePicUrl:null,
    //大图精灵
    baseSpr:null,
    //碎片高
    hei:null,
    //碎片宽
    wid:null,
    //胜利文本
    winLab:null,
    //游戏是否开始标签
    isStart:false,

    ctor:function () {
        this._super();
        this._init();
        return true;
    },

    //初始化
    _init:function()
    {
        var _winsize = cc.winSize;
        this.winLab = new cc.LabelTTF("You Win","Arial", 88);  //创建游戏胜利文本
        this.winLab.attr({     //批量设置文本节点属性
            anchorX:0.5,
            anchorY:0.5,
            x:_winsize.width/2,
            y:_winsize.height/2,
        })
        this.addChild(this.winLab,3);     //层级设置比碎片高,否则会被碎片挡住导致无法正常显示
        this.winLab.setVisible(false);    //设置不可见
        this.basePicUrl = res. pt1_url;
        this.baseSpr = new cc.Sprite(this.basePicUrl);
        this.wid = this.baseSpr.width/W_NUM.toFixed(5) - 0.00001;
        this.hei = this.baseSpr.height/H_NUM.toFixed(5) - 0.00001;
        var basePosition = cc.p((_winsize.width - this.baseSpr.width + this.wid)/2, (_winsize.height + this.baseSpr.height - this.hei)/2);
        var cell;
        for(var i = 0;i<H_NUM;i++)
        {
            this.arrCellSpr[i] = [];
            for(var j = 0;j<W_NUM;j++)
            {
                var pos = cc.p(basePosition.x + j*this.wid,basePosition.y -  i*this.hei)
                cell = new CellSpr(this.basePicUrl, cc.rect(j*this.wid, i*this.hei, this.wid, this.hei),pos );  //按矩形裁剪图片素材创建精灵
                cell.setPosition(pos);   //设置碎片坐标
                this.addChild(cell);
                this.arrCellSpr[i][j] = cell;   //添加到数组
            }
        }
        this.arrCellSpr[i - 1][j - 1].opacity = 0;  //左下角设置为透明
        this._addCustomEvent();
        this.scheduleOnce(this._startGame,0);   //一次性计时器
    },

    //添加自定义事件
    _addCustomEvent:function()
    {
        var that = this;
        cc.eventManager.addCustomListener(CLICK_CELL_EVENT,function(event){
            var cell = event.getUserData();
            var arr = that._getIndexInArr(cell);
            that._checkNeighbor(arr[0],arr[1]);
        })
    },

    //开始游戏
    _startGame:function()
    {
        var arrTurn = [];
        for(var i = 0;i<H_NUM*W_NUM;i++)
        {
            arrTurn.push(i);
        }
        arrTurn.sort(function(){return (Math.random()>0.5) ? -1 : 1;});
        //arrTurn = [0,1,2,3,4,5,6,8,8];  //如果拼图水平太菜,请解除词句屏蔽。仅限于3*3的格局
        cc.log(arrTurn);
        for(var i = 0;i<H_NUM;i++)
        {
            for (var j = 0; j < W_NUM; j++)
            {
                var value = arrTurn[i*W_NUM + j];
                var p1 = [parseInt(value/W_NUM),parseInt(value%W_NUM)];
                var p2 = [i,j];
                this._redisplay(p1,p2);
            }
        }
        this.isStart = true;  //设置游戏开始标签
    },

    //重新显示
    _redisplay:function(arr1,arr2)
    {
        var tempPosition = this.arrCellSpr[arr1[0]][arr1[1]].getPosition();
        this.arrCellSpr[arr1[0]][arr1[1]].setPosition(this.arrCellSpr[arr2[0]][arr2[1]].getPosition());
        this.arrCellSpr[arr2[0]][arr2[1]].setPosition (tempPosition);
        var shred = this.arrCellSpr[arr1[0]][arr1[1]];
        this.arrCellSpr[arr1[0]][arr1[1]] = this.arrCellSpr[arr2[0]][arr2[1]];
        this.arrCellSpr[arr2[0]][arr2[1]] = shred;
        if(this.isStart)   //当游戏开始时才执行检查
        {
            this._checkAllFinish();
        }
    },

    //检查点击图片四周是否有空白
    _checkNeighbor:function(i,j)
    {
        if(i - 1 >= 0 && this.arrCellSpr[i-1][j].opacity == 0)  //当左边存在碎片且透明度为0时才执行移动
        {
                this._redisplay([i,j],[i-1,j]);
        }
        else if(i+1 < H_NUM && this.arrCellSpr[i+1][j].opacity == 0)
        {
                this._redisplay([i,j],[i+1,j]);
        }
        else if(j-1 >= 0 && this.arrCellSpr[i][j-1].opacity == 0)
        {
                this._redisplay([i,j],[i,j-1]);
        }
        else if(j+1 < W_NUM && this.arrCellSpr[i][j+1].opacity == 0)
        {
                this._redisplay([i,j],[i,j+1]);
        }
    },



    //获取在数组中的下标
    _getIndexInArr:function(cell)
    {
        for(var i = 0;i<H_NUM;i++)
        {
            for (var j = 0; j < W_NUM; j++)
            {
                if(this.arrCellSpr[i][j] == cell) return [i,j];
            }
        }
    },

    //检查所有碎片是否归位
    _checkAllFinish:function()
    {
        for(var i = 0;i<H_NUM;i++)
        {
            for (var j = 0; j < W_NUM; j++)
            {
                var p1 = this.arrCellSpr[i][j].getPosition();
                var p2 = this.arrCellSpr[i][j] ._tagetPositon;
                if(p1.x != p2.x ||  p1.y != p2.y)  //JS的对象不能直接比较,所以逐项元素比较
                {
                    this.winLab.setVisible(false);
                    return;
                }
            }
        }
        this.winLab.setVisible(true);   //显示胜利文本
    }
});


var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

CellSpr.js


var CellSpr = cc.Sprite.extend({
    //碎片目标位置
    _tagetPositon:null,
    ctor:function(url,rect,p)
    {
        this._super(url,rect);
        this._tagetPositon = p;   //保存碎片的目标位置
    },

    onEnter:function()
    {
        this._super();
        var that = this;
        var listener = cc.EventListener.create({
            event:cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches:true,
            onTouchBegan:function(touch,event)
            {
                if(that.getParent._isGameOver == true) return;
                var target = event.getCurrentTarget();
                var locationInNode  = target.convertToNodeSpace(touch.getLocation());
                var s = target.getContentSize();
                var rect = cc.rect(0,0, s.width, s.height);
                if(cc.rectContainsPoint(rect,locationInNode))
                {
                    cc.eventManager.dispatchCustomEvent(CLICK_CELL_EVENT, that);  //派发自定义事件
                    return true;
                }
                return false;
            },
            onTouchMove:function(touch,event){},
            onTouchEnded:function(touch,event)
            {
                var target  = event.getCurrentTarget();
            }
        })
        cc.eventManager.addListener(listener, this);
    },
})

这里写图片描述

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LingXi__Y/article/details/77096211

cocos2d_js 拼图游戏源码(点击互换版)

resource.jsvar res = { pt1_url:"res/pt_1.jpg", };var g_resources = []; for (var i in res) { ...
  • LingXi__Y
  • LingXi__Y
  • 2017-08-06 15:04:35
  • 1528

《<em>Cocos2d</em>-<em>Js</em>开发之旅-从HTML5到原生手机<em>游戏</em>》完整<em>源码</em>

<em>cocos2d</em>_<em>js</em> <em>拼图游戏源码</em>(点击互换版) <em>cocos2d</em>-<em>js</em>游戏源码+AppStore发布流程(一) 立即下载 上传者: banshaotang 时间: 2015-06-30 综合评分: 4 积分/C币...
  • 2018年04月17日 00:00

<em>cocos2d</em>-<em>js游戏源码+</em>AppStore发布流程(一)

《数字<em>拼图</em>-不只是<em>拼图</em>》<em>游戏源码</em>分享! == 开发环境:引擎版本:<em>cocos2d</em>-<em>js</em>-v3.6.1 <em>js</em>代码开发工具:Cocos Code IDE 1.2.0 xcode版本:Xcode-6.3.1 MAC:OS X...
  • 2018年04月17日 00:00

拼图游戏源码-swift版项目源码

作者fanyinan,源码PuzzleProject,公司的项目中需要一个拼图游戏,之前有手动拼图和随机打乱的功能,近期又由于个(xian)人(zhe)爱(dan)好(teng)自己加入了自动拼图功能...
  • chenhaimeimeng
  • chenhaimeimeng
  • 2016-03-01 10:02:44
  • 419

完美版的JS拼图游戏

  • 2010年04月10日 14:59
  • 171KB
  • 下载

kbengine + cocos2d-js实现html5 mmorpg游戏(源代码)

kbengine_cocos2d_js_demo https://github.com/kbengine/kbengine_cocos2d_js_demo http://www.kbengi...
  • ganqi3601
  • ganqi3601
  • 2015-05-08 08:56:40
  • 645

<em>cocos2d</em>x 3.4 <em>拼图游戏 源代码</em>及运行文件

拼图游戏,一共四关,运用了一些特效,逻辑和视图的代码基本分离。...<em>cocos2d</em>_<em>js</em> <em>拼图游戏源码</em>(点击互换版) cocos2dx 3.4 <em>拼图游戏 源代码</em>及运行...
  • 2018年04月18日 00:00

Javascript: 实现拼图游戏

注:本人网页项目github:linwh8需求规格: 1.UI(10分): UI与效果图完全一致;或者,自由发挥,设计出更加漂亮、合理的UI(可以使用其他图片); 2.正常移动(20分): ...
  • linwh8
  • linwh8
  • 2016-10-24 00:11:01
  • 4233

Android版拼图游戏源码分享

  • 2015年06月17日 10:59
  • 6.42MB
  • 下载

使用cocos2d-js制作游戏新手引导-源码篇(三)

上一篇已经详解了关于定位器的实现细节,本篇主要是讲解实现引导的组成模块及整个引导流程,并给出整个引导的源码。...
  • 6346289
  • 6346289
  • 2015-03-24 07:26:21
  • 2742
收藏助手
不良信息举报
您举报文章:cocos2d_js 拼图游戏源码(点击移动版)
举报原因:
原因补充:

(最多只允许输入30个字)