onkeydown Event

[SpiriKoN]

Хочу чтобы блок двигался

#showKey
		{
		left: 50px;
			top: 50px;
			height: 40px;
			width: 50px;
			background-color: red;
			position: relative;
			display: block;
		}

<div id="blocks" onkeypress="left(e)"></div>

function(e) {
  e = e || event;
function(e) {
var block =  document.getElementById("blocks")
  switch(e.keyCode) {
  case 37: // влево
    block.style.left += 20+'px' ;
    return false;
  case 38: // вверх
    block.style.top -= 20+'px' ;
    return false;
  case 39: // вправо
    block.style.left -= 20+'px' ;
    return false;
  case 40: // вниз
    block.style.top += 20+'px' ;
    return false;
  }
};
}

но у меня не выходит что не так?
Как правильно написать?

[рони]

SpiriKoN,
клик на документ -- создать переменные направлений и к ним прибавлять дельту
block.style.left -= 20
var left = 0;
...
case 39: left -= 20;
block.style.left = left+'px' ;

[рони]

SpiriKoN,
Canvas. Как сделать или вообще нельзя? Вращение рандомизированно изменяемого объекта.

[SpiriKoN]

document.body.onkeydown = function (e) {
var left = 0;
var top = 0;
var block = document.getElementById("blocks");
e = e || event;

switch(e.keyCode) {
case 37: // влево
left -= 20;
block.style.left = left+'px' ;
return false;
case 38: // вверх
top -= 20;
block.style.top = top+'px' ;
return false;
case 39: // вправо
left += 20;
block.style.left = left+'px' ;
return false;
case 40: // вниз
top =top+ 20;
block.style.top = top+'px' ;
return false;
}
}
написал но все равно не то. Как правильно?

[SpiriKoN]

var left = 0;
var block = document.getElementById("blocks");
document.body.onkeydown = function (e) {
e = e || event;
switch(e.keyCode) {
case 37: // влево
left -= 20;
block.style.left = left+'px' ;
return false;
case 39: // вправо
left += 20;
block.style.left = left+'px' ;
return false;
но так то что мне нужно
Спасибо!

[рони]

var left = 0;
var top = 0;

это должно быть вне функции

и форматируйте свой код - зачем глаза ломать