CSS
.container{
transform: scale(0.9);
height:200px;width:200px;display:inline-block;border:10px solid #000;position:absolute;top:14%;left:20%}.container .box{-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;transition:all .3s ease;-webkit-transform-origin:bottom right;
-moz-transform-origin:bottom right;
-ms-transform-origin:bottom right;
-o-transform-origin:bottom right;transform-origin:bottom right;pointer-events:none;height:100%;background:#777;text-align:center;text-transform:uppercase;color:#fff;line-height:200px;font-size:3rem}.container .green{background:#47B82F}.container .red{background:#C90A0A}
JAVASCRIPT
var container = document.getElementById('container');
var box = document.getElementById('box');
var turn = true;
var angle = 0;
var spin;
var score = 0;
container.addEventListener('click', function(){
if(turn){
box.innerText = 'play';
box.classList.remove('red', 'green')
spin = setInterval(function(){
angle += 45;
box.style.transform = 'rotate('+angle+'deg)';
}, 50);
}
else{
clearInterval(spin);
if(angle%360 == 0){
box.innerText = 'win';
box.classList.add('green');
document.title = ++score + ' Points';
}
else{
box.innerText = 'lost';
box.classList.add('red');
}
}
turn = !turn;
});
/*
var offset = 1000;
var random;
var play = true;
var change_click_offset = setInterval(function(){
if(play){
random_click = setInterval(function(){
container.click();
console.log("++++ : " + offset + " - " + random);
}, offset);
}
else{
console.log("---- : " + offset + " - "+random);
clearInterval(random_click);
offset = Number.parseInt(Math.random()*(1000));
if(offset < 100) offset *= 10;
}
play = !play;
}, 500);
*/
