Molder84

function getCurrentOffset(s) {
  return s.split(",", 2).map((n) => Number(n.replace(/\D/g, "")));
}
function right2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left+30}px,${top}px)`;
}
function bottom2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left}px,${top+30}px)`;
}

<button data-steps="1,0">right</button>
<button data-steps="-1,0">left</button>
<button data-steps="0,1">down</button>
<button data-steps="0,-1">up</button>
<button data-steps="1,1">right down</button>
<button data-steps="0,-2">double up</button>

const coord = [ 0, 0 ];
const stepSize = 30;

const box = document.querySelector('#box');
const buttons = document.querySelectorAll('[data-steps]');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.dataset.steps.split(',').forEach((n, i) => coord[i] += n * stepSize);
  box.style.transform = `translate(${coord.map(n => `${n}px`).join(',')})`;
}