Алгоритм останавливается, и я понятия не имею, почему - PullRequest
Новая
       11

Алгоритм останавливается, и я понятия не имею, почему

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

Эй!Я пытаюсь закодировать Pexeso с помощью HTML, CSS и Javascript.У меня есть функция генерации случайных чисел (число не может быть использовано более одного раза - я решил это с массивом).Затем у меня есть другая функция, которая вызывает упомянутую функцию и выбирает по возвращенному номеру id элемента img и устанавливает источник изображения.Все выглядит правильно - IDE и Google Chrome не возвращают никаких ошибок, но все равно не делают правильно - они никогда не получают все изображения.

Я ставлю код и показываю, как он выглядит после компиляции.

HTML 

<!DOCTYPE html>
<html lang='cs'>
  <head>
    <title></title>
    <meta charset='utf-8'>
    <link href='style.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
  <div class="container">
    <img class="pexeso" src="" id="1">
    <img class="pexeso" src="" id="2">
    <img class="pexeso" src="" id="3">
    <img class="pexeso" src="" id="4">
    <img class="pexeso" src="" id="5">
    <img class="pexeso" src="" id="6">
    <img class="pexeso" src="" id="7">
    <img class="pexeso" src="" id="8">
    <img class="pexeso" src="" id="9">
    <img class="pexeso" src="" id="10">
    <img class="pexeso" src="" id="11">
    <img class="pexeso" src="" id="12">
    <img class="pexeso" src="" id="13">
    <img class="pexeso" src="" id="14">
    <img class="pexeso" src="" id="15">
    <img class="pexeso" src="" id="16">       
  </div>
  <script src='app.js'></script>
  </body>
</html>

JS 

var position;
position = new Array();

function generateNumber(){
//generates random number between 0 and 15
var number = Math.round(Math.random()*15)+1;

//checks if number is already used
for (var i = 0; i <= position.length; i++){
    if (position[i] == number){
        generateNumber();
    }

//returns number
    console.log(number);
    position.push(number);
    return number;
}
}

function mixPexeso(){
for (var i = 0; i <= 7; i++){
//sets images to their location and type their position
    var firstImage = generateNumber();
    var secondImage = generateNumber();
    var image = 'img/image-'+i+'.png';

    document.getElementById(firstImage).src = image;
    document.getElementById(secondImage).src = image;
    }
}

mixPexeso();

Экран: https://prnt.sc/l4wr1q

1 Ответ

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

Проблема:

Когда вы узнаете, что номер уже существует, вы должны разорвать цикл и вернуть результат generateNumber: 

if (position[i] == number) {
    return generateNumber();
}

Альтернативный способ:

В любом случае, функция generateNumber могла бы быть реализована лучше, удалив рекурсивные вызовы и поместив все это в IIFE для инкапсуляции: 

var generateNumber = (function() {
  var numbers = [];

  return function() {
    var number;
    do {
      number = Math.floor(Math.random() * 16);
    } while(numbers.includes(number));
    numbers.push(number);
    return number;
  }
})();

Лучший способ:

Еще лучший способ - заполнить массив числами (от 0 до 15), перемешать их, а затем каждый раз, когда вызывается функция, вы простоpop или shift число из этого массива: 

var generateNumber = (function() {
  var numbers = [];

  for(var i = 0; i < 16; i++) numbers.push(i);

  for(var i = 0; i < 16; i++) {
    var randIndex = Math.floor(Math.random() * 16);
    var temp = numbers[i];
    numbers[i] = numbers[randIndex];
    numbers[randIndex] = temp;
  }

  return function() {
    return numbers.pop();
  }
})();
...