Блог

Главная - Вопросы по программированию - продолжать выполнение функции при наведении курсора мыши

продолжать выполнение функции при наведении курсора мыши

#javascript #html

#javascript #HTML

Вопрос:

 var money = 10
var generators = []
var lastUpdate = Date.now()


for (let i = 0; i < 10; i   ){
  let generator = {
    cost:Math.pow(Math.pow(10,i),i)*10,
    bought:0,
    amount:0,
    mult:1
  }
  generators.push(generator)
}



function format (amount){
    let power = Math.floor(Math.log10(amount))
    let mantissa = amount / Math.pow(10 , power)
    if (power < 3) { return amount.toFixed(2)}
    return mantissa.toFixed(2)   "e"   power
}




function buyGenerator(i){

  let g = generators[i - 1]
  if(g.cost > money) return
  money -= g.cost 
  g.amount  = 1
  g.bought  = 1
  g.mult *= 1.05
  g.cost *= 1.6
}

function updateGUi (){
  document.querySelector("#currency").textContent = "you have $"   format(money)
  for (let i = 0; i < 10; i   ){
    let g = generators [i]
    document.getElementById("gen"  (i 1)).innerHTML = "Amount: "   format(g.amount)   "<br> Bought: "   g.bought   "<br> Multiplier: "   format(g.mult)  "X <br> Cost: "   format(g.cost)
    if(g.cost > money) document.getElementById("gen" [i 1]).classList.add("locked")
    else document.getElementById("gen" [i 1]).classList.remove("locked")
  }
}

function productloop (diff){
  money  = generators[0].amount * generators[0].mult * diff
  for (let i = 1; i < 10; i   ){
    generators[i - 1].amount  = generators[i].amount * generators[i].mult * diff / 5
  }
}

function mainloop (){
  var diff = (Date.now() - lastUpdate)/1000
  productloop(diff)
  updateGUi()
  lastUpdate = Date.now()

}

setInterval(mainloop, 50) 

updateGUi()  
 * {
    box-sizing: border-box;
}

.generator {
   border: 2px solid black;
   background-color: rgb(134, 230, 134);
   text-align: center;
   width: 300px;
   padding: 15px;
   font-size: 1.3em;
   cursor: pointer;
   user-select: none;

}

.generators-container {
    display: flex;
    width: 600px;
    flex-wrap: wrap;
    margin: auto;
}

#currency {
    margin: 40px;
    font-size: 2em;
    text-align: center;

}

.locked {
    background-color:rgb(221, 63, 63);
}

@media (max-width : 7in){
    .generators-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-wrap: nowrap;
        margin: auto;
    }

    .generator {
        border: 2px solid black;
        background-color: rgb(134, 230, 134);
        text-align: center;
        width: 100%;
        padding: 15px;
        font-size: 1.3em;
        cursor: pointer;
        user-select: none;
     
     }

     .locked {
        background-color:rgb(221, 63, 63);
    }
}  
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
   <div id="currency"> you have 0$</div>
   <div class="generators-container">
     <div class="generator" id="gen1" onmousedown="buyGenerator(1)"></div>
     <div class="generator" id="gen2" onmousedown="buyGenerator(2)"></div>
     <div class="generator" id="gen3" onmousedown="buyGenerator(3)"></div>
     <div class="generator" id="gen4" onmousedown="buyGenerator(4)"></div>
     <div class="generator" id="gen5" onmousedown="buyGenerator(5)"></div>
     <div class="generator" id="gen6" onmousedown="buyGenerator(6)"></div>
     <div class="generator" id="gen7" onmousedown="buyGenerator(7)"></div>
     <div class="generator" id="gen8" onmousedown="buyGenerator(8)"></div>
     <div class="generator" id="gen9" onmousedown="buyGenerator(9)"></div>
     <div class="generator" id="gen10" onmousedown="buyGenerator(10)"></div>
   </div>
    <script src="index.js"></script>
  </body>
</html>

как я могу продолжать выполнять функцию buyGenerator, когда я удерживаю click и у меня есть деньги для этого? он должен работать на телефонах, чтобы обычно я сохранял его в локальном хранилище, но здесь я продолжал получать ошибки из-за этого, по какой-то причине все работает, было бы намного лучше, если бы я мог просто удерживать щелчок, чтобы покупать много обновлений, а не нажимать непрерывно

это для инкрементной игры, которую я создаю

Комментарии:

1. Было бы очень круто, если бы в вашем исполняемом фрагменте были вещи, на которые я мог бы щелкнуть.

2. Также generators не определено

3. Вы могли бы onmousedown запустить быстрый setinterval, а затем onmouseup отменить его.

4. Вероятно, вам следует реализовать надлежащий основной игровой цикл. Это делается с помощью requestAnimationFrame . Переданная вами функция цикла будет вызываться примерно 60 раз в секунду на настольных компьютерах. Далее вам понадобится переменная состояния, которая устанавливается при удержании курсора мыши нажатой и сбрасывается в onmouseleave или onmouseup . Внутри вашей функции цикла вы проверяете состояние var и действуете соответствующим образом.

5. Вот пример кода: jsfiddle.net/87m13tdL

Ответ №1:

Основная идея заключается в использовании интервала или тайм-аута. При наведении курсора мыши запустите таймер. Прослушайте наведение курсора мыши и отмените его.

 const generators = [
  { cost: 100, amount: 0, bought: 0, mult: 1, cost: 1 },
  { cost: 200, amount: 0, bought: 0, mult: 1, cost: 1 },
  { cost: 300, amount: 0, bought: 0, mult: 1, cost: 1 }
];
let money = 100000;

function buyGenerator(i) {
  let g = generators[i]
  if (g.cost > money) return
  money -= g.cost
  g.amount  = 1
  g.bought  = 1
  g.mult *= 1.05
  g.cost *= 1.6
  console.log(money);
}

let activeTimer = null;
const wrapper = document.querySelector(".wrapper");
wrapper.addEventListener('mousedown', function (evt) {
  const gen = evt.target.closest('[data-generator]');
  if (gen) {
    const genId = gen.dataset.generator;
    activeTimer = window.setInterval(function () {
      buyGenerator(genId);
    }, 300);
  }
});
window.addEventListener('mouseup', function () {
  if (activeTimer) {
    window.clearTimeout(activeTimer);
    activeTimer = null;
  }
});  
 <div class="wrapper">
  <div class="generator" data-generator="0">Gen 1</div>
  <div class="generator" data-generator="1">Gen 2</div>
  <div class="generator" data-generator="2">Gen 3</div>
</div>

Ответ №2:

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

 <script type="text/javascript">
    var mousedown = false;
    var counters  = {1:1,2:1};
    var loop;
    var selected = 1;
    function  btnDown(a){
        selected = a;
        mousedown=true;
        loop = setInterval(()=>{
                counters[selected] =1;
                document.getElementById("btn" selected).innerHTML = counters[selected];
            },100);
    }
    function btnUp(){
        mousedown = false;
        clearInterval(loop);
}

</script>

<button type="button" id="btn1" onmousedown="btnDown(1)" onmouseup="btnUp(1)">a</button>
<button type="button" id="btn2" onmousedown="btnDown(2)" onmouseup="btnUp(2)">a</button>

Я надеюсь, что это помогло ^^
редактировать: не удалось задать параметры функции обратного вызова, поэтому я создал «выбранный» var