Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript: Challenge Making the Game Interactive playToken() Method Solution

Richard Preske
PLUS
Richard Preske
Courses Plus Student 4,356 Points
Posted by Richard Preske
Richard Preske
Courses Plus Student 4,356 Points

no errors, but can't move left, right, or down token

https://w.trhou.se/y9c4he4ftt

Can't move token.

5 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Open your browser's development tools console to see the errors, they are not displayed on the web page.

It looks like the code has a number of normal methods that were intended to be "getter" methods. You must always have parentheses after the name when calling a normal function. For example, on line 16 of "Game.js":

      this.activePlayer.activeToken.drawHTMLToken();
      // "activePlayer" and "activeToken" have no parentheses and should probably be getters

A "getter" method must be defined using the keyword "get". So on line 20:

   activePlayer() {      // original code
   get activePlayer() {  // corrected

This is just one example, this will need to be fixed throughout the code files.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

The dev tools are your friend! After a couple of breakpoints, I discovered that on lines 26-30 of Game.js the "event" object is being compared to text strings. But you probably want to test "event‍.key" instead.

Practice with the dev tools, I'm sure there will be more to do.

Richard Preske
PLUS
Richard Preske
Courses Plus Student 4,356 Points
Richard Preske
Richard Preske
Courses Plus Student 4,356 Points

columnLocation is not defined, yet it is in the constructor of class Tokens. Found this after stepping through the code. Not sure why I get this error. In Tokens.js.

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

You forgot to provide a fresh snapshot, but it looks like the "this." prefix is missing.

Colton Shaw
Colton Shaw
12,634 Points
Colton Shaw
Colton Shaw
12,634 Points

Mine was the same and my issue was with the event handler. By just passing it e it was an object with values that looked like the below:

KeyboardEvent {isTrusted: true, key: "ArrowRight", code: "ArrowRight", location: 0, ctrlKey: false, …}

So, instead, I passed it e.key and this fixed the issue.

document.addEventListener('keydown', function(e) {
    newGame.handleKeydown(e.key);
})