Question

你好我班上的比赛

在构造中，我定义了我的 isActive为假

因为我想用它开始比赛并结束比赛

class Match {
    constructor(players) {
      this.id = uuid.v4().toString();
      this.players = players;
      this.isActive = false;;
    }

    startMatch(){
      this.isActive = true;
    }
    stopMatch(){
      this.isActive = false;
    }
  }

我有班级比赛在我的比赛类中，我创建一个比赛并将其添加到比赛集合中：

const Match = require("./Match");
class Matches {
    constructor() {
      this.matches = [];
    }

    createMatch(players){
      this.matches.push(new Match(players))
    }


    getMatch(id){
      if(id){      
        return this.matches.find((match) => match.id = match )
      }else{
        return null;
      }

    }
  }

在我的服务器中：

const matches = new Matches();
matches.createMatch(player);

得出结果：

Matches {
  matches: [
    Match {
      id: '4a472acc-2a4e-465f-afba-fabbea2052e4',
      players: [Object],
      isActive: false
    }
  ]
}

但是我想知道如何更改我的比赛集合中特定比赛的状态。

我也不知道我是否以最佳方式进行了课堂设计如果有人可以帮助我改善课程

Answer 1

有很多方法可以在类之间传递参数，因此这种类型取决于其他因素，例如是否使用事件系统，类之间可以紧密耦合的方式等等。

一个“简单”的例子就是这样，我们在Match和Game之间以及Matches和Match之间传递函数（回调）。游戏不会知道或不在乎finished()会做什么，它只是知道应该将胜出的玩家传递给它。

class Game {
  constructor(players, rounds) {
    this.rounds = rounds;
    // clone the player objects, adding a score to each.
    this.players = players.map( player => Object.assign({}, player, { score: 0 }));
  }
  play( finished ) {
    for( let round = 1, rounds = this.rounds; round < rounds; round += 1 ) {
      // random winner of the round.
      const random_index = Math.floor( Math.random() * this.players.length );
      const winner = this.players[ random_index ];
      winner.score += 1;
    }
    finished( this.winner());
  }
  winner() {
    return this.players.reduce(( winner, player ) => {
      if ( player.score > winner.score ) winner = player;
      return winner;
    }, { score: 0 });
  }
}

class Match {
  constructor(game) {
    this.game = game;
    this.id = Math.random().toString();
    this.isActive = false;
  }
  startMatch(finished){
    this.isActive = true;
    this.game.play( winner => {
      console.log( `player ${ winner.name } won with ${ winner.score } points` );
      this.stopMatch();
      finished( this.id );
    });
  }
  stopMatch(){
    this.isActive = false;
  }
}

class Matches {
  constructor() {
    this.matches = [];
  }
  createMatch(match){
    this.matches.push( match );
  }
  getMatch(id){
    if(id){      
      return this.matches.find((match) => match.id = match )
    }
    else {
      return null;
    }
  }
  endMatch( id ) {
    this.matches = this.matches.filter( match => match.id !== id );
  }
  startAll() {
    this.matches.forEach( match => match.startMatch( id => this.endMatch( id )));
  }
}

const players = [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }];
const matches = new Matches();

document.querySelector( 'button' ).addEventListener( 'click', () => {
  const bestOfFive = new Game( players, 5 );
  const match = new Match( bestOfFive );
  matches.createMatch( match );
  matches.startAll();
});

<button>Play</button>

如果您愿意，可以将new Match()和new Game()的创建移回构造函数中。

// fake ajax request from the front end to the back end.
const ajax = function( payload ) {
  console.log( 'ajax call to the back end' );
  return back_end.request( payload );  
};
const front_end = {
  id: 'someId',
  render: function( content ) {
    if ( content ) document.querySelector( 'table' ).outerHTML = content;
  },
  makeMove: function() {
    console.log( 'Alice moves a white pawn from A2 to A3' );
    const move = 'A2 to A3';
    const result = this.sendToBackEnd( JSON.stringify({ id: front_end.id, move: move }));
    console.log( 'back end responsed, rendering result' );
    front_end.render( result );
  },
  sendToBackEnd: function( action ) {
    // this will be async, so look into promises
    // or use a callback as before
    return ajax( action );
  }
};
const database = [
  { id: 'someId', state: 'someWaytoDescribeState' }
];
const back_end = {
  validate: function( game, move ) {
    console.log( 'the move is one space down' );
    console.log( 'A pawn is allowed to move one down up' );
    console.log( 'The targetted space is empty' );
    return true;
  },
  request: function( payload ) {
    console.log( 'back end received request, recreating action' );
    const action = JSON.parse( payload );
    console.log( 'created action, searchign game' );
    const game = database.find( game => game.id === action.id );
    if ( game ) {
      console.log( 'game found, validating move' );
      const is_valid = back_end.validate( action.move );
      if ( is_valid ) {
        console.log( 'Move "' + action.move + '" is valid, updating database' );
        // insert database code
        console.log( 'database updated' );
        return `<table>
                  <tr>
                    <td></td>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                  </tr>
                  <tr>
                    <td>1</td>
                    <td>tower</td>
                    <td>knight</td>
                    <td>rook</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>empty</td>
                    <td>pawn</td>
                    <td>pawn</td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td class="move">pawn</td>
                    <td>empty</td>
                    <td>empty</td>
                  </tr>
                </table>`;
      }
      else {
        console.log( 'invalid move, board should stay the same' );
        return null;
      }
    }
    else {
      console.log( 'game not found, should send error' );
    }
  }
};

document.querySelector( 'button' ).addEventListener( 'click', () => front_end.makeMove());

table {
  border-collapse: collapse;
}
td {
  border: 1px solid black;
  height: 50px;
  text-align: center;
  width: 50px;
}
td.move {
  background-color: orange;
}

<table>
  <tr>
    <td></td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>1</td>
    <td>tower</td>
    <td>knight</td>
    <td>rook</td>
  </tr>
  <tr>
    <td>2</td>
    <td class="move">pawn</td>
    <td>pawn</td>
    <td>pawn</td>
  </tr>
  <tr>
    <td>3</td>
    <td>empty</td>
    <td>empty</td>
    <td>empty</td>
  </tr>
</table>
<button>Make Move</button>

JS类和函数

1 个答案: