А эти извращения с массивами принципиальны? И если да, то почем всё-таки не сделать как-то так:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#wrapper{
position: relative;
border: 2px solid #000000;
width: 500px;
height: 400px;
}
#test{
width: 100px;
height: 100px;
position: absolute;
background: #ff0000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="test"></div>
</div>
<script type="text/javascript">
var direction = [[1,1],
[1,-1],
[-1,-1],
[-1,1]];
var direct = 0;
var directionDif = [1,1];
function move() {
var elem = document.getElementById('test');
var left = 0;
var top = 0;
function frame() {
var currentCoord = [left, top];
var nextCoord = currentCoord.map(function(value, index) {
return value + directionDif[index];
});
elem.style.left = nextCoord[0] + 'px';
elem.style.top = nextCoord[1] + 'px';
left = nextCoord[0];
top = nextCoord[1];
var x = 0;
var y = 1;
if ( nextCoord[y] >= 300 ) {
directionDif[y] = -1;
}
if ( nextCoord[x] >= 400 ) {
directionDif[x] = -1;
}
if ( nextCoord[y] <= 0 ) {
directionDif[y] = 1;
}
if( nextCoord[x] <= 0 ) {
directionDif[x] = 1;
}
}
var timer = setInterval(frame, 1);
}
move();
</script>
</body>
</html>
?