Learning 01: Set up your programming environment
However, you should not use a basic text editor for significant programming!
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?
You’re in a job interview at Really Cool Game Company.
“Notepad, whatever,” you answer with cool nonchalance.
You are soon flipping patties at Swift Burgers.
Professionals use IDEs. Act professional.
Webstorm is commercial software, but students and educators can get a free license by registering with their .edu mailing address.
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 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
- IDE (Integrated Development Environment)
Next: Elements and layout