Всем привет, не могу реализовать бинарный поиск для небольшой игры в угадай число)
дело в том что когда я нажимаю кнопку больше прибавляется половина от изначального числа ,а когда нажимаю меньше вычитает половину из уже прибавленного числа , а мне нужно чтобы он вычитал из промежутка между начальным числом и которое уже прибавленное и так же с кнопкой меньше) помогите кто может
вот пример, запустите и попробуйте
window.onload = function(){
var wrapInner = document.querySelector('.wrap__inner');
var btn = document.querySelector('.btn');
var q = document.querySelector('.q');
var big = document.createElement('h3');
var small = document.createElement('h3');
var res = 50;
btn.onclick = function(){
q.innerHTML = res;
this.style.display = 'none';
big.classList.add('big');
big.innerHTML = 'Больше';
small.classList.add('small');
small.innerHTML = 'Меньше';
wrapInner.appendChild(big);
wrapInner.appendChild(small);
}
small.onclick = function(){
var middle = search(Number(q.innerHTML),0);
q.innerHTML = middle;
if(q.innerHTML > middle){
search(middle,0);
}
}
big.onclick = function(){
var middle = search(Number(q.innerHTML),100);
q.innerHTML = middle;
}
function search(start,end,middle){
middle = Math.floor((start + (end - start)/2));
return middle;
}
}
.wrap{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.btn{
background: black;
padding: 10px;
width: 200px;
color: white;
text-align: center;
border-radius: 5px;
cursor: pointer;
}
.wrap__inner{
display: flex;
align-items: center;
}
.big{
background: black;
padding: 10px;
width: 200px;
color: white;
text-align: center;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
.small{
background: black;
padding: 10px;
width: 200px;
color: white;
text-align: center;
border-radius: 5px;
cursor: pointer;
}
<div class="wrap">
<h1>Загадайте число от 0 до 100 и нажмите на кнопку!</h1>
<div class="btn">Нажимай!</div>
<hr>
<h2 class="q"></h2>
<div class="wrap__inner"></div>
</div>