движение в четыре стороны
 

получается совсем не то, что хотелось бы.
2 рисунка перемещаются при нажатии клавиш вправо и влево, еще 2 - вверх и вниз.
Но дело в том, что перемещаются по отдельности: на клавиши w,s вниз и вверх, а на a,d - влево и вправо. при это вверх и вниз (смотря какие из клавиш нажать первыми вверх-вниз или влево-вправо, а какие вторыми)затем появляются в координатах, которые заданы на рисунком независимо от того куда и сколько раз проедет рисунок.
а задумывалось так, чтобы можно было начать ехать в любую сторону, но чтоб рисунок не появлялся в самом начале (т.е в заданных координатах)
можете ли помочь, как исправить или дать подсказку, что нужно делать?


<!--
$z=100; // координаты движения влево-вправо
$f=100; // координаты движения вниз-вверх
function keyEvent()
{status='Unicode= '+event.keyCode+ ' Символ='+String.fromCharCode(event.keyCode);
if (event.keyCode==65)
{goleft(); };
if (event.keyCode==68)
{goright(); };
if (event.keyCode==83)
{godown(); };
if (event.keyCode==87)
{goup(); };}

function goright()
{ $z=Math.abs($z)+Math.abs(1);
document.getElementById('tank2').style.left=$z;
document.getElementById('tank2').style.zIndex=22;
document.getElementById('tank4').style.zIndex=1;
document.getElementById('tank3').style.zIndex=1;
document.getElementById('tank1').style.zIndex=1;}

function goleft()
{ $z=Math.abs($z)-Math.abs(1);
document.getElementById('tank4').style.left=$z;
document.getElementById('tank4').style.zIndex=22;
document.getElementById('tank2').style.zIndex=1;
document.getElementById('tank3').style.zIndex=1;
document.getElementById('tank1').style.zIndex=1;}


function godown()
{ $f=Math.abs($f)+Math.abs(1);
document.getElementById('tank3').style.top=$f;
document.getElementById('tank3').style.zIndex=22;
document.getElementById('tank1').style.zIndex=1;
document.getElementById('tank2').style.zIndex=1;
document.getElementById('tank4').style.zIndex=1;}


function goup()
{ $f=Math.abs($f)-Math.abs(1);
document.getElementById('tank1').style.top=$f;
document.getElementById('tank1').style.zIndex=22;
document.getElementById('tank3').style.zIndex=1;
document.getElementById('tank2').style.zIndex=1;
document.getElementById('tank4').style.zIndex=1;}
//-->