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

Applications written for HTML5 `Canvas` offer no special features to handle user input. Essentially, HTML user input involves using the event-handling system built into browsers.

# Keyboard events

We are using the arrow keys to move and rotate the pieces. For this to work, we need to listen for and handle keyboard events. We can listen for the *keydown*, *keyup*, or *keypress* events at the document level. Let's add an event listener for the `keydown` event to our document with the `addEventListener()` method:

```js
document.addEventListener('keydown', event => {
  // Handle event
});
```

When we are done, we can't forget to remove the event listener with the `removeEventListener()` method. Otherwise, we might add multiple listeners and start moving at warp speed.

# Enums

Next, we map the *keycodes* to names we can understand in `constants.js`. For this, it would be nice to have an enum.

> Enum (enumeration) is a special type used to define collections of constants.

There are no built-in enums in JavaScript, so let’s make one by creating an object with the values:

```js
// constants.js
const KEY = {  
  LEFT: 37,
  UP: 38,
  RIGHT: 39,  
  DOWN: 40  
}

Object.freeze(KEY);
```

const can be a bit misleading when working with objects and arrays, and it does not actually make them *immutable*. To achieve this, we can use [Object.freeze()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze). Here are a couple of gotchas to look out for:

*   For this to work properly, we need to use [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode). 
*   This only works one level down. In other words, if we have an array or object inside our object, this will not freeze them. 

# Move pieces

Now that we have the keyboard event registered and the keys mapped, we can start working on the logic of what will happen when we press different keys.

We can start by adding a `move()` method to the piece class. It takes a piece `p` as input and updates the `x` or `y` variable of the current piece to change its position on the board:

```js
// piece.js
move(p) {  
  this.x = p.x;  
  this.y = p.y;
}
```

This is simple enough, but now we need to calculate the input to the method. There are many ways of doing this, but keeping the code modern, we will use some new JavaScript features.

# Calculate the new position

To begin, we need to calculate the new position of piece depending on which key we press:

- **left**: we move `p.x - 1`
- **right**: we move `p.x + 1`
- **down**: we move `p.y - 1`

To get the new state from the changed coordinates, we can use the **spread operator**:

```
(p) => ({ ...p, x: p.x - 1 })
```

This arrow function *spreads* the old coordinates to a new object. At the same time, it changes the `x` coordinate to return the new position.

# Object literal lookups
We can use an object for lookup purposes to match keycodes to expressions and get values from object properties..

We can create a lookup object to match the key codes to the state-changing functions. This allows us to send the keycode and current piece to the object and return the piece with the new coordinates.

```js
Piece moves[keyCode](piece)
```

Because we are mapping the key codes in our enum, we need to calculate them when we do our lookup. This is our next challenge.

Luckily, ES6 allows property keys of object literals to use expressions, making them **computed property keys**. So, the property key looks like this:

```js
[KEY.LEFT]: expression
```

With all in place, we can finally code our lookup object:

```js
// main.js
const moves = {
  [KEY.LEFT]:  (p) => ({ ...p, x: p.x - 1 }),  
  [KEY.RIGHT]: (p) => ({ ...p, x: p.x + 1 }),  
  [KEY.DOWN]:  (p) => ({ ...p, y: p.y + 1 })  
};
```

To use this object literal, we match the keycode and send in the current piece:

```js
let newPosition = moves[keyCode](oldPosition);
```

Then, we get a new position!

# Prevent browser behaviors

In a computer game, you don't want default browser behaviors interfering with your actions. For instance, you don't want a press of an arrow key to move the page up and down.

In all event handlers, add a `preventDefault()` line and `return false` from the function to prevent both the default action and event bubbling from occurring.

In this lesson, you will learn techniques for handling user interaction in HTML Canvas-based games.

Course Overview

Modern JavaScript

Getting Started With Tetris

Moving Pieces

Game Logic

Gamification

Asynchronous JavaScript

Final Words

User Interaction

Keyboard events