Как выбирать одно из двух значений с заданной вероятностью?

Question

[AndRey833]

Делаю игрушку на реакте на основе крестиков ноликов. Игровое поле 16 квадратов. Нажимаешь на кнопку и квадрат получает цвет. Черный или красный. Если рядом 2 красных - проигрыш. Как-то так.

Мне нужно, чтобы вместо 0 и Х блок, на который жмешь, приобретал красный или черный цвет, при этом вероятность появления черного была 70 процентов, а красного 30.

Вот фрагмент кода, ответственный за это:

clickHandler = event => {

// data - номер квадрата по которому кликают
let data = event.target.getAttribute('data');
let currentScuares = this.state.squares;
console.log(currentScuares);
 

 //проверка
  if (currentScuares[data] === null){
  // выбор что добавлять х или о по состоянию счетчика
  currentScuares[data] = (this.state.count % 2 === 0) ? 'X':'O';
  // увеличение счетчика
  this.setState({ count: this.state.count + 1});
  // текущиц квадратик
  this.setState({ scuares:currentScuares});
  }
  else {
    alert ('Так нельзя');
  }
}

Вот ссылка на гитхаб.

Answer 1

[0xD34F]

Получаете случайное значение с помощью Math.random, в зависимости от того, ниже ли оно вашей вероятности, берёте одно или другое значение:

class App extends React.Component {
  state = {
    cells: Array(16).fill(null),
    probability: 0.7,
  }

  onClick = e => {
    const index = +e.target.dataset.index;
    this.setState(({ cells, probability }) => ({
      cells: cells.map((n, i) => i === index && !n
        ? (Math.random() < probability ? 'black' : 'red')
        : n
      ),
    }));
  }

  render() {
    return (
      <div className="ColorS">
        {this.state.cells.map((n, i) => (
          <div
            className="ColorS-grid"
            style={n && { background: n }}
            data-index={i}
            onClick={this.onClick}
          />
        ))}
      </div>
    );
  }
}

Answer 2

[Петр]

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