/JavaScript-Canvas-Game-Course

Learn JavaScript by building a game using HTML canvas.

Primary LanguageJavaScript

Saturday March 17

Assignment

  1. Play some games on MozillaLabs
  2. Pick out two or three you would like to take apart. Pay special attention to the ones with a "SEE THE SOURCE" button. Those are specifically designed for easy examination. The others may be tricky.
  3. Make some notes describing how the game works. How would you explain it to someone who hasn't seen or played it before? How would you describe it to someone who has never played a game before? Programming a computer is like giving directions to a perfectly obedient idiot who hardly knows anything and takes everything you say literally.
  4. Just to add to it, if there's any specific game or genre you want to talk about. Please let me know.

History

Topics

Variables, expressions, statements, function calls, HTML canvas.

Tools

Tutorials

Canvas Examples

Canvas Reference

Other

Saturday March 24

Assignment

Topics

setTimeout, setInterval, console.log, function definitions, loops, conditionals.

Example

Fractal Machine is not perfect, but it does do some interesting things. We'll ignore the jQuery and iPhone check box parts.

Saturday March 31

Assignment

Thanks for forwarding the code John. I have a few ideas of things to try out over the week:

  • Assign the particles random colors.

  • Instead of falling, have the particles bounce around a bit.

  • Factor out a forEachParticle function so that instead of

      for (var i in particles) {
  	var part = particles[i];
  	// do stuff with part...
  }

    you just write

      forEachParticle(function(part) {
  	// do stuff with part...
  });

  • Assign particles random shapes (triangle, pentagon, weird curves with gradient fills)

  • Get the particles to interact with each other. The trick is to make how a particle changes in updateParticles depend on other particles:

      function updateParticles() {
  	forEachParticle(function(part) {
  		// Update part in the normal way.
  		part.y += part.speed;
  		part.x = Math.sin(part.y / 5) * 10 + 200;
  		
  		forEachParticle(function(otherPart) {
  			// You need to define `isCloseTo`.
  			if (isCloseTo(part, otherPart)) {
  				// You need to define `updateInResponseTo`.
  				updateInResponseTo(part, otherPart);
  			}
  		});
  	});
  }

    For lots of games, the behavior of updateInResponseTo basically defines the rules.

Feel free to email me or find me on Skype (username wtaysom) for more hints.

Topics

Mouse events, keyboard events, libraries, parameter sliders.

Example

  • interaction.html shows mouse and keyboard events.
  • keys.html uses Keymaster to abstract away some keyboard handling.
  • parameters.html adds parameter sliders to the particles example. Try a sin-factor of 0.775.

Tools

  • DigitalColor Meter application to get a pixel level inspection of what's going on.
  • keymaster.js for nice keyboard handling.
  • Dragdealer JS is an awesome little slider.

Reference

Saturday April 7

Assignment

Using the concepts we've learned so far. Think of some good game ideas.

Game Design

  • Changing the shape of the player to get through a maze.
  • Something with balls merging and splitting.
  • Fighting game where defense actually matters.
  • Some sort of two player guitar hero.
  • Or a two player Plants verses Zombies.
  • Time travel exploration on a hex grid.
  • Levels/upgrades are good.
  • Mixed strategy required.

Tools

  • isHoldingKey.js for telling which keys are held.

Saturday April 21

Topics

Gathering resources, shooting bullets, and killing bad guys.

Game Design

  • Opponent chooses your wave. The better you do the more choices he gets to make your next wave harder, but your ship also levels up.
  • During a wave, doing well punishes your opponent. Conversely taking being harmed or doing poorly gives your opponent bonuses.

Wednesday May 2

Topics

Playback. How to represent state and transformation. Purity and functionality.

Intersection. It fails because we're checking negative properties instead of positive ones. Talk about logic and truth tables. Apply De Morgan's law.

Abstraction. Refactoring: when it does the right thing but does it in an ugly way, it's good to stop and fix it. Merge bullet code.

How to refactor:

  • Rarify behavior as data (travel).
  • Combine special cases together (bulletIsOutOfBounds).
  • Use parameters (resetBullet).

Tools

  • PMCRandom.js for random numbers.
  • JSON.parse and JSON.stringify for serialization.
  • localStorage for saving state in the browser.
  • game05-playback.js for playing back.

Assignment

  • Change intersection to require a real overlap.
  • Make diagonal movement speed the same speed as cardinal movement speed.
  • Measure cool downs in milliseconds.
  • Have hitting a bad guy lead to death.
  • Have bad guys shoot.
  • Increase difficulty.

Sunday May 6

  • Add powerups, score, and Game Over screen.

Tools

  • Improve replay to reinit state on each run. Add a little playback UI.

Wednesday May 16

  • Consolidate project files. Reorganize project files.
  • Add a boss who shoots missiles (game02).

Resources

Wednesday May 23

  • Separate concerns by factoring out a reject function that handles removing items from a list.
  • Factor out Bullets class and Projectiles superclass.
  • Factor out Missiles class using Projectiles superclass.

Assignment

  • Factor out Aggregate superclass of Projectiles, badGuys, and powerups.

Fun For Later