JS - FortuneWheel - PullRequest
Новая
       23

JS - FortuneWheel

0 голосов
/ 30 ноября 2018

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

До сих пор я мог только реализовать основы, но я надеюсь, что кто-то может помочь мне реализовать весь процесс, так как я не могу сейчас идти дальше.

КАК СДЕЛАТЬ КОЛЕСО, ВРАЩАЮЩЕЕСЯ В СЕРВЕРНЫЕ ВРЕМЕНИ, ЗАКОНЧИВШИЕСЯ С НАЗНАЧЕНИЕМ?

let element = document.getElementById("wheel");
let region = new ZingTouch.Region(element);

let currentAngle = 0, // this is the current angle of the wheel by the rotate gesture
  targetAngle = 0; // blue field is the target where the wheel should stop
let minimumAngle = 30, // minimumAngle to make the wheel spinning
  rotatedAngle = 0, // total spinned angle of the wheel by the rotate gesture
  spinning = false

setInterval(() => {
  rotatedAngle = 0;
}, 200)

region.bind(element, 'rotate', function(e) {
  if (rotatedAngle > minimumAngle && rotatedAngle > 180) {
    spinning = true;
    document.getElementById("spinning").innerHTML = "spinning = true"
    // HOW TO MAKE WHEEL ROTATING A SERVERAL TIMES ENDING WITH THE targetAngle ? 
  } else if (!spinning) {
    currentAngle += e.detail.distanceFromLast;
    rotatedAngle += e.detail.distanceFromLast;
    element.style.transform = 'rotate(' + currentAngle + 'deg)';
  }
})
#wheel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/zingtouch/1.0.6/zingtouch.min.js"></script>
<img id="wheel" src="https://reel-mkt.com/templates/fortune_reel_lp/img/wheel.png">
<p id="spinning">spinning = false</p>

1 Ответ

0 голосов
/ 01 декабря 2018

Вот как я бы это сделал:

  1. Мне нужно событие, подобное "click", чтобы начать вращаться
  2. Я вычисляю targetAngle как случайный угол:targetAngle = currentAngle + Math.random() * 360 + minimumAngle;
  3. Я использую requestAnimationFrame для анимации.
  4. Я рассчитываю скорость как 1/10 расстояния между targetAngle и currentAngle
  5. Я не использую ZingTouch, как вы и предполагали;Я тоже не пользуюсь rotatedAngle.

Надеюсь, это то, что вам нужно. 

let element = document.getElementById("wheel");
/*let region = new ZingTouch.Region(element);*/

let currentAngle = 0, // this is the current angle of the wheel by the rotate gesture
  targetAngle = 0; // blue field is the target where the wheel should stop
let minimumAngle = 30, // minimumAngle to make the wheel spinning
  //rotatedAngle = 0, // total spinned angle of the wheel by the rotate gesture
  spinning = false;

let rid = null;

element.addEventListener("click", () => {
  targetAngle = currentAngle + Math.random() * 360 + minimumAngle;

  if (spinning) {
    spinning = false;
     if (rid) {
      cancelAnimationFrame(rid);
      rid = null;
    }
  } else {   
    spinning = true;
    Animation();
  }
  
  is_spinning.innerHTML = spinning;
});

function Animation() {
  rid = requestAnimationFrame(Animation);
  if (currentAngle <= targetAngle) {
    let speed = (targetAngle - currentAngle)/10;
    currentAngle += speed;
    element.style.transform = `rotate(${currentAngle}deg)`;
        if(speed <= 1){// if the speed is < 1 stop the wheel
          cancelAnimationFrame(rid);
          spinning = false;
        }
    
  } else {//stop the wheel
    cancelAnimationFrame(rid);
    spinning = false;
  }
  
  is_spinning.innerHTML = spinning;
}
#wheel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20%;
}
<img id="wheel" src="https://reel-mkt.com/templates/fortune_reel_lp/img/wheel.png">
<p>spinning = <span  id="is_spinning">false</span></p>

** Наблюдение "": Ваш вопрос помечен как canvas, но в своем коде вы поместили изображение в центр экрана,Поэтому я предположил, что вы хотите повернуть изображение.

...