HTML and CSS Reference
In-Depth Information
Chapter 19
Building a Canvas Editor
What's in This Chapter?
• Serving a game with Node.js
• Creating a touch-friendly editor
• Saving level data
Wrox.com Code Downloads for this Chapter
You can find the
wrox.com
code downloads for this chapter at
www.wrox.com/rem-
title.cgi?isbn=9781118301326
on the Download Code tab. The code is in the Chapter 19 download and individu-
ally named according to the names throughout the chapter.
Introduction
Building off the last chapter, where you built a 2-D platformer, this chapter builds an editor that enables you to
edit the level to modify the tile data that makes up the level and save those changed levels. To allow the level
data to be saved, you need to wrap the game inside of a Node.js application that can handle writing out the saved
game data.
Serving the Game with Node.js
Before your app can handle requests to save level data, the game needs to be served from something besides a
static web server. One solution for this would be to write a simple PHP script that takes in the data and saves the
file to disk. Because this is a book about JavaScript, however, and you'll be using Node.js to build a multiplayer
game in the next couple of chapters, it makes more sense to build the editor using Node to get more experience
with it.
Creating the package.json File
Just like the spritesheet creator application from Chapter 8, “Running JavaScript on the Command Line,” the ed-
itor needs a
package.json
file to let Node know some details about the application, including dependencies.
Create a new directory called
editor
for the editor, and create a file called
package.js
with the contents in
