Div który wykonuje obrót musi za kazdym razem zrobić...

Question

Div który po kliknięci musi wykonąć obrót 360 stopni + wartość z array  

Zawatorść array liczby (54 liczb) oznaczają o ile ma się obrócić div po kliknięciu oczywiście losowo.

items = [
            '0', '7', '13.5', '20', '26.5', '33.5', '40', '47', '53.5', '60',
            '66.5', '73.5', '80', '87', '93.5', '100', '107', '113.5', '120',
            '127','133.5', '140.2', '147', '153.5', '160.5', '167', '173.5',
            '180','187', '193.5', '200', '207', '213.5', '220', '227', '233.5',
            '240','247', '253.5', '260', '267', '273.5', '280', '287', '293.5', 
            '300', '307', '313.5', '320', '327', '333.5', '340', '347', '353.5'
        ];

Także, jeśli wylosuje 0, a przy następnym losowaniu znowu będzie 0 lub sąsiednia liczba (do 10 miejsc) to zrobi pełen obrót + item z array. 

Answer 1

Wystarczy dodać event na divie, za każdym kliknięciem zwiększasz stopnie o 360 + x. Rotacje można prosto wykonać używając właściwości css

transform: rotate()

w lokalnych stylach.

Demo

Mam nadzieję, że pomogłem

const items = [
'0', '7', '13.5', '20', '26.5', '33.5', '40', '47', '53.5', '60',
'66.5', '73.5', '80', '87', '93.5', '100', '107', '113.5', '120',
'127','133.5', '140.2', '147', '153.5', '160.5', '167', '173.5',
'180','187', '193.5', '200', '207', '213.5', '220', '227', '233.5',
'240','247', '253.5', '260', '267', '273.5', '280', '287', '293.5', 
'300', '307', '313.5', '320', '327', '333.5', '340', '347', '353.5'
];

const div = document.querySelector('.rotate');
let degs = 0;

div.addEventListener('click', ({target}) => {
    degs += parseInt(items[Math.floor(Math.random()*items.length)]) + 360;
    target.style.transform = `rotate(${degs}deg)`;
});

 

Comments

Mam jeszcze jedno pytanie odnośnie rotacji. Postanowiłem zrobić jednak na automatyczny obrót. Problem w tym, że div obraca się raz w prawo, raz w lewo. Chciałbym, aby div obracał się tylko w prawo. Jakiś kod który mógłby to naprawić ?

Edit: 

degs += parseInt(items[Math.floor(Math.random()*items.length)]) + 360;

Oczywiście dzięki temu kręci się tylko w prawo, jednakże już nie zwraca odpowiednich wyników z items. Do items są przypisane odpowiednie wartości które muszą zostać zwrócone.

Dla przykładu: 

//alert wyrzuci
if(degs == 0){
 alert("Wylosowano:  Zabawkę");
}

 

---

Wartość, którą losujesz możesz przypisać do zmiennej jak na załączonym obrazku :)

let item;

div.addEventListener('click', ({target}) => {
    item = parseInt(items[Math.floor(Math.random()*items.length)])
    degs += item + 360;
    target.style.transform = `rotate(${degs}deg)`;
});

w takim wypadku poniższy kod zadziała

if(item === 0){
 alert("Wylosowano:  Zabawkę");
}