runner

by Nikhil

HTML

<div id="target" class="wrapper">
  
</div>

CSS

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

body {
  display:flex;
  justify-content:center;
  align-items:center;
  background:#ed1f1f;
}

.wrapper{
  width:20px;
  height:20px;
  border-radius:2px;
  background:white;
  transition:transform .5s ease;
  /* animation: defanim 1s ease infinite; */
}

.wrapper:hover {
  cursor: pointer;
  animation: hovanim 1s ease infinite;
}

@keyframes defanim {
  0% {
  }
  50% {
    transform:scale(2);
  }
  100% {
  }
}

@keyframes hovanim {
  0% {
  }
  50% {
    transform:scale(20) rotatez(90deg);
  }
  100% {
  }
}

JavaScript

let target;
const move = {
 vertical:0,
 horizontal:0,
 acceleration: 5,
}

setTimeout(()=>{
	target = document.getElementById('target');
},1000)


window.addEventListener('keydown',e=> { 
 const moveUnit = 20;
 switch(e.key) {
  case 'ArrowUp':
  move.vertical-=moveUnit;
  break;
  case 'ArrowDown':
  move.vertical+=moveUnit;
  break;
  case 'ArrowRight':
  move.horizontal+=moveUnit;
  break;
  case 'ArrowLeft':
  move.horizontal-=moveUnit;
 	break;
 }
 target.style.transform = `translateY(${move.vertical}px) translateX(${move.horizontal}px)`; 
})