Skip to content

Commit

Permalink
Merge remote-tracking branch 'Product-College-Courses/master'
Browse files Browse the repository at this point in the history
  • Loading branch information
seve committed Nov 27, 2018
2 parents 2f93402 + f2c3a34 commit 74c808d
Show file tree
Hide file tree
Showing 24 changed files with 1,663 additions and 79 deletions.
Binary file modified .DS_Store
Binary file not shown.
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,26 +23,26 @@ Should be ~13 planned lessons (7 weeks x 2 meetings per week -~1 holiday)
| Week | Class | Topics |
|:-------|:---------|:---------------------------------------|
| Week 1 | | Break Out |
| | Class 1 | [JavaScript with Games intro](class-01) |
| | Class 2 | [Loops and Conditionals](class-02) |
| | Class 1 | [JavaScript with Games intro](class-01)|
| | Class 2 | [Loops and Conditionals](class-02) |
| Week 2 | | |
| | Class 3 | [Working with Canvas](class-03) |
| | Class 4 | [Class Objects OOP](class-04) |
| | Class 3 | [Working with Canvas](class-03) |
| | Class 4 | [Class Objects OOP](class-04) |
| Week 3 | | Oregon Trail |
| | Class 5 | [Oregon Trail Tutorial](class-05) |
| | Class 6 | [Updating and refactoring](class-06) |
| | Class 5 | [Oregon Trail Tutorial](class-05) |
| | Class 6 | [Updating and refactoring](class-06) |
| Week 4 | | |
| | Class 7 | [Working with Class Objects](class-07) |
| | Class 8 | [Debugging and Code Review](class-08) |
| | Class 7 | [Working with Class Objects](class-07) |
| | Class 8 | [Debugging and Code Review](class-08) |
| Week 5 | | Phaser JS |
| | Class 9 | [Wrapping Up Oregon Trail](class-09) |
| | Class 10 | [Phaser Tutorial](class-10) |
| | Class 9 | [Wrapping Up Oregon Trail](class-09) |
| | Class 10 | [Phaser Tutorial](class-10) |
| Week 6 | | |
| | Class 11 | [TBA](class-09) |
| | Class 12 | [TBA](class-09) |
| | Class 11 | [TBA](class-11) |
| | Class 12 | [TBA](class-12) |
| Week 7 | | |
| | Class 13 | [TBA](class-09) |
| | Class 14 | [TBA](class-09) |
| | Class 13 | [TBA](class-13) |
| | Class 14 | [TBA](class-14) |

## Course Specifics

Expand Down
2 changes: 2 additions & 0 deletions class-06/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ After playing the game/using the code the next step is reading the code and maki

**Template Strings**

var t = "Hello"+world // var t = `Hello ${world}`;

The code seems to have been written before template strings. Template Strings are really great, they shorten long string concatenations and are easier to read. They can also be broken up on to multiple lines.

- [Template Strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
Expand Down
67 changes: 49 additions & 18 deletions class-07/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,20 +90,7 @@ Convert the UI Object to a class. This Object is defined in 'UI.js'. The `UI` Ob
- `shopDivHandler(e)`
- `buyProduct(product)`

**Challenge 3**: Create a Game Class. This should replace the Game Object. This Object is responsible for managing all of the other Objects.

- Properties:
- `ui`
- `eventManager`
- `caravan`
- Methods
- `init()`
- `startJourney()`
- `step()`
- `updateGame()`
- `pauseJourney()`

**Challenge 4**: Create an Event Class, and classes for the other Objects used by Event.
**Challenge 3**: Create an Event Class, and classes for the other Objects used by Event.

Look closely at `Event.js`. This file creates several Objects.

Expand Down Expand Up @@ -147,7 +134,54 @@ You should make a Class for each of these Objects! Here is a list of the Classes
- `shopEvent(eventData)`
- `attackEvent(eventData)`

** Challenge 4**: Make it all work! The last step is getting all of this updated code to work. The goal is to have instances of the Class Objects replace the Objects from the original tutorial code.
**Challenge 4**: Create a Game Class. This should replace the Game Object. This Object is responsible for managing all of the other Objects.

- Properties:
- `ui`
- `eventManager`
- `caravan`
- Methods
- `init()`
- `startJourney()`
- `step()`
- `updateGame()`
- `pauseJourney()`

Looking closely you'll see that Each of these classes: UI, Caravan, and EventManager own a reference to the other classes. This is needed since Event will need to send an event to Caravan, and Caravan might need to update UI at some point

You won't be able to set these references until after the Objects are created. For this reason the Game Class has the job of creating and initializing the other classes.

In the original code Game.init() has the job of setting reference to the other Objects. If you make a class Object for Game you can use the constructor function to create the other Objects and set the references for each. Something like:

```JavaScript
class Game {
// Initialize the Game Object
constructor() {
// Create dependent Objects
this.ui = new UI(this);
this.eventManager = new EventManager(this);
this.caravan = new Caravan(this);

// pass references - set dependencies
this.caravan.ui = this.ui;
this.caravan.eventManager = this.eventManager;

this.ui.caravan = this.caravan;
this.ui.eventManager = this.eventManager;

this.eventManager.caravan = this.caravan;
this.eventManager.ui = this.ui;

// begin adventure!
this.startJourney();
}

...

}
````

** Challenge 5**: Make it all work! The last step is getting all of this updated code to work. The goal is to have instances of the Class Objects replace the Objects from the original tutorial code.

You'll need to create an instance of each of the new Class Objects. You'll also need to make these instances available to other instances. Notice in `OregonH.Game.init()` find:

Expand All @@ -160,6 +194,3 @@ Earlier in 'UI.js' the `UI` Object was created and assigned to `OregonH` as a pr



28 changes: 28 additions & 0 deletions class-07/notes/minute-by-minute.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
- Intro
- Update the Tracker
-- Attendance
- Classes and Game Structure
- Review the properties and methods of each class
- _Optional_ Template Strings and Destructuring
- Template Strings
- Destructuring Objects
- Work: Oregon Trail
- Break 10min
- Work: Oregon Trail
- Code Review
- Project One - Volunteer
- Project two - Random

Notes for Code Review

A code review, at its core, is a conversation about a set of proposed changes.

Opportunity to concurrently learn and teach while also strengthening relationship with peers.

Authors should annotate source code before the review

Understand the “Why” of changes

Giving Positive Feedback

Code Review Comment Explained Well
34 changes: 6 additions & 28 deletions class-08/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,15 @@ Debugging and code review should be a regular process in development.

### Debugging in the Browser

- console.log()
- debugger
The more complex your code becomes the more tools you need to
help you solve the problems that will eventually arise.

Exercise
Read this article: https://developers.google.com/web/tools/chrome-devtools/javascript/

Use debugger and console.log() to solve problems.
Follow the tutorial example then try these techniques on your project.

- https://medium.com/@interdigitizer/5-debugging-tools-every-javascript-programmer-should-know-and-use-38575141689c
## After class

## Code Review
Continue work on the Oregon Trail project. The goal is to have this finished the half of next week class 9.

Code review is essential to getting the best quality code. It is also a common regular practice at most companies. You should master giving and receiving code reviews.

- [How to conduct a code review](https://blog.digitalocean.com/how-to-conduct-effective-code-reviews/)
- [Best Practices for Code Review](https://smartbear.com/learn/code-review/best-practices-for-peer-code-review/)

## Exercise Pair and debug

Identify a problem in your current project that you need to debug.

Pair up with another student with the goal of solving the problem you have identified.

Follow these steps

- Explain the problem
- List and describe the solutions you have tried
- Give a quick tour of the code
- Work together/Pairing on a single computer to solve the problem

## Exercise Code Review

Pair up with another student and code review their work. Use the ideas from the Best practices article above.

You should identify a class, file, or block/section of code that you will be reviewing.
48 changes: 42 additions & 6 deletions class-09/README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,56 @@
# FEW 1.2 Class 9

Lab and Review
Lab day work and problem solving.

## Aside: Why?

Why are we learning all of the Class syntax? React!

React uses ES6 class syntax heavily. React is built from
components, and components are based on and written using
ther ES6 class syntax.

While you may or may not consider games to be fun. All of
the problems you solve in games are very similar to the
problems you're solving elsewhere. A two dimensional array
of bricks might really be a graph of productsm matched to
users as recommendations.

Solving problems is your job as a software developer. You
should not limit yourself in the types of problems want
to solve. Instead you should be willing and able to
solve any problem that comes along.

Here are a few of the bigger problems you are solving:

- Managing data
- Multidimensional arrays
- complex objects
- Organizing and structuring code
- Using Classes
- Handing events
- Dependancy Injection

These ideas apply to all software development.

## Lab and Review

Students work in groups to solve problems. Students offer problems they are having, list these on board.

Discuss problems and solutions.
**Discuss problems and solutions.**

Group/pair students to work together for a 15 to 20 min block of time with the goal of solving one of the problems from the list.

Repeat the process.
**Take a break**

Take a break

Repeat the process again mixing group/pairs
Repeat the process again mixing group/pairs.

End class with a review of the problems and solutions that were developed during class.

## After class

- Finish up the Oregon Trail Project
- Code review your work with another student



55 changes: 44 additions & 11 deletions class-10/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,68 @@
Phaser is a library for making games in JS.

Phaser is pretty sophisticated it takes all of the objects you migth have created in the break out game, expands on them.
Pahser uses canvas to render objects to the screen. Pahser breaks all of the common tasks into classes that cna be reused.

Phaser uses canvas to render objects to the screen. Phaser breaks all of the common tasks into classes that can be reused.

## Getting started

Why learn Phaser JS? Currently there are more JS libraries
written for JS than any other language. Learning to get into
and apply a library is an important skill.

The Phaser 3 library is very complex. Learning Phaser isn't
about learning Phaser. Instead it's about learning how to
read documentation, apply methods and classes from a library
that you didn't write. This is a valuable job skill and an
important skill every developer has to learn.

Learning Phaser also gives you a chance to see the same problems
you solved earlier with vanilla JS were solved with a high
degree of abstraction. If you kept evolving your previous
games you would end up with a library like phaser, after some
years of developement! Seriously.

This is class is not about games. It's about learning JS.

### Phaser 3

Phaser is a game library written in JS. The latest version is 3.
There is a lot of documentation written for version 2. For this
assignment you must use version 3! When you check the notes,
tutorials, and documentation part of your jonb will be to
verify that the information you are researching applies to
version 3.

If not you'll need convert the infromation, code snippets,
examples, tutorials, etc. to Phaser version 3.

### The local server and CORS

Before getting started we need to understand web browsers, security, and Cross-Origin Resource Sharing or [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
CORS is an issue you will run into often working with JavaScript as your applications get more complex.
In short the browser puts limits to what files can be accessed via JavaScript in the browser.

To test Phaser locally you'll need to run a local server. Follow the guide here:
In short the browser puts limits to what files can be accessed via JavaScript in the browser. This is a good thing for an end user but places a burden on you as a devleoper.

- https://phaser.io/tutorials/getting-started-phaser3
To test Phaser locally you'll need to run a local server. Follow the guide [here](https://phaser.io/tutorials/getting-started-phaser3)

### Phaser Tutorial

You really need to learn some Phaser! Start the tutorial. This tutorial creates a simple platform game.
Everyone is talking about libraries. They seem to be the big thing is web development. Anything bigger than a small project could use a library to save time and make it easier to implement sophisticated features.

- https://phaser.io/tutorials/making-your-first-phaser-3-game/
You've decided to make another game. Rather than write it all from scratch you've decided to use a library! This will allow you to implement complext features without having to invent them on your own from scratch. You heard [Phaser JS](https://phaser.io) is pretty good, and they just came out with version 3, time to code!

### MDN Breakout with Phaser
You really need to learn some Phaser! Start with the tutorial. This tutorial creates a simple [platform game](https://en.wikipedia.org/wiki/Platform_game).

As an alternative to the Phaser Tutorial above you can work on this tutorial which creates a Breakout game with Phaser. This is an easier project that still uses Phaser.
- [Phaser 3 Tutorial](https://phaser.io/tutorials/making-your-first-phaser-3-game/)

If you were interested in the physics and collisions in the first tutorial this term this one improves on those using Phaser. The Phaser library includes a full Physics engine.
### Alternate Tutorials

This tutorial also shows what it looks like when you break code into Objects. Imagine you kept developing those objects from the first assignment, this project would be the project from the future, after having been developed to a high degree.
Here are a few alternate tutorials you try instead of the
tutorial above. It's strictly up to you which you choose.

- https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser
- [Flappy Bird](http://www.lessmilk.com/tutorial/flappy-bird-phaser-1)
- [Breakout](http://www.lessmilk.com/tutorial/breakout-phaser)
- [2D Platformer](http://www.lessmilk.com/tutorial/2d-platformer-phaser)

## Challenges

Expand Down
Loading

0 comments on commit 74c808d

Please sign in to comment.