<div id="screen">
  <div id="bar"></div>
  <div class="keys">
    <strong>Use Keys A or D to move (Left or Right)</strong>
  </div>
</div>

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
#screen {
  background-color: #222;
  width: 100%;
  height: 100%;
  position: relative;
}

#bar {
  position: absolute;
  bottom: 20px;
  width: 100px;
  height: 10px;
  background-color: #d6d6d6;
  border-radius: 10px;

}
.keys{
  color:#FFF;
  padding:10px;
}

const bar = document.querySelector('#bar');
const init = function(){
  bar.style.left = `${(document.body.clientWidth / 2) - 50}px`;
}
const onKeyPress = function(event){

   if(event.key==="a"){move(-10);}
   if(event.key==="d"){move(10);}
}
const move = function(direction){
  bar.style.left = `${parseInt(bar.style.left) +direction}px`
}
document.addEventListener("keydown",onKeyPress);
init();