使用quick-cocos2dx制作拼图游戏

1、创建拼图所需的背景图。

self.fragment_sprite_bg = display.newSprite(self.genie_sprite)
    :setAnchorPoint(, )
    :addTo(self)
self.content_size = self.fragment_sprite_bg:getContentSize()
self.fragment_sprite_bg:setPosition(display.cx - self.content_size.width/, display.cy - self.content_size.height/)
self.fragment_sprite_bg:setOpacity()  --背景图透明度设置为半透
           

2、给背景图添加九宫格线，方便拼图。

local pos_x, pos_y = self.fragment_sprite_bg:getPosition()

local line_1 = cc.DrawNode:create():drawSegment(
        cc.p(pos_x, pos_y + self.content_size.height/), cc.p(pos_x + self.content_size.width, pos_y + self.content_size.height/), PiecePuzzleGameView.LINE_WIDTH, cc.c4f(,,,))
local line_2 = cc.DrawNode:create():drawSegment(
        cc.p(pos_x, pos_y + *self.content_size.height/), cc.p(pos_x + self.content_size.width, pos_y + *self.content_size.height/), PiecePuzzleGameView.LINE_WIDTH, cc.c4f(,,,))
local line_3 = cc.DrawNode:create():drawSegment(
        cc.p(pos_x + self.content_size.width/, pos_y), cc.p(pos_x + self.content_size.width/, pos_y + self.content_size.height), PiecePuzzleGameView.LINE_WIDTH, cc.c4f(,,,))
local line_4 = cc.DrawNode:create():drawSegment(
        cc.p(pos_x + *self.content_size.width/, pos_y), cc.p(pos_x + *self.content_size.width/, pos_y + self.content_size.height), PiecePuzzleGameView.LINE_WIDTH, cc.c4f(,,,))
self:addChild(line_1)
self:addChild(line_2)
self:addChild(line_3)
self:addChild(line_4)
           

3、创建拼图图块

通过clippingnode创建。

local fragment_sprite = display.newSprite(self.genie_sprite)
fragment_sprite:setAnchorPoint(, )

local rect = cc.rect(, , self.content_size.width/, self.content_size.height/)
--创建一个裁剪区域用于裁剪图块
local clipnode = cc.ClippingRegionNode:create()
clipnode:setClippingRegion(rect)--设置裁剪区域的大小
clipnode:setContentSize(self.content_size.width/, self.content_size.height/)
clipnode:addChild(fragment_sprite)--添加图片
fragment_sprite:setPosition( - (j-)*self.content_size.width/,  - (i-)*self.content_size.height/)--设置图片显示的部分
self:addChild(clipnode)
self.fragment_table[#self.fragment_table + 1] = clipnode
clipnode:setPosition(pos_x + (j-)*self.content_size.width/, pos_y + (i-)*self.content_size.height/)
           

通过sprite创建

local pos_x, pos_y = self.fragment_sprite_bg:getPosition()
    local cache = cc.Director:getInstance():getTextureCache():addImage(self.genie_sprite)
    local content_size = cache:getContentSize()
    for i = ,  do
        for j = ,  do
            local sprite = cc.Sprite:create()
            sprite:setAnchorPoint(, )
            sprite:setTexture(cache)
            sprite:setTextureRect(cc.rect((i-)*content_size.width/, (j-)*content_size.height/, content_size.width/, content_size.height/))
            self:addChild(sprite)
            self.fragment_table[#self.fragment_table + 1] = sprite
            sprite:setPosition(pos_x + (j-)*self.content_size.width/, pos_y + (i-)*self.content_size.height/)
        end
    end
           

4、给拼图图块添加拖动事件

clipnode:setTouchEnabled(true)
            clipnode:addNodeEventListener(cc.NODE_TOUCH_EVENT, function (event)
                --local boundingBox = clipnode:getCascadeBoundingBox()
                local position = cc.p(clipnode:getPosition())
                local boundingBox = cc.rect(position.x, position.y, self.content_size.width/, self.content_size.height/) --getCascadeBoundingBox()方法获得的rect大小为整张图片的大小，此处重新计算图块的rect。

                if "began" == event.name and not cc.rectContainsPoint(boundingBox, cc.p(event.x, event.y)) then
                    clipnode:setTouchSwallowEnabled(false)
                    return false
                end

                if "began" == event.name then
                    clipnode:setTouchSwallowEnabled(true)--吞噬触摸，防止响应下层的图块。
                    --将当前的图块置顶
                    for index = , self.fragment_num do
                        self.fragment_table[index]:setLocalZOrder(PiecePuzzleGameView.FRAGMENT_ZORDER)
                    end
                    clipnode:setLocalZOrder(PiecePuzzleGameView.FRAGMENT_ZORDER + )

                    return true
                elseif "moved" == event.name then
                    local pos_x, pos_y = clipnode:getPosition()
                    pos_x = pos_x + event.x - event.prevX
                    pos_y = pos_y + event.y - event.prevY
                    if pos_x < display.left or pos_x > display.right - self.content_size.width/ then
                        pos_x = pos_x - event.x + event.prevX
                    end
                    if pos_y < display.bottom or pos_y > display.top - self.content_size.height/ then
                        pos_y = pos_y - event.y + event.prevY
                    end
                    clipnode:setPosition(pos_x, pos_y)
                elseif "ended" == event.name then

                end
            end)
           

5、检测图块位置

在拖动事件返回的时候检测图块位置是否在对应位置区域范围内，若在，则将图块放在对应位置上。同时检测是否所有图块均放在了对应位置上，若是，则游戏完成。

local fragment_bg_pos = cc.p(self.fragment_sprite_bg:getPosition())
                    local pos_x, pos_y = clipnode:getPosition()
                    if pos_x > fragment_bg_pos.x + (j-)*self.content_size.width/ - PiecePuzzleGameView.ERROR_DIS and
                            pos_x < fragment_bg_pos.x + (j-)*self.content_size.width/ + PiecePuzzleGameView.ERROR_DIS and
                            pos_y > fragment_bg_pos.y + (i-)*self.content_size.height/ - PiecePuzzleGameView.ERROR_DIS and
                            pos_y < fragment_bg_pos.y + (i-)*self.content_size.height/ + PiecePuzzleGameView.ERROR_DIS
                    then
                        clipnode:setPosition(fragment_bg_pos.x + (j-)*self.content_size.width/, fragment_bg_pos.y + (i-)*self.content_size.height/)
                        clipnode:setTouchEnabled(false) --图块已经放置在了正确位置，就设置为不可点击了。
                        self.fixed_fragment_num = self.fixed_fragment_num + 
                        if self.fixed_fragment_num == self.fragment_num then
                            self:gameResult(true)
                        end
                    end
           

6、随机初始化图块的位置

--随机图块位置
    for i = , self.fragment_num do
        self.fragment_rand_pos[#self.fragment_rand_pos + 1] = cc.p(math.random(display.width - 200) + 20, math.random(display.height - 300) + 20)
    end
    for i = , self.fragment_num do
        self.fragment_table[i]:runAction(cc.MoveTo:create(., cc.p(self.fragment_rand_pos[i].x, self.fragment_rand_pos[i].y)))
    end
           

游戏完成啦啦啦~~~

效果图

原图