случайное нечисловое присвоение без дубликатов с использованием массивов - PullRequest
Новая
       10

случайное нечисловое присвоение без дубликатов с использованием массивов

0 голосов
/ 23 октября 2018

Я пытаюсь создать программу, которая назначает случайный, уникальный цвет для предмета одежды.Я использую массив для хранения уже выбранных цветов и пытаюсь (с for и while) устранить дублирующиеся цвета.

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

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

<!DOCTYPE html>
<html lang="en-us">

<head>

  <!-- the goal is to randomly assign a color to a piece of clothing and have no duplicate colors -->
  <meta charset="utf-8">

  <!-- displays the clothing and color on-screen -->
  shirt: <span id="shirt"></span><br> shorts: <span id="shorts"></span><br> hat: <span id="hat"></span><br> coat: <span id="coat"></span>
  <br><br>

  <!-- testing prints to track what's going on-->
  colorPicked first: <span id="pickedColor"></span><br>

  <br><br> colors so far: <span id="soFar"></span>

</head>

<body>

  <script>
    // establish an array with seven color options
    var colors = ['orange', 'red', 'blue', 'green', 'yellow', 'pink', 'purple'];
    // array to track colors picked so far
    var colorPicked = [];
    // variable to track place in array
    var colorNumber = 0

    // assign a random color to 'shirt'
    var shirtColor = colors[Math.floor(Math.random() * colors.length)];
    colorPicked[colorNumber] = shirtColor;
    document.getElementById('shirt').innerHTML = shirtColor;

    document.getElementById('pickedColor').innerHTML = colorPicked[colorNumber];


    // assign a random color to 'shorts' - a loop (that doesn't quite work right) checks for duplicates
    var shortsColor = colors[Math.floor(Math.random() * colors.length)];


    while (shortsColor == colorPicked[i]) {
      for (var i = 0; i <= colorNumber; i++) {
        document.getElementById('pickedColor').innerHTML = "same";
        document.getElementById('shorts').innerHTML = shortsColor;
        shortsColor = colors[Math.floor(Math.random() * colors.length)];
      }
    }

    if (shortsColor != colorPicked[colorNumber]) {
      document.getElementById('shorts').innerHTML = shortsColor;
      colorNumber = colorNumber + 1;
      colorPicked[colorNumber] = shortsColor;
    }



    // assigns a random, non-repeating color to 'hat'
    var hatColor = colors[Math.floor(Math.random() * colors.length)];

    while (hatColor == colorPicked[i]) {
      for (var i = 0; i <= colorNumber; i++) {
        document.getElementById('pickedColor').innerHTML = "same";
        document.getElementById('hat').innerHTML = hatColor;
        hatColor = colors[Math.floor(Math.random() * colors.length)];
      }
    }

    if (hatColor != colorPicked[colorNumber]) {
      document.getElementById('hat').innerHTML = hatColor;
      colorNumber = colorNumber + 1;
      colorPicked[colorNumber] = hatColor;
    }



    // assigns a random, non-repeating color to 'coat'
    var coatColor = colors[Math.floor(Math.random() * colors.length)];

    while (coatColor == colorPicked[i]) {
      for (var i = 0; i <= colorNumber; i++) {
        document.getElementById('pickedColor').innerHTML = "same";
        document.getElementById('coat').innerHTML = coatColor;
        coatColor = colors[Math.floor(Math.random() * colors.length)];
      }
    }

    if (coatColor != colorPicked[colorNumber]) {
      document.getElementById('coat').innerHTML = coatColor;
      colorNumber = colorNumber + 1;
      colorPicked[colorNumber] = coatColor;
    }

    // show values in the log
    for (var i = 0; i <= colorNumber; i++) {
      //document.getElementById('soFar').innerHTML = colorPicked[i];
      console.log(colorPicked[i]);
    }
  </script>


</body>

</html>

1 Ответ

0 голосов
/ 23 октября 2018

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

В этом коде предполагается, что colors всегда столько же или длиннее, чем нужно. 

let colors = ['red', 'white', 'blue'];
const shirts = [{ name: 'shirt1' }, { name: 'shirt2' }];

const shirtsWithColors = shirts.map((shirt) => {
  // Make a copy of shirt so that we don't modify the one in the `shirts` array
  const newShirt = {...shirt};

  // Pick a color index
  const colorToUseIndex = Math.floor(Math.random() * colors.length);
  const colorToUse = colors[colorToUseIndex];

  // Remove the picked color from the color array
  colors.splice(colorToUseIndex, 1);

  // Assign the color and return
  newShirt.color = colorToUse;
  return newShirt;
});

PS, если вырешите не использовать это решение, и чтобы продолжить что-то в том же духе, что и сейчас, я по крайней мере рекомендую вам перейти на использование карты (объекта), чтобы увидеть, использовались ли цвета или нет.Это сделает проверку намного проще: 

const colors = ['red', 'white', 'blue'];
const usedColors = {};
...
// When you assign a color:
usedColors[colorIndex] = true;
...
// When checking if the color has been used:
if (usedColors[colorIndex]) {
  // Try picking a different color
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...