Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Object-Oriented JavaScript: Challenge Making the Game Interactive moveLeft() and moveRight() Methods Solution

Vitaly Khe
Vitaly Khe
7,160 Points

my moves do not work as expected..

Behavior: Right key - it jumps to somwhere for more than 76px Left key - it moves 76px left, but 'if' conditions ignored?

class Game {
    constructor() {
      this.players = this.createPlayers();
      this.board = new Board();
      this.ready = false;
    }
    startGame() {
      console.log('creating the new board object: const board = new Board()');
      this.board.drawHTMLBoard();
      console.log('a board has created\n Drawing HTML tokens...');
      this.activePlayer.activeToken.drawTHMLToken();
      console.log('HTML tokens have been created');
      this.ready = true;
    }

    // createPlayers returns an array of Player {object} instance
    createPlayers() {
      const player1 = new Player('Player 1', 1, '#e15258', true);
      const player2 = new Player('Player 2', 2, '#e59a13');
      return [player1, player2];
    }

    get activePlayer() {
      return this.players.find(player => player.isActive);
    }

    handleKeyDown(event) {
      if (this.ready) {
        switch(event.key) {
          case "ArrowLeft": {
            console.log("Left");
            this.activePlayer.activeToken.moveLeft();
            break;
          }
          case "ArrowRight": {
            console.log("Right");
            this.activePlayer.activeToken.moveRight(this.board.columns);
            break;
          }
          case "ArrowDown": {
            console.log("Down");
            this.activePlayer.activeToken.moveDown();
            break;
          }
        }
      }
    }
}


class Token {
  constructor(index, owner){
    this.owner = owner;
    this.id = `token-${index}-${owner.id}`;
    this.dropped = false;
    this.columnLocation = 0;
  }

  drawTHMLToken() {
    let token = document.createElement('div');
    document.getElementById('game-board-underlay').appendChild(token);
    token.setAttribute('id', this.id);
    token.setAttribute('class', 'token');
    token.style.backgroundColor = this.owner.color;
  }
  get htmlToken () {
    return document.getElementById(this.id);
  }

  get offsetLeft() {
    return this.htmlToken.offsetLeft;
  }

  moveLeft() {
    if ( this.columnLocation > 0 ) {
      this.htmlToken.style.left = this.offsetLeft - 76;
      this.columnLocation -= 1;
    }
  }

  moveRight(columns) {
    if ( this.columnLocation <  columns) {
      this.htmlToken.style.right = this.offsetLeft + 76;
      this.columnLocation += 1;
    }
  }

  moveDown() {

  }
}
Vitaly Khe
Vitaly Khe
7,160 Points

Added following for debugging:

moveRight(columns) {
    console.log('column location : ', this.columnLocation, ' moveRight method called on token. offsetLeft is : ', this.offsetLeft, '\n', this.htmlToken);
    if ( this.columnLocation <  columns) {
      this.htmlToken.style.right = this.htmlToken.offsetLeft + 76;
      console.log('offsetLeft became : ', this.offsetLeft);

      this.columnLocation += 1;
    }

After Right key pressed ONCE the output is following:

game.js:8 creating the new board object: const board = new Board()
game.js:10 a board has created
 Drawing HTML tokens...
game.js:12 HTML tokens have been created
game.js:36 Right
token.js:35 column location :  0  moveRight method called on token. offsetLeft is :  0 
 <div id=​"token-0-1" class=​"token" style=​"background-color:​ rgb(225, 82, 88)​;​ right: 76px;​"></div>token.js:38 offsetLeft became :  380

2 Answers

Are you using Firefox? I am, and found a bug it seems.. the code doesn't work as it should. It's something with the offset property. By default it should be 0, and it's 16. Right arrow moves the token more than it should, and left arrow moves it back a bit less than it should.

I found this bug report, it says the offset properties are wrongly calculated when the parent isn't statically positioned. In this code, the token's parent is the div #game-board-underlay, and it has 'position: relative'. I tried removing this rule and the token moves correctly, so I think this is it.

Ashley Boucher could you check this?

In case anyone is thinking about this, I fixed it by removing the left border of game-board-underlay and adding a left offset of 16px to the token class instead.

moveRight(columns) {
    if ( this.columnLocation <  columns) {
      this.htmlToken.style.right = this.offsetLeft + 76;
      this.columnLocation += 1;
    }
  }

i believe this is causing the problem. You're using this.htmlToken.style.right where it should be left.