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

<p align="center"> <a> <img src="Images/Exercise1.gif" width=350 height=190> </a> </p> <p align="center"> <a> <img src="Images/processingClassCar.png" width=600 height=430> </a> </p> <p align="center"> <a> <img src="Images/p5jsClassCar.png" width=600 height=730> </a> </p>

---

Step 2: Two Instances

Two Instances + Functions move right/left.

See on OpenProcessing

<p align="center"> <a> <img src="Images/Exercise2.gif" width=350 height=190> </a> </p>

---

Step 3: ArrayList

Multiple Instances + ArrayList + Functions move right/left.

See on OpenProcessing

<p align="center"> <a> <img src="Images/Exercise3.gif" width=350 height=190> </a> </p> <p align="center"> <a> <img src="Images/ArrayListOOP.png" width=600 height=430> </a> </p>

---

Step 4: Alternative Constructor

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

See on OpenProcessing

<p align="center"> <a> <img src="Images/Exercise4.gif" width=350 height=190> </a> </p>

---

Coding Challenge 1:

Multiple instances of the Class Car shaping a X

See on OpenProcessing

<p align="center"> <a> <img src="Images/CodingChallenge1.gif" width=350 height=190> </a> </p>

---

Step 5: Vectors

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

See on OpenProcessing

<p align="center"> <a> <img src="Images/Exercise5.gif" width=350 height=190> </a> </p>

---

Step 6: Gravity

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

See on OpenProcessing

<p align="center"> <a> <img src="Images/Exercise6.gif" width=350 height=190> </a> </p>

---

Coding Challenge 2:

Rotate

See on OpenProcessing

<p align="center"> <a> <img src="Images/RotateChallenge.gif" width=350 height=190> </a> </p>

---

Coding Challenge 3:

Multiple instances of the Class Node showing a dynamic network

See on OpenProcessing

<p align="center"> <a> <img src="Images/CodingChallenge2.gif" width=350 height=190> </a> </p>

---

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

<p align="center"> <a> <img src="Images/InheritancePolymorphism.png" width=550 height=340> </a> </p>

---

Game Mechanics with Object-Oriented Programming (OOP)

Player movement with simultaneous keys (OOP):

Online sketch

<p align="center"> <a> <img src="Images/keysPressedSimultaneously.png" width=350 height=230> </a> </p>

Collision Detection (OOP):

Online sketch

<p align="center"> <a> <img src="Images/collisionOOP.png" width=350 height=190> </a> </p>

Maze (OOP):

Online sketch

<p align="center"> <a> <img src="Images/mazeOOP.png" width=350 height=190> </a> </p>

Bullets (OOP):

Online sketch

<p align="center"> <a> <img src="Images/bulletOOP.png" width=350 height=190> </a> </p>

Jumping (OOP):

Online sketch

<p align="center"> <a> <img src="Images/OOPjumping.gif" width=350 height=190> </a> </p>

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

Online sketch

<p align="center"> <a> <img src="Images/2playersMovementObstacleOOP.png" width=500 height=420> </a> </p>

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

<p align="center"> <a> <img src="Images/LiveCodingOOP.png" width=700 height=380> </a> </p>

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

<p align="center"> <a href="https://www.openprocessing.org/user/65585/" target="_blank"> <img src="Images/openProcessingProfile.png" width=300 height=275> </a> </p>

---

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