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 Rendering the Game startGame() Method Solution

Marcell Ciszek
Marcell Ciszek
7,255 Points

can someone help me with my codes please ?

class Game { constructor() { this.board = new Board(); // this will set to a new board obj this.players = this.createPlayers(); this.ready = false; }

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

/** 
 * Creates two player objects
 * @return  {Array}    An array of two Player objects.
 */

 // this are new players objects
 createPlayers() {
    const players = [new Player('Player 1', 1, '#e15258', true),
                    new Player('Player 2', 2, '#e59a13')];
    return players;
 }

  // gets the game ready 
startGame(){
    this.board.drawHTMLBoard();
    this.activePlayer.activeToken.drawHTMLToken();
    this.ready = true;
}

}

class Player { constructor(name,id,color, active = false) { this.name = name; this.id = id; this.color = color; this.active = active; this.tokens = this.createTokens(21); } // how to document javascript code /** * Creates token objects for player * @param {integer} num - Number of token objects to be created * @return {array} tokens - an array of new token objects */ createTokens(num){ const tokens = []; for (let i = 0; i < num; i++){ let token = new Token(i, this); tokens.push(token) } return tokens; }

            get unusedTokens() {
                return this.tokens.filter(token => !token.dropped);
            }

            get activeToken(){
                return this.unusedTokens[0];
            }
        }

class Space { constructor(x, y) { this.x = x; this.y = y; this.id = space-${x}-${y}; this.token = null; this.diameter = 76; this.radius = this.diameter / 2; } drawSVGspace() { const svgSpace = document.createElementNS("http://www.w3.org/2000/svg", "circle"); svgSpace.setAttributeNS(null, "id", this.id); svgSpace.setAttributeNS(null, "cx", (this.x * this.diameter) + this.radius); svgSpace.setAttributeNS(null, "cy", (this.y * this.diameter) + this.radius); svgSpace.setAttributeNS(null, "r", this.radius - 8); svgSpace.setAttributeNS(null, "fill", "black"); svgSpace.setAttributeNS(null, "stroke", "none");

    document.getElementById("mask").appendChild(svgSpace);
}

}

class Token { constructor(index,owner) { this.owner = owner; this.id = token-${index}-${owner.id}; this.dropped = false; } //Draws new HTML token.

get drawHTMLToken(){
    const 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;
}

}

const game = new Game();

document.getElementById('begin-game').addEventListener('click', () => { game.startGame();

// callback function

this.style.display = 'none';
document.getElementById('play-area').style.opacity = '1';

})

class Board { constructor() { this.rows = 6; this.columns = 7; this.spaces = this.createSpaces(); }

/** 
 * Generates 2D array of spaces. 
 * @return  {Array}     An array of space objects
 */

 createSpaces(){
    const spaces = [];

    for(let x = 0; x < this.columns; x++){
        const column = [];

    for (let y = 0; y < this.rows; y++){
        const space = new Space(x, y);
        column.push(space);
    }

    spaces.push(column)
 }

  return spaces;
}
drawHTMLBoard(){
      for(let column of this.spaces) {
          for (let space of column){
              space.drawSVGSpace();
          }
      }
}

}

1 Answer

Ben Antino
Ben Antino
15,699 Points

From what kind of help you need exactly?