OOP
OOP copied to clipboard
JuanOlaya
Object-Oriented Programming (OOP) for Game Development with p5.js
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.
Step 2: Two Instances
Two Instances + Functions move right/left.
Step 3: ArrayList
Multiple Instances + ArrayList + Functions move right/left.
Step 4: Alternative Constructor
Rebound Function + Multiple Constructors + Multiple Instances + ArrayList + Functions move right/left.
Coding Challenge 1:
Multiple instances of the Class Car shaping a X
Step 5: Vectors
Location Vector + Rebound Function + Multiple Constructors + Multiple Instances + ArrayList.
Step 6: Gravity
Velocity Vector + Gravity Vector + Rebound Function + Multiple Instances + ArrayList.
Coding Challenge 2:
Rotate
Coding Challenge 3:
Multiple instances of the Class Node showing a dynamic network
Coding Challenge 4:
Multiple instances of the Class Point showing a dynamic network
Inheritance + Polymorphism
The abstract Class Shape (superclass) extending the following concrete classes (subclasses): Class Circle, Class Square and Class Triangle
Game Mechanics with Object-Oriented Programming (OOP)
Player movement with simultaneous keys (OOP):
Collision Detection (OOP):
Maze (OOP):
Bullets (OOP):
Jumping (OOP):
2 Players Movement + Stop Player by Obstacle (OOP):
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
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
JuanOlaya