Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
Light up a cell in the grid when touched — Gideros Forum

Light up a cell in the grid when touched

definistodefinisto Member
edited March 2022 in General questions
I'm making a game that needs to implement the following mechanics:
There is a grid N by M. When the player clicks on a cell, it should change its color.
Here is the code:
Game = Core.class(Sprite)
 
function Game:init()
	application:setBackgroundColor(0x303030)
 
	local size = 6
 
	self.grid = Sprite.new()
 
	local function generateGrid(size)
		for i = 1, size do
			for j = 1, size do
				local cell = Pixel.new(0x4F4F4F, 1, W / size - 2, W / size - 2)
				cell:setAnchorPoint(0.5, 0.5)
				cell:setPosition((W / size) * j - W / size / 2, (W / size) * i - W / size / 2)
				cell.xOrd = j
				cell.yOrd = i
				self.grid:addChild(cell)
 
				local indx = (i - 1) * size + j
 
				self.grid:getChildAt(indx):addEventListener(Event.MOUSE_DOWN, cellTouched(indx), self)
			end
		end
		self:addChild(self.grid)
	end
 
	generateGrid(size)
end
 
function cellTouched(self, event)
	local cell = self.grid:getChildAt(7)
	if cell:hitTestPoint(event.x, event.y) then
		cell:setColor(0xCFCFCF)
		print(cell.xOrd, cell.yOrd)
	end
end
But when the grid is shown, only cell number 7 at (1, 2) lights because I don't know how to make event listener to each of cells. Please help me.

Comments

  • MoKaLuxMoKaLux Member
    Accepted Answer
    You can implement mouse listener directly on each cell when you create them. Here is my take on it:
    -- *******************************************
     
    Game = Core.class(Sprite)
     
    function Game:init()
    	application:setBackgroundColor(0x303030)
     
    	local W, _H = 480, 480
    	local size = 8
     
    	self.grid = Sprite.new()
     
    	local function generateGrid(size)
    		for i = 1, size do
    			for j = 1, size do
    				local cell = Pixel.new(0x4F4F4F, 1, W / size - 2, W / size - 2)
    				cell:setAnchorPoint(0.5, 0.5)
    				cell:setPosition((W / size) * j - W / size / 2, (W / size) * i - W / size / 2)
    				cell.xOrd = j
    				cell.yOrd = i
    				cell:addEventListener(Event.MOUSE_DOWN, function(event)
    					if cell:hitTestPoint(event.x, event.y) then
    						cell:setColor(0xCFCFCF)
    						print(cell.xOrd, cell.yOrd)
    					end
    				end)
    				self.grid:addChild(cell)
    			end
    		end
    	end
     
    	generateGrid(size)
    	self:addChild(self.grid)
    end
     
    -- *******************************************
     
    require "scenemanager"
    require "easing"
     
    scenemanager = SceneManager.new(
    	{
    --		["menu"] = Menu,
    		["game"] = Game,
    	}
    )
    stage:addChild(scenemanager)
    scenemanager:changeScene("game")
    Hope this helps :)

    Likes: definisto

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
  • hgy29hgy29 Maintainer
    Accepted Answer
    Or you could pass 'cell' instead of 'self' in your listener:
    	cell:addEventListener(Event.MOUSE_DOWN, cellTouched, cell)
    With cellTouched becoming:
    local function cellTouched(cell, event)
    	if cell:hitTestPoint(event.x, event.y) then
    		cell:setColor(0xCFCFCF)
    		print(cell.xOrd, cell.yOrd)
    	end
    end

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • Thx a lot. That helped :)

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.