Javascript games using processing.js

General

The games are written by Erik and Klara Österling as a way to learn programming. The code is not pretty, and is only to be used for educational purposes.

The objective has been to find a way to write ”real code” and ”real games” which shall work on both PC and phones, in a way that fits the ”I want to see something moving after 15 minutes” attention span.

We have written the games using the processing.js library provided by www.processingjs.org. It gives two major benefits:
- The library provides a clear run time model: a ”setup()” function/placeholder which is run once at game startup, and a ”draw()” function/placeholder which is the ”tick” of the game.
- The library has nice and simple functions for drawing lines, circles, etc and for reading the mouse actions.
Although www.processingjs.org has plenty of examples and tutorials, we learnt the basics via the free on-line javascript course on www.khanacademy.org. We highly recommend that course.

Our first code included the javascript and the html wrapper in the same file. This confused the text editor (notepad++) so we now have a small html file stating which .js file(s) to include. One of the .js files included is the processing.js library.

We have our own web server to publish the games on. We have also tried running the files locally by just opening them with the web browser. This works fine with firefox, but not with IE and chrome as their default security setting prohibits javascripts from local files… On www.processingjs.org, there are also links to on-line editors, which we have not tried.

For questions, email Jacob Österling

Games

Bolle (Erik)

Bolle is a traditional platform game. The ball is moved around using the arrow keys (or pressing the screen). Take the coins while avoiding the spikes. As long as the ball has fuel it can fly. Refuel by pressing down-key. Alot of the code is about checking distance between the ball and the different objects. Uses arrays of objects.

The files are available in bolle/. ”world#.js” has the object positions for the level, and ”bolle.js” has the game logic.

Level 1: Training
Level 2: Somewhat harder

Gravity (Klara)

Two players can shoot projectiles on each others base. The projectiles are affected by gravity from the planets inbetween. Click mouse where you want to aim, adjust with +/- buttons on the screen, and launch. Very addictive…. Introduces states (aiming, flying, etc). The files are available in gravity/

Play the game.

L.E.L (Erik)

Trying to copy the game logic of Leagues of Legends. Move your player around in a maze and attack enemy towers and enemy simple soldiers by walking close to them. To your help there is you own simple soldiers. You win when the enemy base is killed. Point and press the mouse to walk. Lots of arrays of objects, including capabilities, states, etc. Lots of distance checks. Lots of graphics. Lots of everything….

The files are available in LEL/.

Play the game.