用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*, py*)
     printInfo("x:%d,y:%d", self:getPositionX(),self:getPositionY())
 end

 return SpriteItem

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

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

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

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

 function MainScene:ctor()

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

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

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

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