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

这里写图片描述

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

Javascript: 实现拼图游戏

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

HTML5技术之图像处理:一个滑动的拼图游戏(转)

HTML5技术之图像处理:一个滑动的拼图游戏 HTML5有许多功能特性可以把多媒体整合到网页中。使用canvas元素可以在这个空白的画板上填充线条,载入图片文件,甚至动画效果。 在这篇文章中,我将做一...
  • dragoo1
  • dragoo1
  • 2015年07月01日 19:29
  • 4558

java大作业之拼图游戏

这个拼图游戏是帮同学做的,还是挺不错的,实现功能包括:自动选取图片,自动图片,且保证生成的一定有解,还有倒计时功能。 先说下如何保证有解,两种方法:1,先切割然后自己后台让空格自己随机移动。     ...
  • fengsigaoju
  • fengsigaoju
  • 2016年06月22日 16:11
  • 6509

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
  • 797

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

  • 2015年10月19日 08:58
  • 5.18MB
  • 下载

移动游戏开发 cocos2d-js

  • 2017年11月25日 17:02
  • 44.71MB
  • 下载

最新cocos2d-js教程源码,非常详细

  • 2016年02月16日 17:36
  • 44B
  • 下载

Cocos2d高仿消除游戏Dots源码

  • 2015年01月19日 09:41
  • 2.46MB
  • 下载

iphone cocos2d 扫雷类游戏 源码 适合初学者

  • 2011年06月16日 23:16
  • 439KB
  • 下载

cocos2d权威指南游戏源码已修改更新到最新函数库可直接运行

  • 2013年09月05日 09:48
  • 31.08MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2d_js 拼图游戏源码(点击移动版)
举报原因:
原因补充:

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