Object-oriented Programming in JavaScript
Posted on Jun 8th, 2020
This is the last week of Phase 1, so we will have a week-long project that you will work on in study groups and end the week with technical presentations on Thursday.
Today’s topics
- Intro to object-oriented programming in JS
- Using classes in JS
- Building games in JS
- using requestAnimationFrame
- the Canvas API
Project
Build a game
This project is due on Thursday, June 11.
Study groups for this project are to encourage you to put your heads together to solve the problems this project poses. You will need to wrestle with this material; read other people’s code; take that code apart and run it, change it, and break it to understand what it’s doing; read documentation and just try stuff until things start to click for you. Doing this with other people will help a lot!
Pair/group assignments:
- Joey & Tyler
- Rajee & Russell & Shelby
TODO for tonight
- Watch Mary Rose Cook’s video again; read her annotated code. Get the updated space invaders code from our examples repo and run it locally. Read that code, change it, and see what happens. See if you can start to understand what is happening. (Links to all of these things below)
- Play with the Canvas API and requestAnimationFrame. Both of these are used in the space invaders code.
- Play the games that are provided as options in the homework assignment. Begin to write a CRC model for the one that you feel most interested in.
- Get started writing the code: a good first step is to draw a player on the screen in your own browser. Then, see if you can make that player move.
End of Phase Presentations are on Thursday
Instructions for technical presentations
Links and resources
- MDN OO in JS for Beginners
- MDN
this thisin JS explained simply- Class-Responsibility-Collaborator model
- Mary Rose Cook live codes space invaders
- Mary Rose Cook’s annotated space invaders code
- animation with requestAnimationFrame
- How to use requestAnimationFrame
- MDN Canvas API
- 2D Collision Detection in JS