Notes

1If you’re fabulously wealthy, a brilliant machinist, and don’t care for the laws of physics.↩

\n\n

2(Okay, maybe some nerds here are scoped to Marvel Comics. I won’t judge.)↩

\n\n\n

",{"_200":201,"_43":44,"_47":48,"_45":46,"_65":66,"_202":203,"_235":198},"previewContent","

\n \n
- \n In Media Res\n
- \n 1: Drawing A circle\n
  - \n Installation\n
  - \n Creating your app\n
  - \n Displaying a box\n
  - \n Drawing a circle\n
  - \n Setup complete\n
  \n
- \n Training\n
- \n 2: Getting up to speed\n
  - \n Components\n
  - \n Handlebars\n
  - \n Canvas\n
  - \n Css\n
  - \n Canvas context and drawing\n
  - \n Let\n
  - \n didInsertElement\n
  - \n Functions\n
  - \n import/export\n
  - \n Feeling good yet?\n
  \n
- \n Control\n
- \n 3: Input\n
  - \n Steal This Code\n
  - \n Bringing it in\n
  - \n Mixins\n
  - \n Defining keyboard shortcuts\n
  - \n Hashes\n
  - \n Logging\n
  - \n Summary\n
  \n
- \n … And Much Much More\n
\n
\n Notes\n

In Media Res

\n\n

[Content Warnings: Religion, Violence, Geopolitics, Creative Punctuation. Feel free to read just the instructional chapters if these things are gonna piss you off (or if you’re at work)]

\n\n

You’re running through the jungle.

\n\n

The why seems distant now, lost in the many dark mazes you’ve made. All you feel now is the whip of branches in your face, the crunch of twigs underfoot, and the chop chop chop of an approaching helicopter.

\n\n

The helicopter suddenly comes into view. It’s close. And there’s a guy sitting there with a machine gun. “I’ve finally got you!” he yells. He starts firing, and trees splinter and fall under the spray of bullets.

\n\n

One of those trees falls on you. Trapped. You’re trapped. The helicopter is coming closer. He wants to see your face as you die.

\n\n

But then a rocket bursts onto the helicopter, and it’s in flames. Your pursuer leaps away from what is soon to be flaming rubble. He lands close to you, so close that you can hear the sickening crunch of his bones snapping. His power pellet had run out.

\n\n

He still turns towards you, using his arms to drag his shattered body closer. His face strains with effort, pain, hate, but in it you see something familiar.

\n\n

He collapses, out of breath, and it becomes clearer.

\n\n

My god, it’s him.

\n\n

It’s him.

\n\n

He looks at you and sees the same thing. The rage drains from his face. Now… now it’s just pain.

\n\n

Just memory.

\n\n

“I’ll never forget,” he says. “I’ll never forget the caves.”

\n\n

And suddenly you’re back there with him. Those dark caves, those blackened rooms, with only the pellets and the chase.

\n\n

The constant fear.

\n\n

They’re abstractions now, but back then they were very real.

\n\n

“I don’t know why you turned,” he says. “I guess I’ll never know.”

\n\n

You start to explain, start to make excuses, but the words don’t come. An untrained man would be crying, but you are not untrained. Instead, you only say: “You will be blessed in heaven for what you have done.”

\n\n

“Is it too late for you?” he asks. “Can I see you there?”

\n\n

A bullet and he’s gone. The tree lifts off of you, and a hand extends, pulling you up.

\n\n

You should feel relieved.

\n\n

You’re safe.

\n\n

Your fellow Ghosts have arrived.

\n\n\n

1: Drawing A circle

\n\n

This chapter is much like the previous one- weird, filled with characters you don’t understand, and eventually coming back around to pac-man. The only difference is that in this chapter, we’ll be doing lots of code.

\n\n

It’s a version of In Media Res- a storytelling technique used to get people into the action quickly. You open in the middle of the story, during a really exciting scene, and then you later go back and build up the characters and relationships that made that scene possible.

\n\n

We’re going to use a similar technique for this chapter- we’re going to jump right into installing a bunch of tools and using some concepts you may not understand just yet. The upshot is that it’s going to let us start drawing circles (little prototype pac-men) on our canvas really quickly. From there we can take it slow.

\n\n

\n
A note about tools:
\n

\n\n

\n
We are going to be using lots of tools in this book- Javascript, Babel.js (a tool that lets us use the latest versions of Javascript before they’re in all the browsers), HTML5 Canvas, Ember.js, ember-cli, and more. Originally the book was going to be a book for pros focusing on just ES2015 and HTML5 Canvas, but I discovered that using more of these tools actually makes our job easier.
\n

\n\n

\n
The goal of this book isn’t to be a conclusive guide in any of these technologies- it’s to give you enough knowledge in the tool to get started, and then use that tool to accomplish our goal (build a bad-ass game of pac-man). However, at the end of the book you’ll be familiar with several really useful concepts- and if you decide to continue learning, I’ll provide several resources for each.
\n

\n\n

Installation

\n\n\n\n

The first step is to install Node. Go to https://nodejs.org/ and hit the big green “install” button. Do whatever your operating system makes you do to install things, and then you have node and npm on your system. Go to your command line, and then type in node -v. Then type in npm -v. If the commands worked and they gave you numbers, hurray! If not, please google for help. This isn’t a book about node and npm… they’re just tools we need to get started.

\n\n\n

Next, we’re going to install ember-cli. Type npm install -g ember-cli into the command line. And… that’s it. Type ember -v into your command line, and it should give you the ember-cli version (>= 2.3.0) and the node and npm versions.

\n\n

Creating your app

\n\n

ember new pac-man

\n\n

That command will create for you an ember app called pac-man. It’s going to spend a short amount of time creating a directory structure and some config files for you, and then a bit longer installing npm and bower packages.

\n\n

cd pac-man

\n\n

ember server

\n\n

These commands will move you into your app’s folder and then start the server. Go to localhost:4200 and you should see “Welcome to Ember.js”. If you do, then congratulations! You’ve created your first ember app.

\n\n

Displaying a box

\n\n

ember generate component pac-man

\n\n

Type that into the command line and you will get a new ember component called pac-man. ember-cli will generate the javascript file, template file, and test for a component.

\n\n

In app/templates/application.hbs, delete everything, replace with the component {{pac-man}}.

\n\n

This tells ember to display the component. From now on, everything will happen inside the component.

\n\n

1 <!-- in app/templates/components/pac-man.hbs -->\n2 <canvas id=\"myCanvas\" width=\"800\" height=\"600\"></canvas>\n

\n\n\n\n

This creates an html5 canvas that we can draw on.

\n\n

1 /*in app/styles/app.css*/\n2 #myCanvas {\n3   background-color: #EDC9AF;\n4 }\n

\n\n\n\n

This colors the canvas so we can see it. It’s a desert-sand light brown.

\n\n

If everything has gone correctly, at localhost:4200 you should see a rectangle the color of desert sand.

\n\n\n

\n\n\n

Drawing a circle

\n\n

 1 // in app/components/pac-man.js\n 2 import Ember from 'ember';\n 3 \n 4 export default Ember.Component.extend({\n 5   didInsertElement: function() {\n 6     this.drawCircle();\n 7   },\n 8 \n 9   drawCircle: function() {\n10     let canvas = document.getElementById(\"myCanvas\");\n11     let ctx = canvas.getContext(\"2d\");\n12     let x = 50;\n13     let y = 100;\n14     let radius = 20;\n15 \n16     ctx.fillStyle = '#000';\n17     ctx.beginPath();\n18     ctx.arc(x, y, radius, 0, Math.PI * 2, false);\n19     ctx.closePath();\n20     ctx.fill();\n21   },\n22 });\n

\n\n\n\n

didInsertElement runs whenever the component (the element) is loaded and put on the screen (more on this in the next chapter). In this case, we’re just calling the drawCircle function, which is defined right below.

\n\n

\n
Note for advanced Ember devs (everyone else ignore): using didInsertElement in this case will give a deprecation warning, but for now it’s the best option. Using init will give an error because we need the html to have already been rendered. Using didRender will plunge you into an infinite loop.
\n

\n\n

In the drawCircle function, we’re grabbing the canvas, telling it that we’ll be drawing in 2d, and then doing the incantations that tell canvas to draw a circle. You won’t have to worry about these specific incantations- this book will almost always hide shape-drawing code behind a function that you can just copy and paste without losing much.

\n\n\n

\n\n\n

Setup complete

\n\n

Thus concludes our in-media-res introduction. It’s expected that you won’t understand a lot of what just happened- it’s just meant to drop you into the world as quickly as possible. Some of the concepts introduced here will be given a lot more screen time later. Some of them were just necessary for setup and will never be brought up again.

\n\n

Now let the training begin.

\n\n

\n
Having trouble? Send me a question via email at jeffrey@emberscreencasts.com. I’ll send you a response, and create an FAQ with answers to the most common questions
\n

\n\n

\n
You can also check out the github repositories for each chapter’s code or the finished addon.
\n

\n\n\n

Training

\n\n

The desert stretches farther than you can see. Only the occasional dust eddy disrupts the monotony.

\n\n

“So this is the world outside.”

\n\n

Elder Matteo nods.

\n\n

“Is it all like this?”

\n\n

“Most of it. Still patches we haven’t gotten to yet.”

\n\n

“So it was different before…”

\n\n

“When I was a boy, we had lush jungles, quiet lakes… food… we didn’t need to mine pellets back then.”

\n\n

“How long has it been since you’ve seen this… food?”

\n\n

A light goes on in the elder’s eyes. “I saw a cherry last year. When visiting the neighboring bubble. It was beautiful…. but enough of an old man’s reminisces. If this bubble is to be fed, we need more PAC operators. Are you ready?”

\n\n

You turn your imagination away from what a cherry might be, and look at your PAC. Your Pellet Acquisition Capsule. You’ve been processing the pellets for years, but seeing a PAC up close for the first time is still an awe-inspiring experience. “Ready as I’ll ever be.”

\n\n

You get in to the yellow sphere and let the wires envelop you. Matteo closes the hatch.

\n\n

“Let’s get you acquainted with this contraption, alright?”

\n\n\n

2: Getting up to speed

\n\n

The last chapter threw you headlong into a large number of new technologies. I’m glad you made it out alright!

\n\n

This is the part of the book where we introduce a bunch of characters, but we don’t know much about them yet. Don’t worry, you will eventually! Remember what you can, and come back to this chapter if you need to.

\n\n

In this chapter we’re going to zero in on the pac-man component, going over different parts of the code until it’s (mostly) no longer mysterious.

\n\n

Components

\n\n

In app/compents/pac-man.js, you’ll see the following code:

\n\n

1 Ember.Component.extend({\n2   ...\n3 })\n

\n\n\n\n

This means that PacMan is an Ember Component- it inherits all the properties of an Ember Component, while adding its own. An Ember Component is basically a container that is sealed from the outside world, except for if you poke a few holes into it. Most real-world programs will need to poke a couple holes, but we’re not poking any holes right now, so all we need to care about is in app/components/pac-man.js and app/templates/components/pac-man.hbs (and style/app.css).

\n\n

As someone writing an intro book, this is incredibly convenient. You may have heard about the Ember Router and how revolutionary and vital it is… well, we’re going to write an entire game in Ember and never touch it. Same with Initializers, Controllers, Services, and innumerable other Ember features that are necessary in many apps but are also confusing to newcomers. We get to take advantage of the parts that are useful and leave the more confusing things for the second book.

\n\n

\n
If you want to learn more about components, here is a series of videos about them.
\n

\n\n

Of course, components don’t always consist of just a javascript file- they can have an associated handlebars (they can also consist of just a handlebars file, although that doesn’t happen in this tutorial).

\n\n

Handlebars

\n\n

A handlebars file is kind of like an html file, but you can do some limited programming in it. You can input variables, use if statements, and more (but not much more). Each template is associated with an Ember class, and that is where it gets the variables it uses.

\n\n

Later we’ll use more of these features, but for right now all we’re going to do is create the html5 Canvas (using just plain old html).

\n\n

1 <!-- in app/templates/components/pac-man.hbs -->\n2 <canvas id=\"myCanvas\" width=\"800\" height=\"600\"></canvas>\n

\n\n\n\n

Canvas

\n\n

Canvas is well named- it’s like a painter’s canvas. You can paint on it… then you can paint on it again, partially painting over what you had previously drawn. And then, just like a real painter’s canvas¹, you can create a bunch of robots that splatter paint over the canvas in precise intervals in order to create the illusion of motion.

\n\n

This canvas defaults to pure white, but we’ve decided to tan it up a little using css.

\n\n

Css

\n\n

app/styles/app.css is where we’re going to store the styling information. While css is a powerful tool, in this book we’re basically just going to use it to turn things pretty colors, so there’s no previous knowledge needed (and, likely, no knowledge to be gained). You can just copy and paste any css we present directly into app/styles/app.css.

\n\n

Here’s what you copy-pasted in the last chapter:

\n\n

1 #myCanvas {\n2   background-color: #EDC9AF;\n3 }\n

\n\n\n\n

It turns the canvas a nice tan color.

\n\n

\n
CSS means ‘Cascading Style Sheets’, and is way more important in a regular web app than it is in pac-man. If you’re interested in learning more, click here for some great introductory courses (subscription required).
\n

\n\n

Canvas context and drawing

\n\n

Of course, we don’t just want that tan color… we want a circle!

\n\n

That’s where the following code comes into play

\n\n

 1 let canvas = document.getElementById(\"myCanvas\");\n 2 let ctx = canvas.getContext(\"2d\");\n 3 \n 4 ...\n 5 \n 6 ctx.fillStyle = '#000';\n 7 ctx.beginPath();\n 8 ctx.arc(x, y, radius, 0, Math.PI * 2, false);\n 9 ctx.closePath();\n10 ctx.fill();\n

\n\n\n\n

The first line grabs the canvas, then the second line gets the 2d context, which we’ll call ctx for short.

\n\n

The last five lines are drawing the circle onto the 2d context of the canvas. You don’t need to understand them. But you do need to know what let is.

\n\n

Let

\n\n

let is extremely well named. Take this example:

\n\n

1 let chapterNumber = 2;\n

\n\n\n\n

Read it out loud: ‘Let chapterNumber equal two’. That’s pretty much what it does. chapterNumber is now a variable equal to two. Another way to think of this is “assigning values to variables”, where 2 is the value and chapterNumber is the variable.

\n\n

If you’ve programmed in javascript before, you’ll know about var. let is similar, but has slightly different scoping properties, which are generally less confusing. If you haven’t programmed in javascript before, you can safely ignore that last sentence.

\n\n

So right before we draw our circle we have a bunch of let statements, and then we use those variables in the drawing.

\n\n

1 let x = 50;\n2 let y = 100;\n3 let radius = 20;\n4 ctx.arc(x, y, radius, 0, Math.PI * 2, false);\n

\n\n\n\n

is equivalent to

\n\n

1 ctx.arc(50, 100, 20, 0, Math.PI * 2, false);\n

\n\n\n\n

We name the variables because it’s easier to read. We may also want to extract them later (say, next chapter).

\n\n

\n
let is a feature of ES2015 which isn’t supported in all browsers… why are we using it? Because we’re using Babel, an ES2015+ transpiler. That means Babel takes your code that’s written to the ES2015 (or ES2016, ES2017, etc.) and turns it into code that (almost) all browsers can read (sorry, IE7 users).
\n

\n\n

\n
“But wait,” you ask, “how do I install Babel?”
\n

\n\n

\n
It’s already installed. You started using it the moment you generated the project. This is (part of the) magic of ember-cli.
\n

\n\n

didInsertElement

\n\n

didInsertElement is your way of telling the Ember component “hey, after you’re done putting this component on the screen, I want you to do this.”

\n\n

“Putting this component on the screen” usually means “displaying whatever is in the handlebars file”. In this case, the HTML5 Canvas.

\n\n

Here’s our full code:

\n\n

1 didInsertElement: function() {\n2   this.drawCircle();\n3 },\n

\n\n\n\n

So what it’s saying is “whenever you’re done putting this component on the screen, draw a circle”.

\n\n

You may be wondering what’s up with all the function() and the curly braces {} mean… well, those are parts of defining and using functions.

\n\n

Functions

\n\n

Functions are a great way to reuse code. We define it once, and then we never have to write that code again.

\n\n

Here is us drawing a circle:

\n\n

1 this.drawCircle();\n

\n\n\n\n

Here is us drawing two circles:

\n\n

1 this.drawCircle();\n2 this.drawCircle();\n

\n\n\n\n

It’s easy, because we defined the drawCircle function. We’ll get into the funny marks later.

\n\n

Here’s the basic format of defining a function:

\n\n

1 functionName: function() {\n2   ...\n3 }\n

\n\n\n\n

\n
There’s another slightly better way of defining functions that’s new in ES2015. We’re going to wait to introduce that technique, because introducing it now would make introducing hashes in the next chapter more confusing.
\n

\n\n

Here is us defining the drawCircle function:

\n\n

 1 drawCircle: function() {\n 2   let canvas = document.getElementById(\"myCanvas\");\n 3   let ctx = canvas.getContext(\"2d\");\n 4   let x = 50;\n 5   let y = 100;\n 6   let radius = 20;\n 7 \n 8   ctx.fillStyle = '#000';\n 9   ctx.beginPath();\n10   ctx.arc(x, y, radius, 0, Math.PI * 2, false);\n11   ctx.closePath();\n12   ctx.fill();\n13 },\n

\n\n\n\n

Everything in between { and } gets run when we call drawCircle.

\n\n

We’re defining the drawCircle function on the component. One way to think of it is to say that the component now knows how to draw a circle. Another more fancy way to think of it is ‘the function drawCircle is assigned to the component scope’.

\n\n

\n
Scope can be a scary word, but here’s a basic way to think about it. If you’re in your living room, and you say “I would like to sit on the couch”, you don’t have to specify which of the millions of couches you’re sitting on. You’re in the living room scope, so when you’re trying to think of couches, the one in the living room comes to mind first. It’s the same reason that if you talk to someone in the United States about “the civil war”, they’ll immediately think of the American Civil War, not the Spanish Civil War, the American Revolution, or Marvel Comic’s Civil War (tm). That’s because they’re scoped to the United States².
\n

\n\n

Let’s go back to where we were drawing circles and talk about those funny marks:

\n\n

1 this.drawCircle();\n

\n\n\n\n

this, in this case, means ‘the component scope’. Hey, that’s where we stored the drawCircle function. How lucky!

\n\n

this.drawCircle, without the (), would return the code for the function. When we add the () it ‘calls’ the function, which means it runs the code in the function. And that code draws the circle.

\n\n

\n
didInsertElement is a special type of function called a ‘hook’. Don’t worry about it for now, just noticed that we define it using the same patterns that we used to define drawCircle
\n

\n\n

import/export

\n\n

One last thing is the import and export functionality. This is the ES2015 module system at work!

\n\n

So what import says is “I’m gonna need some code. Give me the code.”

\n\n

1 import Ember from 'ember';\n

\n\n\n\n

This says “Go to the place (library) known as ‘ember’, take the default thing there, and call it ‘Ember’”.

\n\n

Then we have the following line:

\n\n

1 export default Ember.Component.extend({\n2   ...\n3 })\n

\n\n\n\n

This says “Whenever someone asks for something from this file (and doesn’t specify any particular thing), give them the Component we’re defining.”

\n\n

If we wanted to get PacMan in another file, we’d need to say:

\n\n

1 import PacMan from 'pac-man/components/pac-man';\n

\n\n\n\n

So we go into the pac-man library (our project), go into the components folder, and get the component named pac-man.

\n\n

There’s other ways to use imports and exports, but we won’t need them in this book.

\n\n

\n
Click here for more about ES2015 modules
\n

\n\n

Feeling good yet?

\n\n

We’ve learned a lot of new concepts in this chapter- Components, Handlebars, Functions, Let, Canvas, CSS, and ES2015 Modules. The rest of the book will build on these concepts (while introducing new ones, albeit at a slower pace).

\n\n

Now, back to our story.

\n\n\n

Control

\n\n

The first day in the PAC was spent familiarizing yourself with the different screens. You could have done it just fine at a desk, but you suspect that part of the training is getting used to being in the PAC.

\n\n

The PAC was not as cramped inside as you would have guessed from looking at it, but it was definitely different than the engineering desks you were used to. Your torso and limbs, even your head, were trapped in their own web of wires. You could move them slowly in any direction, within limits, but anything sudden caused them to tauten. Matteo had just said, “You’ll be glad of this once we start with movement. And collisions.”

\n\n

For now it was just disorienting. Thankfully the screen stayed in front of your face, giving something of a familiarity to the proceedings. You’ve spent most of your working life in front of a screen.

\n\n

So yesterday had been the screens, and today would be the buttons.

\n\n

As you approach the training field, you see that Elder Matteo is talking with another person. Getting closer you start to recognize him- Terrance Mayhew. Terrance, the man whose discoveries raised PAC efficiency 14%. One of only five people with significant achievements in both engineering and the PAC corps (although he had started in PAC and shifted to engineering, where he was now much more famous). The most honored of the ‘Ahl Al-Kitab.

\n\n

The talking ceases when you arrive.

\n\n

“Salam,” says Matteo, “Are you ready for an experiment?”

\n\n

You nod, buzzing faintly with nervousness. The soreness in your limbs is forgotten in the excitement.

\n\n

“Terrance and I have been working together on an enhancement to the training process, one that could decrease the disorientation and death that sometimes accompanies this stage of the training. We thought that you, with your background, would be the perfect test subject.”

\n\n

You nod again. Decreasing death sounds pretty good. And if it means you get to work on a project with Terrance…

\n\n

You also begin to understand how big a deal Matteo is in the PAC world. Terrance could work with anyone, and it was Matteo. And you get to work with both of them. Maybe the summons wasn’t such a curse after all.

\n\n

“Where do I go?” you ask.

\n\n

Matteo points to the PAC. You step in, standing still for the few seconds it takes for the wires to take hold.

\n\n

“We’re going to start with how you control the PAC.”

\n\n\n

3: Input

\n\n

In this chapter, we’ll be learning how to take keyboard input. We won’t be moving yet, but we’ll be showing the result in the log.

\n\n

Steal This Code

\n\n

Input has historically been difficult in javascript… but luckily, other people have done all the hard work for us! We just need a way to get their hard work into our project. Even more luckily, other people have designed easy ways for us to take their code! It’s truly a wonderful world.

\n\n

\n
We’re not really “taking” the code, since it is freely given. These are more accurately called “code-sharing” tools, but for the duration of this book we won’t be sharing… just taking. But I encourage you to start sharing your code as soon as you feel comfortable doing so!
\n

\n\n

Since you’re using ember-cli, you already have access to several of these wonderful code-taking tools- and another tool that ties them together.

\n\n

To take the particular piece of code we’ll need, type ember install ember-keyboard-shortcuts into the command line. Now you have the library “ember-keyboard-shortcuts” available to you!

\n\n

\n
This will give you the npm package ‘ember-keyboard-shortcuts’ and the bower package ‘mousetrap’. Npm and bower are both vital tools in everyday programming life, but we won’t see them again in this book.
\n

\n\n

Be sure to restart your Ember server to get the keyboard shortcuts to load- stop the server in the command line (Ctl + C on OSX), then restart (ember s) after installing the addon.

\n\n

Bringing it in

\n\n

You can now access the ‘ember-keyboard-shortcuts’ codebase from within your project, but there’s an intermediate step before you can use any of their code. You need to import it.

\n\n

At the top of our pac-man.js component, under the Ember import, we’ll import the KeyboardShortcuts mixin.

\n\n

1 import Ember from 'ember';\n2 import KeyboardShortcuts from 'ember-keyboard-shortcuts/mixins/component';\n

\n\n\n\n

In this code, we’re importing just one mixin- specifically, the mixin that is meant to be used in an Ember component.

\n\n

\n
If you remember our discussion of modules from chapter 2, you may be able to guess which file in the addon we’re importing this from. If you can’t, no worries- understanding this isn’t core to this book.
\n

\n\n

What is a mixin? Glad you asked.

\n\n

Mixins

\n\n

Remember when we said that PacMan would “inherit” a bunch of properties from Ember.Component? That basically said “Hi PacMan, I’m Ember.Component. You’re going to be just like me, but don’t worry- you can change things”. Mixins say “Hey PacMan, here’s a bundle of new related code you can use if you want.”

\n\n

How do you mix in a Mixin?

\n\n

1 import KeyboardShortcuts from 'ember-keyboard-shortcuts/mixins/component';\n2 export default Ember.Component.extend(KeyboardShortcuts, {\n3   ...\n4 })\n

\n\n\n\n

So after you call extend, but before the {, you put your Mixins (separated by commas). You can mix in as many Mixins as you want.

\n\n

\n
Inheritance Chain
\n
Now PacMan has a mix of stuff on it from Ember.Component, KeyboardShortcuts, and the PacMan object itself. What happens if something is defined twice?\nIn the general case, a definition on the object itself takes precedence over a definition on the Mixin, which takes precedence over a definition on the parent class.\nApplied to this specific case, PacMan beats KeyboardShortcuts, which beats Ember.Component.\nWe’ve seen this already with didInsertElement, which was previously defined on Ember.Component but then overwritten on PacMan.
\n

\n\n

Defining keyboard shortcuts

\n\n

After you’ve mixed in the KeyboardShortcuts mixin, you can put the following code into your PacMan class:

\n\n

1 keyboardShortcuts: {\n2   up: function() { console.log('up');},\n3 },\n

\n\n\n\n

The effect of this is that when you hit the ‘up’ key, your browser says ‘up’ (in the console, which I’ll show you how to access soon).

\n\n

Let’s go over each element of this, starting with hashes.

\n\n

Hashes

\n\n

Here’s an example of a hash:

\n\n

1 {\n2   firstName: \"Jeffrey\",\n3   lastName: \"Biles\",\n4   sideBusiness: \"EmberScreencasts.com\",\n5   firstTechnicalBook: \"BUILD PACMAN\"\n6 }\n

\n\n\n\n

The way to read this is: “first name is Jeffrey, last name is Biles, side business is emberscreencasts.com, and first technical book is BUILD PACMAN”.

\n\n

In fancy technical terms, you could talk about ‘keys’ and ‘values’, like “The firstName key has a value of Jeffrey”, or “‘firstName: “Jeffrey”’ is a key-value pair”. I bring up those terms partially to be fancy, but also so I can give important messages like “a hash is a set of key-value pairs” and “key-value pairs in a hash are separated by commas”.

\n\n

1 {\n2   key: value,\n3   anotherKey: 'anotherValue'\n4 }\n

\n\n\n\n

\n
Beginners: Read the last paragraph and code sample a couple times if you have to. Advanced folks: email me any easier explanations you’ve found.
\n

\n\n

The value in a key-value pair could be a function. That’s what we’ll use in our keyboardShortcuts hash.

\n\n

1 keyboardShortcuts: {\n2   up: function() { console.log('up');},\n3   down: function() { console.log('down');},\n4   left: function() { console.log('left');},\n5   right: function() { console.log('right');},\n6 },\n

\n\n\n\n

Now that you know what a hash looks like, you may notice one other hash we’ve been using:

\n\n

1 export default Ember.Component.extend(KeyboardShortcuts, {\n2   didInsertElement: function(){...},\n3   drawCircle: function(){...},\n4   keyboardShortcuts: {...},\n5 })\n

\n\n\n\n

So we can see that the value in each key-value pair can be a function or another hash. It can also be a simpler property, such as a number or a string.

\n\n

Now that we understand hashes, let’s look at the results of our work.

\n\n

Logging

\n\n

You’ll notice that after each of the directions in keyboardShortcuts we’ve used a console.log. This says, “Hey browser, put this stuff in the console so the programmer can look at it.”

\n\n

But where in the browser does it put it?

\n\n

Open up Chrome.
Right click anywhere on the screen.
Choose “Inspect Element” from the drop-down menu
Either click the ‘Console’ tab or press the escape key.

\n\n

Now you’re looking at the console. Hurrah! Click back into the game, then hit some direction keys. If you’ve set up your code like we’ve described, you’ll be seeing the directions printed out.

\n\n\n

\n\n\n

You can put almost anything into console.log. You can put classes, functions, numbers, strings (what we currently have in there), hashes, and more. You can also put more than one thing in there- just separate them by commas.

\n\n

Summary

\n\n

In this chapter, we’ve given our code some… direction. We learned about how to import external libraries, how to use mixins, how to use hashes, and how to log stuff to the console.

\n\n

The next chapter will use our button pressing to actually change stuff in the game world.

\n\n\n

… And Much Much More

\n\n

For more, buy the full book.

Notes

1If you’re fabulously wealthy, a brilliant machinist, and don’t care for the laws of physics.↩

\n\n

2(Okay, maybe some nerds here are scoped to Marvel Comics. I won’t judge.)↩

\n\n\n

\n\n

\n\n","tocStructure",[204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234],{"_80":74,"_43":70,"_71":-5,"_75":76,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":81,"_43":70,"_71":-5,"_75":76,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":81,"_43":86,"_71":-5,"_75":87,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":91,"_71":-5,"_75":92,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":96,"_71":-5,"_75":97,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":99,"_71":-5,"_75":100,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":102,"_71":-5,"_75":103,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":105,"_71":-5,"_75":106,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":81,"_43":108,"_71":-5,"_75":109,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":81,"_43":112,"_71":-5,"_75":113,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":116,"_71":-5,"_75":117,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":119,"_71":-5,"_75":120,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":122,"_71":-5,"_75":123,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":125,"_71":-5,"_75":126,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":128,"_71":-5,"_75":129,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":131,"_71":-5,"_75":132,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":134,"_71":-5,"_75":135,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":137,"_71":-5,"_75":138,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":140,"_71":-5,"_75":141,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":143,"_71":-5,"_75":144,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":81,"_43":146,"_71":-5,"_75":147,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":81,"_43":150,"_71":-5,"_75":151,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":154,"_71":-5,"_75":155,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":157,"_71":-5,"_75":158,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":160,"_71":-5,"_75":161,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":163,"_71":-5,"_75":164,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":166,"_71":-5,"_75":167,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":169,"_71":-5,"_75":170,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":90,"_43":172,"_71":-5,"_75":173,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":81,"_43":175,"_71":-5,"_75":176,"_73":74,"_93":-5,"_94":-5,"_84":-5},{"_80":74,"_43":179,"_71":-5,"_75":180,"_73":74,"_93":-5,"_94":-5,"_84":-5},"publicChapterContent","nextChapter","sections",[],"routes/_store+/_layout","routes/_store+/_readers+/_layout","actionData","errors"]

Notes

Table of Contents

In Media Res

1: Drawing A circle

Installation

Creating your app

Displaying a box

Drawing a circle

Setup complete

Training

2: Getting up to speed

Components

Handlebars

Canvas

Css

Canvas context and drawing

Let

didInsertElement

Functions

import/export

Feeling good yet?

Control

3: Input

Steal This Code

Bringing it in

Mixins

Inheritance Chain

Defining keyboard shortcuts

Hashes

Logging

Summary

… And Much Much More

Notes