Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about String Avoider game, Game development and iOS.

As you know, Stringy game was built starting from this prototype: Develop a Flash game like String Avoider – AS3 version – and more!.

Christian Wisniewski made a Corona version of the prototype to be played on mobile devices as you can see here:

With this main.lua file:

-- Declaring Variables
-- Stage Width and Height
local _W,_H = display.contentWidth,display.contentHeight

local tailLength = 5
local tailNodes = 200
local head = display.newCircle(_W/2,_H/2,10)
local nodes = {}

for i=1,tailNodes,1 do
	nodes[i] = {}
	nodes[i].x = head.x
	nodes[i].y = head.y
end

-- Creating Display Groups
local tailGroup = display.newGroup()

local function startDrag(event)
	-- Store the Target (the Head) in a variable
	local t = event.target
	if event.phase == "began" then
		-- When the touch started, set the Focus on the Head
		display.getCurrentStage():setFocus( t )
		t.isFocus = true
		-- Store initial Position of the Head
		t.x0 = event.x - t.x
        	t.y0 = event.y - t.y
	elseif t.isFocus then
		if event.phase == "moved" then
			-- While moving the head
			-- remove every drawn line from the group
			for i=tailGroup.numChildren,1,-1 do
				tailGroup:remove(i)
			end
			
			-- Move the Head
			t.x = event.x - t.x0
			t.y = event.y - t.y0
			
			-- Create starting line and insert it into the group
			local line = display.newLine(head.x,head.y,nodes[1].x,nodes[1].y)
			tailGroup:insert(line)
			line.width = 20
			
			nodes[1].x = head.x
			nodes[1].y = head.y
			
			-- Loop through every tailNode and save new positions in table
			-- Note: LUA tables start with an index of 1 and not 0!
			for i=2,tailNodes,1 do
				local nodeAngle = math.atan2(nodes[i].y-nodes[i-1].y,nodes[i].x-nodes[i-1].x);
				nodes[i].x = nodes[i-1].x+tailLength*math.cos(nodeAngle)
				nodes[i].y = nodes[i-1].y+tailLength*math.sin(nodeAngle)
				
				-- You could use
				-- line:append(nodes[i].x,nodes[i].y)
				-- but this wouldn't allow you to alter each segment (fading the color, reducing linewidth etc.)
				
				-- Creating new line segments
				local nLine = display.newLine(nodes[i-1].x,nodes[i-1].y,nodes[i].x,nodes[i].y)
				-- c will store the colorvalue - starting from 255 and ending with 0 (white to black)
				local c = 255-i/tailNodes*255
				nLine:setColor(c)
				-- width will start at 20 and fade out to 0
				nLine.width = line.width-i/tailNodes*line.width
				
				-- Important: insert the new Line segments into the table!
				tailGroup:insert(nLine)
			end
		elseif event.phase == "ended" or event.phase == "cancelled" then
			-- Remove the focus
			display.getCurrentStage():setFocus( t, nil )
			t.isFocus = false
		end
	end
end

-- Create touch Eventlistener
head:addEventListener("touch",startDrag)

During next days I will improve the prototype, maybe this could be a start for a mobile version of Stringy game.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.