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 p5.js and its Java version Processing.

The following are the course steps:

Course steps

• Step 1: One Instance + Function move right
• Step 2: Two Instances + Functions move right/left
• Step 3: Multiple Instances + ArrayList + Functions move right/left
• Step 4: Multiple Instances + ArrayList + Functions move right/left + Rebound Function
• Step 5: Multiple Instances + ArrayList + Rebound Function + Location Vector + Multiple Constructors
• Step 6: Multiple Instances + ArrayList + Rebound Function + Velocity Vector + Gravity Vector
• Coding Challenge 1: Class Car showing a X
• Coding Challenge 2: Class Node showing a network

---

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

Jumping (OOP):

Online sketch

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

Online sketch

Camera movement:

---

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:

• Object-Oriented Programming (2018.2)
• Object-Oriented Programming (2018.1)
• Object-Oriented Programming (2017.2)
• Computer Graphics (2017.2)
• Computer Graphics (2017.1)
• Computer Graphics (2016.2)

Example Sketches - Juan Olaya

For more examples, visit OpenProcessing - Juan Olaya

---

JavaScript + UML

• Object-Oriented JavaScript - Third Edition
• ECMAScript 6
• ECMAScript 2015 - Español
• Abstract Methods and Classes
• Abstract and Concrete Classes
• A guide to prototype-based class inheritance in JavaScript
• A basic introduction to JavaScript variable definitions and hoisting
• Algorithm Visualizer
• JavaScript Visualizer 9000

Algorithms

• Grids
• Hexagon Grid

Game Design Books

• Rules of Play: Game Design Fundamentals
• The Art of Game Design: A Book of Lenses

Game Development

• MIT Explains: How To Make a Video Game

• Game Programming 2017-2018

• MiniGames p5/Processing

• The perfect p5.js + VSCode setup

• Inheritance in JavaScript

• Polymorphism in JavaScript