Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Circle Chain game, Game development and iOS.

As you know, I am porting my Circle Chain game to iPhone, and I am playing with various tools to create iPhone games in the painless way.

After the Adobe Air version, today I will show you how to create the basic engine (circles moving in a random direction) using Corona SDK.

I would suggest you to read my post develop iPhone games with Corona SDK – handling normal and retina display to have some basics about the files you need to create in order to configure your game.

This is how I define content size and scale, in config.lua file:

application =
{
	content =
	{
		width = 320,
		height = 480,
		scale = "letterbox"
	},
}

And this is how I define the game orientation, in build.settings file:

settings =
{
	orientation =
	{
		default = "landscapeRight",
	},
}

Now, the interesting part, in main.lua, which I am commenting and explaining what changed from AS3 version:

display.setStatusBar(display.HiddenStatusBar)
local background = display.newImage("background.png")
local mobs = display.newGroup()
math.randomseed(os.time())
for i = 1, 10 do
	 local greenCircle = display.newImage("greencircle.png")
	 greenCircle.x = math.random(0,479)
	 greenCircle.y = math.random(0,319)
	 local randomDirection = math.rad(math.random(0,359))
	 greenCircle.xSpeed = 2*math.cos(randomDirection)
	 greenCircle.ySpeed = 2*math.sin(randomDirection)
	 mobs.insert(mobs,greenCircle)
end

local function update(e)
	for i = 1, mobs.numChildren do
		mobs[i].x = mobs[i].x + mobs[i].xSpeed
		mobs[i].y = mobs[i].y + mobs[i].ySpeed
		if(mobs[i].x<0) then
			mobs[i].x = mobs[i].x + 480
		end
		if(mobs[i].x>480) then
			mobs[i].x = mobs[i].x - 480
		end
		if(mobs[i].y<0) then
			mobs[i].y = mobs[i].y + 320
		end
		if(mobs[i].y>320) then
			mobs[i].y = mobs[i].y - 320
		end
	end	
end

Runtime:addEventListener("enterFrame",update)

Line 1: removes the iPhone’s status bar.

Line 2: that’s how I create and add to the “stage” the background image.

Line 3: I am creating a group of “Display Objects” called mobs, getting something between a Vector and a Display Object Container.

Line 4: Like in the good old times, I have to define a seed for all random number generation, to prevent the system to generate always the same sequence.

Line 5: yes, this is a for loop.

Line 6: again, I create and add to the “stage” a new “Display Object” using the green circle image.

Lines 7-8: placing the circle in a random position acting on x and y properties. math.random() will generate a random number between 0 and 1, while math.random(x,y) will generate a random integer between x and y.

Line 9: generating a random direction, in degrees, then converting it to radians.

Lines 10-11: determining the horizontal and vertical speed using trigonometry, and saving them as properties.

Line 12: inserting the green circle mob into mobs display group

Lines 15-32: function to be executed at every frame, explained later

Line 34: this is the declaration of the enter frame event listener, and it must be placed after the callback function, otherwise it won’t work.

Now let’s see update function:

Line 16: scanning through mobs children, starting from one

Lines 17-18: updating each circle position according to its x and y speed, and no, you can’t use +=

Lines 19-30: handling circles when they fly out of the stage.

This is the result:

The video may seem laggy but the engine on the simulator is working smoothly and perfectly.

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