Learning 03: How the engine works

Perlenspiel is a rather simple game engine. It's designed to focus your effort on game design instead of graphics and sound.

Perlenspiel is also rather stupid. It knows practically nothing about games or interactivity. All it knows how to do is draw the grid, display text in the status line, read input devices such as the mouse and keyboard, and play sounds.

With JavaScript, you can bring Perlenspiel to life.

[Engine]

Whenever the player moves or clicks the mouse, touches the screen, or presses a key on the keyboard, Perlenspiel generates an event call that reports to JavaScript where the cursor is, which bead got clicked or touched, or which key got pressed.

JavaScript can then, if you want, respond to the event call with one or more commands to change the appearance of the grid or any number of beads, display a message in the status line, or play a sound. The event-driven interchange between Perlenspiel and JavaScript creates the entire game experience.

This, by the way, is exactly how full-fledged industrial game engines work.

List of event calls

The following is a complete list of Perlenspiel's event calls. As you can see, the list isn’t very long or complicated.

PS.init(). This event is called only once, when your game first starts running. It's used to establish the initial appearance of the grid and set up your game.

PS.touch(). Called each time a mouse button is clicked over a bead, or (on touchscreens) when a bead is touched with a finger/stylus.

PS.release(). Called each time a mouse button is released over a bead, or (on touchscreens) when a finger/stylus is lifted off a bead.

PS.enter(). Called each time the mouse cursor, or a finger/stylus pressing a touchscreen, enters the perimeter of a bead..

PS.exit(). Called each time the mouse cursor, or a finger/stylus pressing a touchscreen, exits the perimeter of a bead..

PS.exitGrid(). Called each time the mouse cursor, or a finger/stylus pressing a touchscreen, exits the perimeter of the grid.

PS.keyDown(). Called each time a key is pressed on the keyboard. Only called on touchscreen devices with an active keyboard.

PS.keyUp(). Called each time a key is released on the keyboard. Only called on touchscreen devices with an active keyboard.

PS.input(). Called for various device-specific input events, such as when a mouse wheel is scrolled forward or backward.

PS.shutdown(). Called when the web page running Perlenspiel is about to close.

[Perlenspiel logo]

Perlenspiel games are built by deciding how you want to respond to these ten event calls, and writing JavaScript commands to make it happen.

Demonstration

This demo uses debugger to report all of Perlenspiel's event calls.

[Run Demo]

PS.init = function( system, options ) {
 PS.gridSize( 8, 8 );
 PS.debug( "PS.init() called\n" );
};

PS.touch = function( x, y, data, options ) {
 PS.debug( "PS.touch(): x = " + x +
 ", y = " + y + "\n" );
};

PS.release = function( x, y, data, options ) {
 PS.debug( "PS.release(): x = " + x +
 ", y = " + y + "\n" );
};

PS.enter = function( x, y, data, options ) {
 PS.debug( "PS.enter(): x = " + x +
 ", y = " + y + "\n" );
};

PS.exit = function( x, y, data, options ) {
 PS.debug( "PS.exit(): x = " + x +
 ", y = " + y + "\n" );
};

PS.exitGrid = function( options ) {
 PS.debug( "PS.exitGrid() called\n" );
};

PS.keyDown = function( key, shift, ctrl, options ) {
 PS.debug( "PS.keyDown(): key = " + key +
 ", shift = " + shift +
 ", ctrl = " + ctrl + "\n" );
};

PS.keyUp = function( key, shift, ctrl, options ) {
 PS.debug( "PS.keyUp(): key = " + key +
 ", shift = " + shift +
 ", ctrl = " + ctrl + "\n" );
};

PS.input = function( sensors, options ) {
 var device;

 device = sensors.wheel; // check for scroll wheel
 if ( device ) {
 PS.debug( "PS.input(): wheel = " +
 device + "\n" );
 }
};

PS.shutdown = function( options ) {
 PS.debug( "Daisy, Daisy ..." );
};

 

Terms to know

Next: Your first script