Возврат товара обратно в массив

Question

Попытка решить проблему капусты, волка и козы. Мой игровой план состоит в том, чтобы создать два массива, один из которых представляет собой левую сторону берега реки, а другой - правую. В принципе, если два элемента в массиве угрожают друг другу, например, если в левом массиве содержится коза и капуста, это не позволит переместить волка. У меня установлены мои массивы, но когда я вызываю функцию, чтобы вернуть элемент (капуста, волк, коза), он не помещает его обратно в массив leftSide. Я использую splice(), чтобы добавить элемент обратно. Это проблема? Вот то, что я пытаюсь сделать:

function returnCabbage(){ 
    $("#cabbage2").hide(); 
    $("#cabbage").show(); 
    leftBank.splice(0, 1, cabbage.name); 
    rightBank.splice(0, 1); 

    console.log(leftBank.length); 

    console.log(cabbage.name + " on left bank: " + isOnLeftBank(cabbage.name)); 
    console.log(cabbage.name + " on right bank: " + isOnRightBank(cabbage.name)); 
} 

function sendCabbage(){ 
    $("#cabbage2").show(); 
    $("#cabbage").hide(); 
    leftBank.splice(0, 1); 
    rightBank.splice(0, 1, cabbage.name); 

    console.log(rightBank.length); 

    console.log(cabbage.name + " on left bank: " + isOnLeftBank(cabbage.name)); 
    console.log(cabbage.name + " on right bank: " + isOnRightBank(cabbage.name)); 
} 

Есть более подробную информацию здесь: https://jsfiddle.net/Amidi/m7vb3eoj/6/ (изображения не будет загружать и формат страницы находится далеко).

Answer 1

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

/* true for left false for right */ 
 
var river = { 
 
    cabbage: true, 
 
    wolf: true, 
 
    goat: true 
 
} 
 

 
function sendItem(name) { 
 
    river[name] = !river[name]; 
 
    setState(); 
 
}; 
 

 
function setState() { 
 
    Object.keys(river).forEach(function(k) { 
 
    if (river[k] === true) { 
 
     $('.left .' + k).show(); 
 
     $('.right .' + k).hide(); 
 
    } else { 
 
     $('.left .' + k).hide(); 
 
     $('.right .' + k).show(); 
 
    } 
 
    }); 
 
} 
 

 
setState();

.river, 
 
.btn-group { 
 
    display: flex; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 50%; 
 
    flex-flow: row; 
 
    justify-content: space-between; 
 
} 
 
.left, 
 
.right { 
 
    display: flex; 
 
    flex-flow: column; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="river"> 
 
    <div class="left"> 
 
    <div class="cabbage">Cabbage</div> 
 
    <div class="wolf">Wolf</div> 
 
    <div class="goat">Goat</div> 
 
    </div> 
 

 
    <div class="right"> 
 
    <div class="cabbage">Cabbage</div> 
 
    <div class="wolf">Wolf</div> 
 
    <div class="goat">Goat</div> 
 
    </div> 
 
</div> 
 
<div class="btn-group"> 
 
    <button type="button" onclick="sendItem('cabbage')">Send Cabbage</button> 
 
    <button type="button" onclick="sendItem('wolf')">Send Wolf</button> 
 
    <button type="button" onclick="sendItem('goat')">Send Goat</button> 
 
</div>