Category Archives: JavaScript

HTML5 games, iOS, JavaScript, PhoneGap

HOLES: My first game for ios using PhoneGap

1 Comment

Introduction

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:

Screen Shot 2014-04-11 at 1.44.43 AM

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

If you have been following my previous PhoneGap posts, there is nothing new about building and running the project once you have all the source code (HTML/CSS/JavaScript) and image files in your www folder. Once you are inside your PhoneGap project directory, you can get rid of the www folder created by PhoneGap and  clone the source code for this project from GitHub using

$ 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:

Screen Shot 2014-04-11 at 2.05.24 AM

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

Because the iPhone and iPad have different screen sizes and I did not wish to go and change the canvas size each time I changed a device, I ended up using the screen.width call inside JavaScript to resize the canvas when necessary, as shown below:

    
    // 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.

Screen Shot 2014-04-11 at 1.32.47 AM

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.

Physics

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!

HTML5 canvas, JavaScript, PhoneGap

Mobile accelerometer “app” using PhoneGap

Leave a comment

In my previous post, I explained how to install PhoneGap on a Macbook Pro and test a “Hello World” application on an iOS simulator as well as an actual device. In this post, you will see how easy it is to build a simple mobile application for the iPhone using the PhoneGap framework. Specifically, you will learn how to use the accelerometer and build a simple “app” that will display the instantaneous acceleration of the iPhone in both graphical and text format.

Let’s take a look at the final product. Shown below are a couple of snapshots of the app in action, with the iPhone held in three different orientations. I developed and tested the app for an iPhone 4 (from late 2010). The app should work fine on newer iPhone models as well, although I have not tested this myself. Note that this app will not work on an iOS simulator. You will need an actual iOS device (either iPhone or iPad).

Screen Shot 2014-04-04 at 7.23.56 PM

Observe how the X and Y axes are oriented with respect to the phone. The Z-axis (not shown) points out of the page towards the reader. The coordinate system represented by X-Y-Z always remains fixed with respect to the phone.

The yellow line from the origin can be thought of as an arrow that begins at the origin and points along the direction in which the device is being accelerated. If the phone is stationary, this direction is exactly opposite to what most people understand as the direction of gravitational force (pointing towards the ground). For some more background on the physics of gravity and acceleration, please refer to this article.

Finally, the actual acceleration values along X, Y and Z are printed below the graphics window (yes, the graphics is based on HTML5 canvas) and these numbers are all in units of [m/s2]. You may recall from high school physics that the acceleration due to gravity on the Earth’s surface is approximately 9.8 [m/s2].

Look at the different orientations (a), (b) and (c) in the above picture and make sure you understand what the results mean for each one of them.

—

Now that we understand everything from the physics point-of-view, let’s get back to the software side of things. The following steps are necessary to build this application:

STEP 1: Install and test PhoneGap (see my previous post)

STEP 2: Create a new project

$ phonegap create accel --name Accelerometer --id com.company.accel

All subsequent PhoneGap commands should be run inside the accel folder.

STEP 3: Add the accelerometer plugin

$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git

STEP 4: Add the HTML5 and JavaScript code

Pull the source code from my GitHub repo using

$ git clone https://github.com/jabhiji/ios-accelerometer-phonegap.git

Move the file “index.html” from the repo folder to the “www” folder of your PhoneGap project.

The basic idea is to get acceleration data from the device every 100 milliseconds and use this data to update the drawing inside the canvas element. The code above is based on some minor modifications to the example code provided on the PhoneGap API documentation. Specifically, it adds the graphical display component using HTML5 canvas.

STEP 5: Build, deploy and run

Like before, all you need to do is:

$ phonegap build ios

followed by

$ phonegap run --device ios

This will compile the code and deploy the application on your device and the run it.

STEP 6: Enjoy your accelerometer!

While all of this can be polished further depending on your individual taste, you are  now all set to test drive this app in any location you can imagine. Drop me a line if you find any bugs or think the results are not accurate or don’t make physical sense.

—

In summary, we have written a HTML/CSS/JS application and deployed it to an iOS device using PhoneGap.

HTML5 canvas, HTML5 games, JavaScript

BOTNIK: the benevolent bomber

Leave a comment

My most recent HTML5 game is called BOTNIK: The benevolent bomber.

The name is intended to be a mix of robot and Sputnik-I, the first ever satellite launched by the USSR in 1957. Anyway, the idea is to drop snow bombs on snow monsters. The benevolent part is that the bombs don’t kill the monsters but actually supply them with fuel so that they can float up and escape from Earth.

botnik

If you want to play the game, click on the button above. This post summarizes some of the new things I learned while making this game. You will note that this game reuses some code from my earlier SPACE RACE game, especially the background image (starfield) and the cute little space ship.

Adding transparency to part of your image

In this game, I wanted a fixed background image of stars and wanted a second image (buildings in a city) in “front” of it that moved to the left and right depending on which direction the UFO was going.

I made the city buildings using Keynote and then used the Preview application on my Mac to select and crop the “sky” above the buildings. This essentially makes everything above the buildings completely transparent. In the future, this might also come in handy when working with sprites.

Panning background images

A simple way to implement a background that scrolls to the left and right forever is to offset the background image suitably and then draw the same background image (the city buildings in this case) to the right or left respectively.

This idea is sometimes referred to as tiling. You essentially copy the same pattern along the X-direction in this case. Note that you should be careful to make the background image “periodic” so that the player does not detect sharp gradients between the end of one image and the beginning of the next image.

Turning off default key behavior

In this game, hitting the down arrow key on the keyboard causes the UFO to drop a snow-bomb. However, since we are playing the game in a browser, the down arrow key also implements scrolling of the web-page. We can disable this “default behavior” by using the JavaScript preventDefault() method.

    // down arrow - drop a bomb
    if(e.keyCode == 40)
    {  
        e.preventDefault();
        down_arrow_pressed = true;
    }

Adding gravity

This is relevant for the snow-bomb once it has been dropped. If you want to make the trajectory of the bomb realistic, you need to incorporate the right physics here. Essentially, the horizontal velocity of the bomb continues to be identical to what it was when the bomb was dropped. The vertical velocity (pointing downwards) is initially zero (in this case) and then increases linearly with time because of a constant gravitational acceleration. The path of the bomb turns out to be a parabola.

—

Hope you have fun playing! I’ll be back with more games soon.