Learning 01: Set up your programming environment

Perlenspiel games are written with JavaScript.

JavaScript is the most popular and widely-deployed programming language in the world. It is used to control the look and behavior of nearly all of the billions of pages on the World Wide Web. Using the latest HTML5 technology, JavaScript is now being used to write complex Web-based applications, including many popular games. JavaScript programming is a very useful skill to have, and looks good on your resume.

Any basic text editor can be used to edit JavaScript code.

However, you should not use a basic text editor for significant programming!

Your productivity will be greatly magnified by using an integrated development environment (IDE) specifically designed for HTML5/JavaScript development. An IDE combines facilities for editing and running code with powerful debugging tools that can save you hours and hours of frustration.

It can take an entire afternoon to track down an obscure syntax error in your code. A professional IDE will point out such errors as you type them.

How would you rather spend your time?

Nightmare scenario

You’re in a job interview at Really Cool Game Company.

The engineer interviewing you notes with approval that you have included JavaScript on your resume. “What do you use to edit JavaScript?” she asks.

Notepad, whatever,” you answer with cool nonchalance.

You are soon flipping patties at Swift Burgers.

Professionals use IDEs. Act professional.


My current IDE recommendation for Windows-based development is Webstorm by Jetbrains. Webstorm is loaded with impressive features that greatly facilitate the development of HTML5/JavaScript applications, including Perlenspiel games. If you’ve already used other professional IDEs like Visual Studio or Eclipse, Webstorm will feel very familiar. If you haven’t, Webstorm will serve as a good introduction to what to expect from a good IDE.

Webstorm is commercial software, but students and educators can get a free license by registering with their .edu mailing address.

[Firefox]   [Chrome]

Other free JavaScript IDEs include Adobe’s Brackets and GitHub’s Atom.

Which browser to use?

Both Mozilla’s Firefox and Google’s Chrome are good choices for Perlenspiel development. By default, Firefox is a bit more lenient about security, which makes it easier to use for advanced projects that employ custom media resources such as images or audio.

Webstorm supports “live” debugging in Firefox and Chrome. Both browsers need a custom extension to enable this feature. Webstorm automatically installs the Firefox extension the first time you need it, but the Chrome extension must be installed manually. To do this, start Chrome and visit the Chrome Web Store. Search for “Jetbrains” and install the free Jetbrains IDE Support extension.

If you prefer, you can also use the excellent debugging tools built-in to Firefox and Chrome. Refer to the browser documentation for details.

Microsoft’s Internet Explorer and Edge browsers do not comply with HTML5 standards, and are not recommended.

Setting up

Setting up a new Perlenspiel project with Webstorm is easy:

1. Create a directory for your project in a convenient place. Name the directory to match the title of your project.

2. Grab a copy of the latest Perlenspiel devkit from the Download page. Unzip the devkit. Copy these four files from the devkit into your project directory:

3. In Webstorm, select File->New Project from the main menu. A dialog box will appear.

4. Press the browse button at the end of the Location field, and navigate to the location of your project folder. The Project Name field will be automatically filled in with the name of your folder. Leave the Project Type field set to Empty Project. Click the OK button.

5. Webstorm will ask if you want to create your project using existing files. Click the Yes button.

That's it! Your new project will appear at the top of the file list on the left side of the IDE. Press the + button beside your project name to reveal the devkit files. Open the game.js file and edit it to create your game.

To test your work, open the game.html file. Move your cursor near the top-right corner of the editor window. A line of icons representing the browsers available to Webstorm will appear. Click the icon of a browser and your game will launch.

When your project is finished, you can move it to the cloud by copying your entire project directory to a Web server, and run it by linking to the game.html file (or the cover.html file if you're using a cover image with your project).


Terms to know

Next: Elements and layout