Gain insights into game development with JavaScript. Delve into graphics, game loops, and collision detection by creating Tetris. Showcase your skills with a fully functioning game.

In this course, you will get hands-on game development experience with JavaScript. Using the classic game of Tetris, you are going to cover concepts like graphics, game loops, and collision detection. 

By the end of this course, we will have a fully functioning game with points and levels. Try it out with your friends and put it in your portfolio for employers to see.

Game Development with JavaScript: Creating Tetris

Introduced in 2015 with ECMAScript6, **template literals** let us dynamically construct strings of text, **embedded expressions**, and even **multi-line** strings of text in a more elegant way than concatenation.

At first glance, the syntax is not much different from the old one:

```js
const newWay = `is cool`;
```

Can you spot the difference? Instead of single `''` or double `""` quotes, we use backticks ` `` `.

# String interpolation

In ES5, you had **string concatenation**:

```js
const name = 'Jack';
const old = 'My name is ' + name + '.';
```

Using `+` for both addition and concatenation can be confusing and even lead to unexpected bugs:

```js
var a = 4;
var b = 2;
console.log('a + b = ' + a + b);
// -> a + b = 42
```

Template literals provide an easy way to interpolate variables and expressions into strings. The curly braces accept any valid JavaScript expression inside the `${}`:

```js
const name = 'Jack';
const str = `My name is ${name}.`;
console.log(str);
// -> My name is Jack.

const a = 4;
const b = 2;
console.log(`a + b = ${a + b}`);
// -> a + b = 6
```

---

# Multiline

To write multi-line strings in ES5, you had to use the newline character `\n`  explicitly for line breaks and the `\` character at the end of a line. This allows us to create a string on two lines:

```
const concatenation = 'First line\n \
second line';
```

Template literals make multi-line strings simpler. Once a template literal is opened with the *backtick*, you press enter to create a new line with no special characters, and it’s rendered as-is:

```
const interpolation = `This
is more fun!

We can add expressions!
a + b = ${a + b}`
```

---

# Tagged templates

A not as known feature that accompanies template literals is the ability to **tag** them. A **tagged template** is a function that allows you to parse *template literals*, which allows us to control the string creation.

The way the *tag template* works is that you put the name of the function that you want to run against the string before the template. So, instead of `function()`, you have `function``.`

```
function hi() {
  return 'TODO';
}

const name = 'Jack';
const tag = hi`My name is ${name}.`;
console.log(tag);
// -> 'TODO'
```

The tag template is equivalent to the following function call:

```
hi(['My name is ', '.'], name);
```

First, we get an array of all the string pieces from our literal. After that, we get all the interpolated values. Here, we only have one, the `name`.

Then, we need to change our function to accept these arguments and return the string as we like it:

```js
function hi(strings, name) {
  return `Hello ${name}!`;
}

const name = 'Jack';
const tag = hi`My name is ${name}.`
console.log(tag);
// -> 'Hello Jack!'
```

In this case, we are ignoring the strings sent in and just making up our own. 

You can also alter the strings depending on the arguments; this is where the true power of tagged templates comes through. 
Popular libraries like `styled-components` and `lit-html` use tagged components.

# Conclusion

In this lesson, we learned how template literals make strings easier to handle by taking care of our variables and embedded expressions with ease. This is much more powerful than the old concatenation of strings and variables. We also took a look into tagged templates and how they can let us manipulate template literals before the browser exposes them to the world.

---

# Quiz on template literals



Introduced in 2015 with ECMAScript6, **template literals** let us dynamically construct strings of text, **embedded expressions**, and even **multi-line** strings of text in a more elegant way than concatenation.

At first glance, the syntax is not much different from the old one:

```js
const newWay = `is cool`;
```

Can you spot the difference? Instead of single `''` or double `""` quotes, we use backticks ` `` `.

# String interpolation

In ES5, you had **string concatenation**:

```js
const name = 'Jack';
const old = 'My name is ' + name + '.';
```

Using `+` for both addition and concatenation can be confusing and even lead to unexpected bugs:

```js
var a = 4;
var b = 2;
console.log('a + b = ' + a + b);
// -> a + b = 42
```

Template literals provide an easy way to interpolate variables and expressions into strings. The curly braces accept any valid JavaScript expression inside the `＄{}`:

```js
const name = 'Jack';
const str = `My name is ＄{name}.`;
console.log(str);
// -> My name is Jack.

const a = 4;
const b = 2;
console.log(`a + b = ＄{a + b}`);
// -> a + b = 6
```

---

# Multiline

To write multi-line strings in ES5, you had to use the newline character `\n`  explicitly for line breaks and the `\` character at the end of a line. This allows us to create a string on two lines:

```
const concatenation = 'First line\n \
second line';
```

Template literals make multi-line strings simpler. Once a template literal is opened with the *backtick*, you press enter to create a new line with no special characters, and it’s rendered as-is:

```
const interpolation = `This
is more fun!

We can add expressions!
a + b = ${a + b}`
```

---

# Tagged templates

A not as known feature that accompanies template literals is the ability to **tag** them. A **tagged template** is a function that allows you to parse *template literals*, which allows us to control the string creation.

The way the *tag template* works is that you put the name of the function that you want to run against the string before the template. So, instead of `function()`, you have `function``.`

```
function hi() {
  return 'TODO';
}

const name = 'Jack';
const tag = hi`My name is ＄{name}.`;
console.log(tag);
// -> 'TODO'
```

The tag template is equivalent to the following function call:

```
hi(['My name is ', '.'], name);
```

First, we get an array of all the string pieces from our literal. After that, we get all the interpolated values. Here, we only have one, the `name`.

Then, we need to change our function to accept these arguments and return the string as we like it:

```js
function hi(strings, name) {
  return `Hello ＄{name}!`;
}

const name = 'Jack';
const tag = hi`My name is ＄{name}.`
console.log(tag);
// -> 'Hello Jack!'
```

In this case, we are ignoring the strings sent in and just making up our own. 

You can also alter the strings depending on the arguments; this is where the true power of tagged templates comes through. 
Popular libraries like `styled-components` and `lit-html` use tagged components.

# Conclusion

In this lesson, we learned how template literals make strings easier to handle by taking care of our variables and embedded expressions with ease. This is much more powerful than the old concatenation of strings and variables. We also took a look into tagged templates and how they can let us manipulate template literals before the browser exposes them to the world.

---

# Quiz on template literals



In this lesson, we will discuss how to use template literals to improve string handling.

Course Overview

Modern JavaScript

Getting Started With Tetris

Moving Pieces

Game Logic

Gamification

Asynchronous JavaScript

Final Words

Template Literals

String interpolation