Get hands-on JavaScript game development by building Tetris, covering graphics, game loops, and collision detection, resulting in a fully functional game.

Zero to Hero in JavaScript

This module will provide us hands-on game development experience with JavaScript. We’ll cover concepts like graphics, game loops, and collision detection by using the class game of Tetris. By the end of this module, we’ll have a fully functioning game with points and levels to add to our portfolio.

Creating Tetris with JavaScript

## Constructor functions

We often need to create many objects of the same kind, like users or cars. In object-oriented languages, a class is often used for this purpose.
JavaScript, being a prototype-based language, has something called **constructor functions**.

```js
// ES5 constructor function
function Car(brand) {
    this.brand = brand;
}

// Adding a method to the prototype
Car.prototype.getBrand = function() {
    return this.brand;
}
```

Classes, introduced with ES6, provide "syntactical sugar," which is comparable to inheritance in object-oriented languages. Classes are special functions meant to mimic the `class` keyword from these other languages.

## Defining a class

To define a class, we use the `class` keyword followed by the name of the class. The body of a class is the part that is enclosed in curly braces `{}`:

```js
class Car {
  // Body of the class
}
```

The code above defines a class named Car. This syntax is named **class declaration**.

The `new` operator instantiates the class:

```js
const myCar = new Car();
```

This is how we create a new object, an **instance**, of the Car class.

```js
console.log(typeof Car); // -> function
```

As you can see, a class is a kind of function in JavaScript.

We don't need to give the class a name. By using a **class expression**, you can assign the class to a variable:

```js
const Car = class {} // unnamed
const Car = class Car {} // named
```

*Class expressions* can be named or unnamed. The name given to a named class expression is local to the class's body.

## Hoisting

An important difference between function declarations and class declarations is that the function declarations are **hoisted**, whereas the class declarations are not. Therefore, you need to first declare the class before you can initialize objects with the `new` keyword.

> "Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not what happens. Instead, the variable and function declarations are put into memory during the compile phase but stay exactly where you typed them in your code." -- MDN

As you might remember, variables declared with `var` are also *hoisted*. Keeping with the "modern" way, it makes then sense that *classes*, just like variables declared with `let` or `const`, are not *hoisted*. 

## Initialization

Classes in JavaScript have a special method called **constructor** that lets us set initial values for fields when the object is initialized. There can be only one *constructor method*.

Let's create a Car class with a constructor that sets the initial value of the field `brand`:

```js
class Car { 
  constructor(brand) {
    this.brand = brand;    
  } 
}
```

The expression `this.brand = brand` creates a **public field** `brand` and assigns it an initial value. 
We can now create a new car object and access its brand property:

```js
const car = new Car('Volvo');

console.log(car.brand); // -> Volvo
```

As you can see, we can now access the `brand` field using a **property accessor**. There’s no restriction to access the public fields. You can read and modify the values of public fields inside the constructor and methods and outside of the class.

> The bodies of class declarations and class expressions are executed in [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode).

## Methods

Classes provide a cleaner and more elegant syntax for adding methods.

```js
class Car { 
  constructor(brand) {
    this.brand = brand;
  } 

  getBrand() {
    return this.brand;
  }
}
```

The `this` keyword allows us to access instance data inside the constructor and methods.

```js
const car = new Car('Tesla');
console.log(car.getBrand()); // -> Tesla
```

The method invocation `car.getBrand()` executes the methods inside the Car class and returns the brand property.

### Static methods

We can also assign a method to the class function itself, not to its *prototype*. Such methods are called **static** methods and they are prepended with the `static` keyword:

```js
class Double {
  static double(n) {
    return n * 2;
  }
}

Double.double(2); // -> 4
```

We don't have to create an instance of the class but can call the method directly on the class itself. Static methods are often used in utility classes for making computations.

### Getters and setters

JavaScript classes can have getter and setter functions. 

```js
class Car { 
  constructor(brand) {
    this._brand = brand;
  } 

  get brand() {
    return this._brand;
  }

  set brand(value) {
    this._brand = value;
  }
}
```

Notice that if you run `this.brand = value` in the setter we would be calling the setter again and go into an infinite loop. Using an underscore `_` is a common convention.

With this, we can create an instance of the class and access the brand property through the setter and getter:

```js
const car = new Car('');
car.brand = 'Tesla';
console.log(car.brand); // -> Tesla
```

## Inheritance

Class inheritance is a way to inherit the functionality of another class and extend it. We create a child class with the `extends` keyword.

```
class SportsCar extends Car {
  isFast() {
    return true;
  }
}
```

Now, we can use the functionality of the class we extended:

```js
const car = new SportsCar('Mazda');
console.log(car.brand); // -> Mazda
console.log(car.isFast()); // -> true
```

You can see here that we didn't have to create a constructor. If a class extends to another class and has no constructor, the following constructor is generated:

```
constructor(...args) {
  super(...args);
}
```

The `super` keyword is used to call corresponding methods of the parent class. So, the constructor calls the parent constructor passing all the arguments. If we want to add another in-parameter to our class, we can create a constructor:

```js
class SportsCar extends Car {
  constructor(brand, model) {
    super(brand);
    this.model = model;
  }
}

const myCar = new SportsCar("Mazda", "MX-5");
```

Note that constructors in inheriting classes must call `super()` before using `this`.

## Conclusion

* Use classes when you need to create **multiple objects** of the same kind.
 
* Classes are a special kind of function that runs in **strict mode** and is **not hoisted**.

* Classes can have fields and methods that we can access from a class instance.

* We can inherit functionality from other classes by **extending** them.

---

## Quiz on classes


# Constructor functions

We often need to create many objects of the same kind, like users or cars. In object-oriented languages, a class is often used for this purpose.
JavaScript, being a prototype-based language, has something called **constructor functions**.

```js
// ES5 constructor function
function Car(brand) {
    this.brand = brand;
}

// Adding a method to the prototype
Car.prototype.getBrand = function() {
    return this.brand;
}
```

Classes, introduced with ES6, provide "syntactical sugar," which is comparable to inheritance in object-oriented languages. Classes are special functions meant to mimic the `class` keyword from these other languages.

# Defining a class

To define a class, we use the `class` keyword followed by the name of the class. The body of a class is the part that is enclosed in curly braces `{}`:

```js
class Car {
  // Body of the class
}
```

The code above defines a class named Car. This syntax is named **class declaration**.

The `new` operator instantiates the class:

```js
const myCar = new Car();
```

This is how we create a new object, an **instance**, of the Car class.

```js
console.log(typeof Car); // -> function
```

As you can see, a class is a kind of function in JavaScript.

We don't need to give the class a name. By using a **class expression**, you can assign the class to a variable:

```js
const Car = class {} // unnamed
const Car = class Car {} // named
```

*Class expressions* can be named or unnamed. The name given to a named class expression is local to the class's body.

# Hoisting

An important difference between function declarations and class declarations is that the function declarations are **hoisted**, whereas the class declarations are not. Therefore, you need to first declare the class before you can initialize objects with the `new` keyword.

> "Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not what happens. Instead, the variable and function declarations are put into memory during the compile phase but stay exactly where you typed them in your code." -- MDN

As you might remember, variables declared with `var` are also *hoisted*. Keeping with the "modern" way, it makes then sense that *classes*, just like variables declared with `let` or `const`, are not *hoisted*. 

# Initialization

Classes in JavaScript have a special method called **constructor** that lets us set initial values for fields when the object is initialized. There can be only one *constructor method*.

Let's create a Car class with a constructor that sets the initial value of the field `brand`:

```js
class Car { 
  constructor(brand) {
    this.brand = brand;    
  } 
}
```

The expression `this.brand = brand` creates a **public field** `brand` and assigns it an initial value. 
We can now create a new car object and access its brand property:

```js
const car = new Car('Volvo');

console.log(car.brand); // -> Volvo
```

As you can see, we can now access the `brand` field using a **property accessor**. There’s no restriction to access the public fields. You can read and modify the values of public fields inside the constructor and methods and outside of the class.

> The bodies of class declarations and class expressions are executed in [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode).

# Methods

Classes provide a cleaner and more elegant syntax for adding methods.

```js
class Car { 
  constructor(brand) {
    this.brand = brand;
  } 

  getBrand() {
    return this.brand;
  }
}
```

The `this` keyword allows us to access instance data inside the constructor and methods.

```js
const car = new Car('Tesla');
console.log(car.getBrand()); // -> Tesla
```

The method invocation `car.getBrand()` executes the methods inside the Car class and returns the brand property.

## Static methods

We can also assign a method to the class function itself, not to its *prototype*. Such methods are called **static** methods and they are prepended with the `static` keyword:

```js
class Double {
  static double(n) {
    return n * 2;
  }
}

Double.double(2); // -> 4
```

We don't have to create an instance of the class but can call the method directly on the class itself. Static methods are often used in utility classes for making computations.

## Getters and setters

JavaScript classes can have getter and setter functions. 

```js
class Car { 
  constructor(brand) {
    this._brand = brand;
  } 

  get brand() {
    return this._brand;
  }

  set brand(value) {
    this._brand = value;
  }
}
```

Notice that if you run `this.brand = value` in the setter we would be calling the setter again and go into an infinite loop. Using an underscore `_` is a common convention.

With this, we can create an instance of the class and access the brand property through the setter and getter:

```js
const car = new Car('');
car.brand = 'Tesla';
console.log(car.brand); // -> Tesla
```

# Inheritance

Class inheritance is a way to inherit the functionality of another class and extend it. We create a child class with the `extends` keyword.

```
class SportsCar extends Car {
  isFast() {
    return true;
  }
}
```

Now, we can use the functionality of the class we extended:

```js
const car = new SportsCar('Mazda');
console.log(car.brand); // -> Mazda
console.log(car.isFast()); // -> true
```

You can see here that we didn't have to create a constructor. If a class extends to another class and has no constructor, the following constructor is generated:

```
constructor(...args) {
  super(...args);
}
```

The `super` keyword is used to call corresponding methods of the parent class. So, the constructor calls the parent constructor passing all the arguments. If we want to add another in-parameter to our class, we can create a constructor:

```js
class SportsCar extends Car {
  constructor(brand, model) {
    super(brand);
    this.model = model;
  }
}

const myCar = new SportsCar("Mazda", "MX-5");
```

Note that constructors in inheriting classes must call `super()` before using `this`.

# Conclusion

* Use classes when you need to create **multiple objects** of the same kind.
 
* Classes are a special kind of function that runs in **strict mode** and is **not hoisted**.

* Classes can have fields and methods that we can access from a class instance.

* We can inherit functionality from other classes by **extending** them.

---

# Quiz on classes


In this lesson, you will learn how JavaScript classes improve the language.

Modern JavaScript

Getting Started With Tetris

Moving Pieces

Game Logic

Gamification

Asynchronous JavaScript

Conclusion

Constructor functions

Defining a class