JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<!-- <span id="up" class="btn">up</span>
<span id="down" class="btn">down</span>
<span id="left" class="btn">left</span>
<span id="right" class="btn">right</span>
<span id="plus" class="btn">+</span>
<span id="minus" class="btn">-</span>
<span id="rotate" class="btn">rotate</span> -->
<div id="stage">
  <div id="square"></div>
</div>

CSS

.btn {
  cursor: pointer;
  border: 1px solid #aaa;
  background-color: cyan;
  border-radius: 50%;
  padding: 10px;
}

#square {
  background-color: black;
  position: absolute;
  /*top: 50%;
  left: 50%;*/
  /*transform: rotate(60deg);*/
  transition: all 0.5s;
}

#stage {
  margin: 20px;
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #eee;
}

JavaScript

/*
var up = document.getElementById("up");
var down = document.getElementById("down");
var left = document.getElementById("left");
var right = document.getElementById("right");
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
var rotate = document.getElementById("rotate");
*/
var square = document.getElementById("square");
var top = 0;
var lft = 0;
var width = 100;
var height = 100;
var step = 20;
var degr = 0;
var draw = function() {
  square.style.left = lft + 'px';
  square.style.top = top + 'px';
  square.style.width = width + 'px'
  square.style.height = height + 'px'
  square.style.transform = 'rotate(' + degr + 'deg)'
}
setInterval(draw, 100)
document.onkeyup = function(e) {
  if (e.key == "ArrowUp") {
    top -= step;
  } else if (e.key == "ArrowDown") {
    top += step;
  } else if (e.key == "ArrowLeft") {
    lft -= step;
  } else if (e.key == "ArrowRight") {
    lft += step;
  } else if (e.key == " ") {
    degr += 30;
  } else if (e.key == "=") {
    width += step;
    height += step;
  } else if (e.key == "-") {
    width -= step;
    height -= step;
  }
  console.log(e);

}

/* plus.onclick = function() {
  width += step;
  height += step;
}
minus.onclick = function() {
  if (width <= step) {
    return false;
  }
  width -= step;
  height -= step;
} 
 up.onclick = function() {
  top -= step;
}
left.onclick = function() {
  lft -= step;
}
right.onclick = function() {
  lft += step;
}
down.onclick = function() {
  top += step;
}
rotate.onclick = function() {
  degr += 30;
}
 */