Блог

Главная - Вопросы по программированию - Отключить/Включить случайный бонус на сетке Scrabble

Отключить/Включить случайный бонус на сетке Scrabble

#html #angular #typescript

Вопрос:

я пытаюсь добавить новую функцию в проект Scrabble на Angular. Функция состоит в том , чтобы случайным образом выбирать места бонусного кейса, когда пользователь активирует эту функцию. моя проблема в том , что он всегда активирован, пробовал использовать логическое значение или число, всегда одна и та же проблема . может кто-нибудь сказать мне, что я делаю не так, пожалуйста.

doc.html

 <button  (click)="activeRandomBonus()"  class="btn btn-default form-control increaseBtn">Activer BONUS</button>

компонент.ts

 @Component({
  selector: 'app-param-game',
  templateUrl: './param-game.component.html',
  styleUrls: ['./param-game.component.scss'],
})
export class ParamGameComponent {
  timeMax: number = 240;
  timeMin: number = 0;
  gridTile: GridTile;
  console: Console;
  textShow: boolean;

  constructor(
    public paramGameService: ParamGameService,
    private dialogRef: MatDialogRef<ParamGameComponent>,
    public dialog: MatDialog
  ) { }

  // activeRandomBonus(): void {
  //   this.gridTile.randomButton();
  // }
}

сетка-плитка.ts

 export class GridTile {
  arrayOps: ArrayOperations = new ArrayOperations();
  paramGameService: ParamGameService = new ParamGameService();
  letter: string;
  bonusName: string;
  // **test: number;**
  isJoker: boolean = false;
  multiplier: defaults.Multipliers = defaults.Multipliers.NoMultiplier;
  pos: Vec2 = {
    x: 0,
    y: 0,
  };

  gridContext: CanvasRenderingContext2D;

  constructor(context: CanvasRenderingContext2D, x: number, y: number) {
    this.letter = '';
    this.gridContext = context;
    this.pos.x = x;
    this.pos.y = y;

    if (this.arrayOps.containsCoordinates(this.pos, defaults.MULTIPLIER_3W)) {
      this.multiplier = 5;
    } else if (this.arrayOps.containsCoordinates(this.pos, defaults.MULTIPLIER_2W)) {
      this.multiplier = 4;
    } else if (this.arrayOps.containsCoordinates(this.pos, defaults.MULTIPLIER_3L)) {
      this.multiplier = 3;
    } else if (this.arrayOps.containsCoordinates(this.pos, defaults.MULTIPLIER_2L)) {
      this.multiplier = 2;
    } else if (this.arrayOps.containsCoordinates(this.pos, defaults.STARTING_TILE)) {
      this.multiplier = 0;
    }
  }
  idOfTile(word1: string, word2: string) {
    this.gridContext.fillText(
      word1,
      this.pos.x * defaults.TILE_SIZE   defaults.TILE_SIZE / 2 - defaults.TEN,
      this.pos.y * defaults.TILE_SIZE   defaults.TILE_SIZE / 2,
    );
    this.gridContext.fillText(
      word2,
      this.pos.x * defaults.TILE_SIZE   defaults.TILE_SIZE / 2 - defaults.EIGHT,
      this.pos.y * defaults.TILE_SIZE   defaults.TILE_SIZE / 2   defaults.TWELVE,
    );
  }

  randBonusName(x = Math.floor(Math.random() * 5)) {
    if (x === 1 || x === 3) return (this.bonusName = 'Triple');
    else return (this.bonusName = 'Double');
  }

  randomButton(): void {
    this.test =  1;
    // window.location.reload();
  }
  drawTile() {
    // draw empty tile
    this.gridContext.strokeRect(
      this.pos.x * defaults.TILE_SIZE,
      this.pos.y * defaults.TILE_SIZE,
      defaults.PLAY_AREA_DEFAULT_WIDTH / defaults.TILES_NUMBER,
      defaults.PLAY_AREA_DEFAULT_HEIGHT / defaults.TILES_NUMBER,
    );

    // Background style depends on multiplier
    this.gridContext.fillStyle = 'white';
    switch (this.multiplier) {
      case defaults.Multipliers.ThreeW: {
        this.gridContext.fillStyle = 'red';
        break;
      }
      case defaults.Multipliers.TwoW: {
        this.gridContext.fillStyle = 'pink';
        break;
      }
      case defaults.Multipliers.ThreeL: {
        this.gridContext.fillStyle = 'blue';
        break;
      }
      case defaults.Multipliers.TwoL: {
        this.gridContext.fillStyle = 'cyan';
        break;
      }
      case defaults.Multipliers.Center: {
        this.gridContext.fillStyle = 'green';
        break;
      }
      case defaults.Multipliers.NoMultiplier: {
        this.gridContext.fillStyle = 'white';
        break;
      }
      // No default
    }

    this.gridContext.fillRect(
      this.pos.x * defaults.TILE_SIZE   this.gridContext.lineWidth - 1,
      this.pos.y * defaults.TILE_SIZE   this.gridContext.lineWidth - 1,
      defaults.PLAY_AREA_DEFAULT_WIDTH / defaults.TILES_NUMBER - this.gridContext.lineWidth,
      defaults.PLAY_AREA_DEFAULT_HEIGHT / defaults.TILES_NUMBER - this.gridContext.lineWidth,
    );
    this.gridContext.fillStyle = 'black';
    this.gridContext.font = '10px Roboto';

    switch (this.multiplier) {
      case defaults.Multipliers.ThreeW: {
        if (this.test <= 0) this.idOfTile('Mot', 'Triple');
        //desactive random bonus
        else this.idOfTile('Mot', this.randBonusName()); //active random bonus

        break;
      }
      case defaults.Multipliers.TwoW: {
        if (this.test <= 0) {
          this.idOfTile('Mot', 'Double');
        } else this.idOfTile('Mot', this.randBonusName());
        break;
      }
      case defaults.Multipliers.ThreeL: {
        if (this.test === 0) {
          this.idOfTile('Lettre', 'Triple');
        } else this.idOfTile('Lettre', this.randBonusName());
        break;
      }
      case defaults.Multipliers.TwoL: {
        if (this.test === 0) {
          this.idOfTile('Lettre', 'Double');
        } else this.idOfTile('Lettre', this.randBonusName());
        break;
      }
      case defaults.Multipliers.Center: {
        this.gridContext.fillText(
          'Start',
          this.pos.x * defaults.TILE_SIZE   defaults.TILE_SIZE / 2 - defaults.TEN,
          this.pos.y * defaults.TILE_SIZE   defaults.TILE_SIZE / 2   defaults.EIGHT,
        );
        break;
      }
      case defaults.Multipliers.NoMultiplier: {
        // do nothing
        break;
      }
      // No default
    }
  }

  drawLetter(letter: string, isJoker: boolean) {
    if (!this.gridContext) {
      this.letter = letter;
      return;
    }
    this.gridContext.fillStyle = 'peru';
    this.gridContext.fillRect(
      this.pos.x * defaults.TILE_SIZE   this.gridContext.lineWidth,
      this.pos.y * defaults.TILE_SIZE   this.gridContext.lineWidth,
      defaults.PLAY_AREA_DEFAULT_WIDTH / defaults.TILES_NUMBER - this.gridContext.lineWidth - 2,
      defaults.PLAY_AREA_DEFAULT_HEIGHT / defaults.TILES_NUMBER - this.gridContext.lineWidth - 2,
    );

    // draw letter
    this.gridContext.fillStyle = 'black';
    this.gridContext.font = '25px Arial';
    this.gridContext.fillText(
      letter,
      this.pos.x * defaults.TILE_SIZE   defaults.TILE_SIZE / 2 - defaults.TEN,
      this.pos.y * defaults.TILE_SIZE   defaults.TILE_SIZE / 2   defaults.EIGHT,
    );

    const scoreString = isJoker ? '0' : (defaults.LETTER_VALUES.get(letter) ?? 1)?.toString();
    this.isJoker = isJoker;
    // draw letter score
    this.gridContext.font = '15px Arial';
    // TODO: take2 digit scores into account
    this.gridContext.fillText(
      scoreString,
      this.pos.x * defaults.TILE_SIZE   defaults.TILE_SIZE - defaults.TWELVE,
      this.pos.y * defaults.TILE_SIZE   defaults.TILE_SIZE - defaults.FOUR,
    );
    this.letter = letter; // saving the letter
  }

  get tileLetter(): string {
    return this.letter;
  }
}

Ответ №1:

похоже, что вы включаете только случайную функцию, но когда вы нажимаете кнопку, она не проверяет текущую статистику. Вы можете довольно легко сделать это с помощью логических значений, установив их в противоположность текущим.

 active = false;
randomButton(): void {
  this.active = !this.active;
}

не уверен, как работает ваш код, но вам также может потребоваться запустить класс для обновления логики.

 active = false;
randomButton(): void {
  this.active = !this.active;
  this.drawTile();
}

Комментарии:

1. Первое, что я должен сначала поблагодарить вас , но значение логического обновления компонента, интерполируя, подтверждает это, но не обновлялся в классе, я действительно не понял, почему он не обновляется там, если вы можете помочь, пожалуйста, сделайте это

2. что вы подразумеваете под «он не обновлялся в классе», обновления компонента плитки сетки просто обнаруживаются, когда я его тестировал. В примере основного компонента нет никаких ссылок на компонент плитки сетки, поэтому я не уверен, чего вы здесь ожидаете. возможно, вам нужно обновить свой вопрос.

3. я имею в виду , когда событие щелчка происходит в компоненте activeRandomBonus (), логическое значение изменяется, но в сетке-tile.ts мне нужно использовать новое значение в функции drawTile() для переключения (this.multiplier) { если (активен) этот.idOfTile («Mot», «Тройной»);} но есть основное значение проблемы, которое все еще похоже на определенное сверху active = false;

Метки: