Назначение клавиш пользователем

(function(){ 
 
const bubu = document.getElementById('bubu'); 
let left = 0; //Изначально позиция 0 
 
//Кнопки, нажатие которых будем сравнивать перед действием 
let RMove = 'ArrowRight';  
let LMove = 'ArrowLeft'; 
 
document.addEventListener('keyup', function(e){ 
  //Создаем регулярные выражения, с которыми будем сравнивать нажатую кнопку,  
  //Которую можно получить через "e.key" 
  let RMoveKey = new RegExp( RMove, 'ig' ); 
  let LMoveKey = new RegExp( LMove, 'ig' ); 
   
  //При нажатии кнопки сравнили - если совпало с заранее сохраненной кнопкой -  
  //Обновляем значение позиции left и сдвигаем куда надо. 
  if( e.key.match( RMoveKey ) ) { 
    left += 50; 
    bubu.style.left = left + 'px'; 
  } 
  if( e.key.match( LMoveKey ) ) { 
    left -= 50; 
    bubu.style.left = left + 'px'; 
  } 
}); 
 
document.getElementById('ChangeR').addEventListener('keyup', function(e){ 
  //А при введении новой кнопки, просто обновляем изначальное значение  
  //Переменной, в которой должна храниться сравниваемая кнопка. 
  RMove = e.key; 
  document.querySelector('#ChangeR + span').innerHTML = 'Теперь персонаж будет передвигаться направо с помощью кнопки <span style="color: red;">' + e.key + '</span>'; 
}); 
 
document.getElementById('ChangeL').addEventListener('keyup', function(e){ 
  LMove = e.key;   
  document.querySelector('#ChangeL + span').innerHTML = 'Теперь персонаж будет передвигаться налево с помощью кнопки <span style="color: red;">' + e.key + '</span>'; 
}); 
 
})();

/* Ненужная декорация */ 
#bubu {width: 50px; height: 50px; background: orange; border-radius: 50%; padding-top: 20px; text-align: center; box-sizing: border-box; position: absolute;}

<div id="bubu">o_o</div> 
 
<br><br><br><br> 
 
<input id="ChangeR" placeholder="Движение направо"><span></span><br><br> 
<input id="ChangeL" placeholder="Движение налево"><span></span>