用Quick Cocos2dx做一个连连看（一）

呵呵，不知道能不能坚持下来，先写着吧。

 

预备知识：Quick Cocos2dx 2.2.5基本知识 或者 Cocos2dx基本知识， lua入门

开发工具：Sublime Text 2.0/3.0

原型设计：Balsamiq Mockups

代码跟踪： https://github.com/AdoBeatTheWorld/SuperLink.git

 

我们的效果图大概是这样子的：

 

可见，我们需要将连连看的元素抽出来作为一个类，这个类肯定是一个显示对象来的，我们给这个类设入一个类型值，就可以自动的刷新图片，设入行与列就可以自动的刷新其位置。

这个类如下：

local SpriteItem = class("SpriteItem", function( )
    return display.newNode()
end)

function SpriteItem:ctor()
    
end

function SpriteItem:setData(value)
    printInfo("Set Data %d",value)
    if self.type ~= value then
        self.type = value
        self:initIcon()
    end
end

function SpriteItem:initIcon()
    printInfo(string.format("res/%d.png", self.type))
    display.newSprite(string.format("res/%d.png", self.type)):addTo(self)
end

function SpriteItem:recycle()
    -- body
end

function SpriteItem:reset()
    -- body
end

function SpriteItem:getValue()
    return self.type
end

function SpriteItem:setPos( px,py )
    self.px = px
    self.py = py
    self:setPosition(px*40, py*40)
    printInfo("x:%d,y:%d", self:getPositionX(),self:getPositionY())
end

return SpriteItem

为了看到效果，我们可以在MainScene.lua里面试一下主要的一些接口，在MainScene:onEnter()中加入加入以下代码：

local item
    for i=1,10 do
        for j=1,10 do
            item = SpriteItem.new()
            item:setData(0)
            item:setPos(i,j)
            item:addTo(self)
        end
    end

然后运行就可以看到以下结果：

 

然后，在MainScene.lua的ctor()函数里面添加一下得分和时间的文本表示我们就大功告成了：

function MainScene:ctor()

    self.scorelb = ui.newTTFLabel({text = "Score : 0", size = 30, align = ui.TEXT_ALIGN_LEFT})
                    :pos(display.width-150, display.height-40)
                    :addTo(self)

    self.timelb = ui.newTTFLabel({text = "Time  : 0", size = 30, align = ui.TEXT_ALIGN_LEFT})
                    :pos(display.width-150, display.height-80)
                    :addTo(self)
end

 

好吧，这个游戏比较小，能写多少字我也不知道，所以先在这里更新吧。

 

距上次发帖时间内，我工作去了，刚才花了10多分钟又润色了一下，新增了一些ui资源，然后代码方面也有所优化，当前效果图如下：