«Эффект встряхивания» длится только один цикл

Question

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

var rotated = false;
var height = 24.6;
var width = 15

var points = 0;

function cl() {
  width = width / 1.1;
  height = height / 1.1;
}

function clicked() {
  document.getElementById('box').onclick = function() {
    var div = document.getElementById('box'),
      deg = rotated ? 0 : 30;

    div.style.webkitTransform = 'rotate(' + deg + 'deg)';
    div.style.mozTransform = 'rotate(' + deg + 'deg)';
    div.style.msTransform = 'rotate(' + deg + 'deg)';
    div.style.oTransform = 'rotate(' + deg + 'deg)';
    div.style.transform = 'rotate(' + deg + 'deg)';
    setInterval(res, 140);
  }
}

function res() {
  var div = document.getElementById('box'),
    deg = rotated ? 0 : 0;
  div.style.webkitTransform = 'rotate(' + deg + 'deg)';
  div.style.mozTransform = 'rotate(' + deg + 'deg)';
  div.style.msTransform = 'rotate(' + deg + 'deg)';
  div.style.oTransform = 'rotate(' + deg + 'deg)';
  div.style.transform = 'rotate(' + deg + 'deg)';
}





setInterval(gamerule, 10);

function gamerule() {
  var div = document.getElementById('box');
  div.style.width = width + "%";
  div.style.height = height + "%";

  if (width < 1) {
    width = 15;
    height = 24.6;
    document.getElementById("cont").style.pointerEvents = "none";
    setInterval(ser, 1000);
    points++;

    function ser() {
      document.getElementById("cont").style.pointerEvents = "all";
    }
  }
}

body {
  background-color: #ccc;
}

#cont {
  width: 90%;
  height: 104%;
  background-color: white;
  position: absolute;
  left: 65px;
  top: -30px;
}

#box {
  background-color: black;
  width: 15%;
  height: 24.6%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: absolute;
  top: 35.7%;
  left: 41.7%;
}

<div id="cont" onclick="cl()">
  <div id="box" onclick="clicked()">

  </div>
</div>

Answer 1

Похоже, у вас есть куча ненужного кода, поэтому я удалил его.Также у вас был setInterval вместо setTimeout.

var rotated = false;
var height = 24.6;
var width = 15

var points = 0;
document.querySelector("#box").addEventListener("click", clickFunction);
// Call this function to simulate the click
function clickFunction() {
  width = width / 1.1;
  height = height / 1.1;
  var div = document.getElementById("box"),
      deg = rotated ? 0 : 30;

  div.style.webkitTransform = "rotate("+deg+"deg)";
  div.style.mozTransform    = "rotate("+deg+"deg)";
  div.style.msTransform     = "rotate("+deg+"deg)";
  div.style.oTransform      = "rotate("+deg+"deg)";
  div.style.transform       = "rotate("+deg+"deg)";
  // You had set Interval I changed it to setTimeout
  setTimeout(res, 140);
}

 function res() {
  var div = document.getElementById("box"),
      deg = rotated ? 0 : 0;
  div.style.webkitTransform = "rotate("+deg+"deg)";
  div.style.mozTransform    = "rotate("+deg+"deg)";
  div.style.msTransform     = "rotate("+deg+"deg)";
  div.style.oTransform      = "rotate("+deg+"deg)";
  div.style.transform       = "rotate("+deg+"deg)";
}





setInterval(gamerule, 10);
function gamerule() {
  var div = document.getElementById("box");
  div.style.width           = width + "%";
  div.style.height          = height + "%";

  if (width < 1) {
    width = 15;
    height = 24.6;
    document.getElementById("cont").style.pointerEvents = "none";
    setInterval(ser, 1000);
    points++;
    function ser() {
        document.getElementById("cont").style.pointerEvents = "all";
    }
  }
}

body{
  background-color:#ccc;
}
#cont{
  width:90%;
  height:104%;
  background-color:white;
  position:absolute;
  left:65px;
  top:-30px;
}
#box{
  background-color:black;
  width:15%;
  height:24.6%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position:absolute;
  top:35.7%;
  left:41.7%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Clicker</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="cont">
      <div id="box">

      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Answer 2

Вам необходимо изменить присвоение deg в пределах cl, потому что в данный момент оно всегда установлено на 0:

deg = rotated ? 0 : 30; // Or whatever value you want...

Затем вам нужно инвертировать значение rotated

rotated = !rotated;

Надеюсь, я правильно понял вашу проблему ...

var rotated = false;
var height = 24.6;
var width = 15

var points = 0;
var interval;

function cl() {
  width = width / 1.1;
  height = height / 1.1;
}

function clicked() {
    var div = document.getElementById('box'),
      deg = rotated ? 0 : 30;

    div.style.webkitTransform = 'rotate(' + deg + 'deg)';
    div.style.mozTransform = 'rotate(' + deg + 'deg)';
    div.style.msTransform = 'rotate(' + deg + 'deg)';
    div.style.oTransform = 'rotate(' + deg + 'deg)';
    div.style.transform = 'rotate(' + deg + 'deg)';
    if (interval == null) {
      interval = setInterval(res, 140);
    }
}

function res() {
  var div = document.getElementById('box'),
    deg = rotated ? 0 : 45;
  rotated = !rotated;
  div.style.webkitTransform = 'rotate(' + deg + 'deg)';
  div.style.mozTransform = 'rotate(' + deg + 'deg)';
  div.style.msTransform = 'rotate(' + deg + 'deg)';
  div.style.oTransform = 'rotate(' + deg + 'deg)';
  div.style.transform = 'rotate(' + deg + 'deg)';
}





setInterval(gamerule, 10);

function gamerule() {
  var div = document.getElementById('box');
  div.style.width = width + "%";
  div.style.height = height + "%";

  if (width < 1) {
    width = 15;
    height = 24.6;
    document.getElementById("cont").style.pointerEvents = "none";
    setInterval(ser, 1000);
    points++;

    function ser() {
      document.getElementById("cont").style.pointerEvents = "all";
    }
  }
}

body {
  background-color: #ccc;
}

#cont {
  width: 90%;
  height: 104%;
  background-color: white;
  position: absolute;
  left: 65px;
  top: -30px;
}

#box {
  background-color: black;
  width: 15%;
  height: 24.6%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: absolute;
  top: 35.7%;
  left: 41.7%;
}

<div id="cont" onclick="cl()">
  <div id="box" onclick="clicked()">

  </div>
</div>