My idea was to use the accelerometer and control the motion of a circular ball on a 2D game board. The goal of this game is to guide the yellow ball to the flag without falling into the black holes. Here are a few screenshots of the game in action on an iPad:
You start with the ball in the lower right corner. Each successful journey to the flag earns you one point and you lose a life each time the ball falls into a hole. To make things difficult, the pattern of holes rotates about the center of the central hole. Each point scored increases the rotational speed.
Building the project
$ git clone https://github.com/jabhiji/ios-ballgame-phonegap.git www
Note that you will also need to download the plugin for using the accelerometer.
Locking the screen in Portrait mode
The design of this game requires that the screen on your iPhone or iPad always remain locked in portrait mode. PhoneGap provides a “config.xml” file inside the www folder where you can configure various settings, one of which is the orientation. However, I had a hard time getting this to prevent the screen rotating when I changed the orientation of the iPad (it worked fine on an iPhone!). I had to use Xcode and change the following function inside “AppDelegate.m” to prevent this from happening:
I just changed all the 1s to 0s on the last three lines, keeping the 1 for the portrait mode. I am not an expert in Xcode and objective-C, so any suggestions or comments about this hack are most welcome. So far, this seems to work for both iPhone and iPad.
One code for iPhone and iPad
// change canvas size if running on iPad
if(screen.width > 400)
canvas.width = 750;
canvas.height = 750;
xmax = 750;
ymax = 750;
The canvas size is thus adjusted during run-time for iPad. All the game elements like the ball size, hole size and velocity are scaled with respect to the canvas size.
Creating an icon for your app
You typically want to design a simple and unique icon for your game. This icon will be displayed on the iPad screen with all of your other apps. I had heard good things about Gimp and decided to give it a try. Apart from being free, this is a very intuitive and easy image editing tool for beginners, once you get the hang of it.
After playing with GIMP for a while, I was able to design a simple image for the game icon. Note the convention Apple uses to name the image files. For example, the ‘@2x’ is a hint to iOS that we are supplying a high-resolution version of the icon, for use with Retina displays.
The part where the ball bounces off the walls is easy to implement. I added in a factor that reduced the speed of the ball after each impact.
Next, I tried to make the game more realistic, especially the part where the ball falls in one of the holes. Apart from the force acting on the ball because we tilt the device, I added in a “force-field” once the center of the ball falls inside the circumference of the hole. My idea was to add an “inverse-square-law” force (similar to gravitation) on the ball acting towards the center of the hole and also slow down the velocity of the ball.
While this simplistic approach works and does not make things go horribly wrong, I am sure with some more tinkering, I will be able to make things better than they are now.
I had an absolute blast making this game and I hope you have fun playing it!