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.

[Webstorm]

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 decent IDE.

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

Other free JavaScript IDEs include GitHub’s Atom, Microsoft’s Visual Studio Code and Kodowa’s Light Table.

[Chrome]  [Firefox]  [Edge]

Which browser to use?

Google Chrome, Mozilla Firefox and Microsoft Edge are good choices for Perlenspiel development under Windows. Chrome is currently the champ in terms of performance, close compliance with HTML5 standards, and general lack of flakiness.

By default, Firefox is a bit more lenient about security, which can make it easier to use for developing advanced projects that employ custom media resources, such as images or audio.

All of these browsers come equipped with surprisingly good debugging tools, easily accessed from standard menus. Refer to browser documentation for details.

[No Safari]

Apple’s Safari browser is currently not compliant with HTML5 standards, and is not recommended for development or deployment of Perlenspiel games. If you’re working on a Macintosh, use Chrome or Firefox instead.

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 three files from the devkit into your project directory:

You don’t need to copy the Licenses/ subdirectory. The enclosed legal notices are required to be included in the devkit, but don’t affect the operation of the engine.

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 make it visible by providing a link to the game.html file in that location.

Custom cover images

The image contained in the devkit’s cover.png file is displayed under the Touch image to begin notice when the engine starts.

You can freely change the generic image in the cover.png file to suit your application, as long as (a) it stays in the same directory as the game.html and game.js files, (b) the original filename is not changed, and (c) the original dimensions of the image (512 x 512 pixels) are not altered.

If no cover.png file is present in the same directory as the game.html file when the engine starts, or if the file fails to load for any reason, an image of the Perlenspiel logo is displayed instead.

 

Terms to know

Next: Elements and layout