Light up a cell in the grid when touched

definisto · March 2022

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.

MoKaLux · March 2022

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

hgy29 · March 2022

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

definisto · March 2022

Thx a lot. That helped

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Light up a cell in the grid when touched

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Light up a cell in the grid when touched

Comments