About Perlenspiel
PGF Course Setup
About Perlenspiel
Perlenspiel is a small game engine based on JavaScript and the HTML5 canvas element. Since it’s based on web technologies, you can play games made in it in any browser. You can read more about the engine at which also includes a full reference for the engine’s features. The site has a good number of example projects that you can try out. Their source code is also available if you want to find out how one of the examples works.
Software Installation
In order to write, play, and debug Perlenspiel projects, you’ll need to download and install two (or three) pieces of software.
Syntax-Highlighting Text Editor
This is where you’ll write your code. These text editors can open any plain text file, but they also have the ability to syntax-highlight code to make it easier to read.
- Windows: Programmer’s Notepad
- Mac: Text Wrangler
Browser with JavaScript Debugger
Since Perlenspiel can run in almost any web browser, you won’t need to download anything special to test your programs. However, if you want to analyze and debug your programs, you will want a browser that has this functionality easily accessible.
I recommend Chrome the most, since it has the best support for Perlenspiel, and it has a powerful built-in JavaScript debugger:
Chrome
Other browses may work, but I will not be providing support for them.
Project Folder Setup
In order to work on Perlenspiel games effectively, you should create a clean folder to hold all of them in an organized fashion. This will help isolate your programming stuff from previous and future classes, and by using a consistent naming scheme, will also help me be able to help you find what you need faster.
To begin, first create a new folder on your computer (typically in the My Documents folder or similar location) then name it “PGF Projects - <month> <year>”.Replace the words <month> and <year> with the current month and year; For example, you could name it“PGF Projects - May 2012”. All of your projects in this class will be created and worked on from inside this folder.
Next, download the file Perlenspiel Game Templatezip file from the course website and unzip it into your PGF Projects folder.
Inside of the PerlenspielTemplatefolder, you should see these files:
The psfolder contains the Perlenspiel engine and supporting files. You shouldn’t ever need to change them.
The game.js file contains the JavaScript code specific to whatever lab or game you are working on. When working on a larger project you may end up with many of these.jsfiles, each containing code specific to some aspect of the game.
The game.html file is the file that you open in a browser to test, run, or play your lab project or game. Go ahead and double click on it now to check it out! It should look like the image below:
Since this Perlenspiel projectisn’t set up to actually do anything, there’s no interaction on this page. You can go ahead and close it.
Note:The PerlenspielTemplatezip file is slightly different from the one available on . Most importantly, it contains the engine inside of the zip, so that it will work even while your laptop has no internet connection. Other than that, the code you write in game.js will work in any up-to-date version of Perlenspiel.
Creating new Projects
Throughout this course, you’ll be making a bunch of new projects based on the project in the PerlenspielTemplatefolder.
To begin, make a copy of the PerlenspielTemplatefolder in your PGF Projects folder and rename it to whatever you want your new project to be named. Make sure all the same files from PerlenspielTemplateare there, and then open up your text editor. Then, drag the game.jsfile into the text editor to open it. Do not double click on the file – this won’t work.
All of the programming you will be doing in this class will be by typing code into a game.js file.
Testing Your Program
After making modifications to the source file, you should test your program to make sure it works the way you expect. Double click on the game.html file on your computer and it will open in your browser. If Chrome is not set to your default browser, you can drag the game.html file into the browser and it will open there.
Note that after the page is already open in your browser, you can reload the game by refreshing the page with the F5 key (fn + F5 on the MacBook keyboard). Doing this will re-load Perlenspiel, and your code along with it, so that changes you made will show up.
Once you are done programming your game or project, you can upload the project folder to a website and give people a link to the game.html web page.
That’s it for setting up the course software!
PGF: Course SetupPg. 1