Codecademy Practice

Space invaders

This challenge is about watching a live coding session and following along, writing the code as you watch. Pause the video when you need, replay as many times as you need, reduce the speed, try things in the console, go and read documentation if you come accross something you’ve never seen before.

In summary, use this exercise to practice, but also to learn new things.

The video shows the amazing Mary Rose Cook, ex-Recourse Center mentor and ex-Makers teacher (among other things). She has made programming environments, compilers, video games, and a version of Git in JavaScript.

When I made my first game, I was scared of writing graphics code and dealing with browser quirks and player input events. So, I used a game framework to handle that stuff for me. Later, I discovered that stuff is not so scary. I will live-code an action game from scratch without using any libraries. We will cover keyboard input, graphics, collision detection and sound.

Enjoy and have fun coding!

Step by step instructions

This video is showing the ES5 way of creating classes. You can follow along with the ES5 syntax or translate to the new ES6 syntax as you go. Up to you!

The ES5 syntax is still in use and will probably be for a long time. Also, it is supported by all browsers, while ES6 syntax is not. However is good for you to practice the ES6 syntax too. My recommendation would be to follow along with the ES5 syntax, then translate to the ES6 syntax when your game is finished.

The ES5 syntax shows that modern JavaScript classes are internally just functions. The ES6 syntax introduces the reserved word class, but that is just syntactic sugar. Behind the scenes, class is just creating a function. The class declaration was introduced to make JavaScript look more like other programming languages.

These are the main differences between classes in ES5 vs ES6:

ES5 ES6
Constructor 

let Bullet = function(center, velocity) {
  this.center = center;
  this.velocity = velocity;
  this.size = { x: 3, y: 3 };
};
        

class Bullet {
  constructor(center, velocity)  {
    this._center = center;
    this._velocity = velocity;
    this._size = { x: 3, y: 3 };
  }
}
Instance methods 

Bullet.prototype = {
  update: function() {
    this._center.x += this._velocity.x;
    this._center.y += this._velocity.y;
  },

  draw: function() {
    this._screen.fillStyle = '#00c4fe';
    this._screen.fillRect(
      this._center.x - this._size.x/ 2,
      this._center.y - this._size.y/ 2,
    );
  }
};
          

class Bullet {
  update() {
    this._center.x += this._velocity.x;
    this._center.y += this._velocity.y;
  }

  draw() {
    this._screen.fillStyle = '#00c4fe';
    this._screen.fillRect(
      this._center.x - this._size.x/2,
      this._center.y - this._size.y/2,
    );
  }
}
Static methods 

Invader.createInvaders = function() {
  // your code here
};
        

class Invaders {
  // ...
  static createInvaders() {
    // your code here
  }
}