Category Archives: HTML5 games

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

HTML5 canvas, HTML5 games

Introduction to HTML5 Games

Leave a comment

I recently wrote two simple games that can be played using a modern browser and this post summarizes the experience. Screenshots of the two games are provided below and you can go and play the games before reading any further by clicking on the buttons below the screenshots. Note that both games need a keyboard and you need to be on a laptop or desktop to play.

The first game is called PADDLE. In this, you move a rectangular paddle at the bottom of the game screen and prevent a bouncing ball from escaping. Each time you hit the ball with the paddle, you get 10 points and if the ball escapes, you lose a life.

paddleGame

The second game is SPACE RACE. You are an intrepid space explorer looking for a blue star. You drive a flying saucer and catch as many blue stars as you can while dodging a green space monster who wants to eat you. In addition, you need to be careful not to fall into one of the 4 black holes! Here is a screenshot:

spaceRaceKey

In general, the time interval between the original concept or game idea to a basic but working implementation is really small for HTML5. If you are a perfectionist, you may spend a lot of time in getting the details just right. And you will eventually drill down and optimize or improve specific features. For example, in the SPACE RACE game, my flying saucer was originally a circle. Changing it to look like a flying saucer required some work and some changes to the “collision detection” portion in the code.

You can access the complete source code for both games by pointing your browser to the corresponding .js files. Feel free to use this code as a baseline for writing your own games.