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

**Async functions and the await keyword**, new additions in ECMAScript 2017, act as syntactic sugar on top of promises. They allow us to write synchronous-looking code while performing asynchronous tasks behind the scenes.

## Async

First, we have the `async` keyword. We put it in front of a function declaration to turn it into an *async function*.

```js
async function getData(url) {}
```

Invoking the function now returns a **promise**. This is one of the traits of async functions; their return values are converted to promises.

*Async functions* enable us to write promise-based code as if it were synchronous, without blocking the execution thread and instead operating asynchronously.

However, `async` alone does not make the magic happen. The next step is to use the `await` keyword inside the function.

## Await

The real advantage of *async functions* becomes apparent when you combine them with the `await` keyword. 
Await can only be used inside an async block, where it makes JavaScript wait until a promise returns a result.

```
let value = await promise
```

The `await` keyword makes JavaScript pause at that line until the promise settles and returns its result, and then it resumes code execution.

It’s a more elegant syntax of getting the result from a promise than `promise.then()`.

## Fetch

`fetch()` allows us to make network requests similar to `XMLHttpRequest` (XHR). The main difference is that the **Fetch API** uses promises, which enables a simpler and cleaner API, avoiding callbacks. 

The simplest use of `fetch()` takes one argument — the path to the resource — and returns a promise containing the response.

```js
async getData(url) {
  const data = await fetch(url);
  return data;
}
```

In our code, we wait for `fetch()` to return with the data before we return it from the function.

Now, we have our function ready. Remember, since it returns a promise, we need to use `then()` to get hold of the value.

```js
getData(url).then((data) => console.log(data));
```

Otherwise, we can even write this shorthand:

```
getData(url).then(console.log);
```

Now, we have all the basics of expected behavior figured out, but what if something unexpected happens?

## Error handling

If `await promise` is rejected, it throws the error, just as if there were a `throw` statement at that line. We can catch that error using `try/catch`; this is the same way we catch an error in regular code.


```js
async getData(url) {
  try {
    const data = await fetch(url);
    return data;
  } catch(error) {
    // Handle error
  }
}
```

If we don’t have the `try/catch`, the promise generated by calling the async function becomes rejected. We can append `.catch()` to handle this:

```js
getData(url).catch(alert);
```

If we don't add a `.catch()`, we get an unhandled promise error. We can catch such errors using a global error handler.

## Conclusion

The `async` keyword is added to functions to tell them to return a promise rather than directly returning the value.

The `await` keyword can only be used inside an async block, where it makes JavaScript wait until a promise returns a result.

With `fetch()`, we can make network requests that return promises.

Next, let's see how we can use what we have discussed to save our high scores asynchronously.

---

## Quiz on async and await

**Async functions and the await keyword**, new additions in ECMAScript 2017, act as syntactic sugar on top of promises. They allow us to write synchronous-looking code while performing asynchronous tasks behind the scenes.

# Async

First, we have the `async` keyword. We put it in front of a function declaration to turn it into an *async function*.

```js
async function getData(url) {}
```

Invoking the function now returns a **promise**. This is one of the traits of async functions; their return values are converted to promises.

*Async functions* enable us to write promise-based code as if it were synchronous, without blocking the execution thread and instead operating asynchronously.

However, `async` alone does not make the magic happen. The next step is to use the `await` keyword inside the function.

# Await

The real advantage of *async functions* becomes apparent when you combine them with the `await` keyword. 
Await can only be used inside an async block, where it makes JavaScript wait until a promise returns a result.

```
let value = await promise
```

The `await` keyword makes JavaScript pause at that line until the promise settles and returns its result, and then it resumes code execution.

It’s a more elegant syntax of getting the result from a promise than `promise.then()`.

# Fetch

`fetch()` allows us to make network requests similar to `XMLHttpRequest` (XHR). The main difference is that the **Fetch API** uses promises, which enables a simpler and cleaner API, avoiding callbacks. 

The simplest use of `fetch()` takes one argument — the path to the resource — and returns a promise containing the response.

```js
async getData(url) {
  const data = await fetch(url);
  return data;
}
```

In our code, we wait for `fetch()` to return with the data before we return it from the function.

Now, we have our function ready. Remember, since it returns a promise, we need to use `then()` to get hold of the value.

```js
getData(url).then((data) => console.log(data));
```

Otherwise, we can even write this shorthand:

```
getData(url).then(console.log);
```

Now, we have all the basics of expected behavior figured out, but what if something unexpected happens?

# Error handling

If `await promise` is rejected, it throws the error, just as if there were a `throw` statement at that line. We can catch that error using `try/catch`; this is the same way we catch an error in regular code.


```js
async getData(url) {
  try {
    const data = await fetch(url);
    return data;
  } catch(error) {
    // Handle error
  }
}
```

If we don’t have the `try/catch`, the promise generated by calling the async function becomes rejected. We can append `.catch()` to handle this:

```js
getData(url).catch(alert);
```

If we don't add a `.catch()`, we get an unhandled promise error. We can catch such errors using a global error handler.

# Conclusion

The `async` keyword is added to functions to tell them to return a promise rather than directly returning the value.

The `await` keyword can only be used inside an async block, where it makes JavaScript wait until a promise returns a result.

With `fetch()`, we can make network requests that return promises.

Next, let's see how we can use what we have discussed to save our high scores asynchronously.

---

# Quiz on async and await

In this lesson, you will discover how async and await, the latest additions to asynchronous JavaScript, build on top of promises.

Course Overview

Modern JavaScript

Getting Started With Tetris

Moving Pieces

Game Logic

Gamification

Asynchronous JavaScript

Final Words

Async and Await

Async