Fly to the Moon

Running your sketch in the browser

The next task of our current mission is to take the game we have created in the previous task and make it run in the browser using JavaScript. We will use the Processing.js mode to make our script run and we will create a customized HTML template for our game. The Processing.js mode allows us to run sketches that don't use any external libraries with little to no change in a modern browser.

Engage Thrusters

Let's convert the game to a browser application:

1.Open our sketch and switch from the Processing mode to the JavaScript mode by clicking on the icon above the New Tab icon and selecting JavaScript , as shown in the following screenshot:

2.Now run the sketch. Processing starts a small web server in the background and opens the default browser with an HTML page running our game. This following screenshot shows the game running in a Firefox browser:

152

Project 6

3.Processing.js is implementing a little workaround to make the image loading work. If we run our code as it is, it works perfectly on a local machine or on a very fast Internet connection, but we can make things easier for Processing by activating the preloading of the images we need. Click on the JavaScript | Playback Settings (Directives) menu, and then on the dialog that opens click on the scan button next to "preload": images, as shown in the following screenshot:

153

Fly to the Moon

4.We also check the "pauseOnBlur" checkbox to make our sketch pause when the browser window is switched to the background and loses the focus, since we don't want the player's rockets to crash into the moon just because another application window opened a dialog.

5.After we click on OK, Processing inserts a comment at the beginning of our sketch and defines some directives for Processing.js, which are ignored by the other Processing modes.

6.When we run our sketch in the Processing.js mode, Processing generates an HTML page and draws the program's output on a canvas element. This HTML page is generated from a default template. We are now going to edit this template and add a little PNG graphic with a star pattern as our background image. So, click on the JavaScript | Start Custom Template menu to generate a copy of the template for our program.

7.Now, click on the JavaScript | Show Custom Template menu to open the folder containing the template Processing uses for the HTML page.

8.We need an image we can use as our background, so either create a black image with white dots, or download my version from the book's support file at www. packtpub.com/support and drop it into the template folder next to the template.html and procesing.js files.

9.Open the template.html file using a text editor of your choice. The template. html file is a normal HTML file containing some special placeholder variables that get replaced by Processing when the sketch gets started. Find the CSS section at the beginning of the file and add a background directive to the style definition of the body element.

body {

background-color: #333; color: #bbb; line-height: normal; font-family: Lucida Grande, Lucida Sans, Arial,

Helvetica Neue, Verdana, Geneva, sans-serif;

font-size: 11px; font-weight: normal; text-decoration: none; line-height: 1.5em;

background-image:url('stars.png');

}

10.Save the template and run the sketch again. The background of our HTML page

is now sprinkled with stars like a cloudless night, as shown in the following screenshot—perfect for flying to the moon:

154

Project 6

11.Currently, the HTML page shows the program name and a link to the source code of our sketch. Now we add a special comment to the beginning of our program that gets inserted in the template between these two. Add a comment like this to your sketch right after the Processing.js directives:

/* @pjs pauseOnBlur=true; preload="ship.png";

*/

/**

This is a moon lander game use the cursor keys to control the rocket

*/

int[] moon;

int landingX = 0;

...

155