Skip to content
Object-Oriented Programming (OOP) for Game Development with p5.js
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Images
ProcessingFellowship
Sketches
LICENSE
README.md

README.md

Object-Oriented Game Development with p5.js

Object-Oriented Programming (OOP) for Game Development with p5.js by Juan Olaya

For this course we use the JavaScript library P5js and its Java version Processing.

The following are the course steps:

Course steps


Step 1: One Instance

One Instance + Function move right. Download Class Car.

See on OpenProcessing


Step 2: Two Instances

Two Instances + Functions move right/left.

See on OpenProcessing


Step 3: ArrayList

Multiple Instances + ArrayList + Functions move right/left.

See on OpenProcessing


Step 4: Alternative Constructor

Rebound Function + Multiple Constructors + Multiple Instances + ArrayList + Functions move right/left.

See on OpenProcessing


Coding Challenge 1:

Multiple instances of the Class Car shaping a X

See on OpenProcessing


Step 5: Vectors

Location Vector + Rebound Function + Multiple Constructors + Multiple Instances + ArrayList.

See on OpenProcessing


Step 6: Gravity

Velocity Vector + Gravity Vector + Rebound Function + Multiple Instances + ArrayList.

See on OpenProcessing


Coding Challenge 2:

Rotate

See on OpenProcessing


Coding Challenge 3:

Multiple instances of the Class Node showing a dynamic network

See on OpenProcessing


Coding Challenge 4:

Multiple instances of the Class Point showing a dynamic network

See on OpenProcessing


Inheritance + Polymorphism

The abstract Class Shape (superclass) extending the following concrete classes (subclasses): Class Circle, Class Square and Class Triangle

See on OpenProcessing


Game Mechanics with Object-Oriented Programming (OOP)

Player movement with simultaneous keys (OOP):

Online sketch

Collision Detection (OOP):

Online sketch

Maze (OOP):

Online sketch

Bullets (OOP):

Online sketch

2 Players Movement + Stop Player by Obstacle (OOP):

Online sketch


Bonus: LiveCoding (OOP) with Hydra

We use p5js and OOP in LiveCoding using the tool Hydra of Olivia Jackson. Hydra is available as a package of the code editor Atom or online on the web editor. Download the JavaScript OOP code

Hydra Example


Student Sketches

To see and interact online with the sketches made by the students, you can visit the following classes on OpenProcessing:

Example Sketches - Juan Olaya

For more examples, visit OpenProcessing - Juan Olaya


JavaScript + UML

Game Design Books

Game Development

You can’t perform that action at this time.