JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="circle"></div>

CSS

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
}

.circle{
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

JavaScript

var circle = $(".circle");

var speed = 4;

var x = 0;
var y = 0;
var scale = 1;
var scaleMin = 1;
var scaleMax = 2;


var arrowLeftDown = false;
var arrowRightDown = false;
var arrowUpDown = false;
var arrowDownDown = false;
var spacebarDown = false;

function render(){

	if(arrowLeftDown){ x-=speed; }
	if(arrowRightDown){ x+=speed; }
	if(arrowUpDown){ y-=speed; }
	if(arrowDownDown){ y+=speed; }

	if(spacebarDown){ 
  
  	scale+=0.1; 
    
    if(scale > scaleMax){ 
    
    	scale = scaleMax; 
    
  	}
  
  } else { 
  
  	scale-=0.1; 
    
    if(scale < scaleMin){ 
    
    	scale = scaleMin; 
    
  	}
  
  }

	circle.css('transform','translateX(' + x + 'px) translateY(' + y + 'px) scale(' + scale + ')');
	
	
  //console.log("RENDERING X", x);
	//console.log("RENDERING Y", y);

	requestAnimationFrame(render);
  
}

requestAnimationFrame(render);


window.addEventListener("keydown", (e) => {

	console.log(e.key);

 switch (e.key) {
 case "ArrowLeft":
  arrowLeftDown=true;
  
  console.log(x);
  break;
   
 case "ArrowRight":
  arrowRightDown=true;
  break;
   
 case "ArrowUp":
  arrowUpDown=true;
  break;
   
 case "ArrowDown":
  arrowDownDown=true;
  break;
  
  case " ":
  spacebarDown=true;
  break;
   
 }
});

window.addEventListener("keyup", (e) => {
 switch (e.key) {
 case "ArrowLeft":
  arrowLeftDown=false;
  break;
   
 case "ArrowRight":
  arrowRightDown=false;
  break;
   
 case "ArrowUp":
  arrowUpDown=false;
  break;
   
 case "ArrowDown":
  arrowDownDown=false;
  break;
  
  case " ":
  spacebarDown=false;
  break;
   
 }
});