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:

   

3. Processing.js is implementing a little workaround to make the image loading work. If we run our code as it is, it...