내 사각형 사각형 움직임

Question

직사각형으로 이동하고 싶습니다. 줄 끝까지 도달하면 줄 바꿈을해서 다음 줄 시작 부분에 놓습니다. 사각형은 줄 바꿈을 만들기 위해 잘 조정되지 않습니다. 어떤 아이디어?

<script type="text/javascript"><![CDATA[ 
    var rect = document.getElementById('player'); 
    var x = rect.getAttribute('x')*1, 
     y = rect.getAttribute('y')*1; 
    setInterval(move, 30); 

    function move() 
    { 
     if (rect.getAttribute('x') < 500){ 
      rect.x.baseVal.value = ++x; 
     } 
     else if (rect.getAttribute('x') >= 500){ 
      rect.x.baseVal.value = x-250; 
      rect.y.baseVal.value = y+250; 
     } 
    } 
    ]]></script> 

감사 :이 제 기능입니다!

Answer 1

요소에서 값을 가져 오는 것이 불필요하게 비용이 많이 들며, 사용자의 경우 값이 너무 늦게 설정되거나 설정되어있는 것 같습니다. 대신, 각 루프에 대한 값을 얻는 x 및 y 대한 추적 :

var rect = document.getElementById('player'); 
var x = rect.getAttribute('x')*1, 
    y = rect.getAttribute('y')*1; 
var pos_x = 0, pos_y = 0; 
setInterval(move, 30); 

function move(i) 
{ 
    pos_x++; 
    if (pos_x < 500){ 
     rect.setAttribute('x', pos_x); 
    } 
    else { 
     pos_y +=10 
     pos_x = 0; 
     rect.setAttribute('x', pos_y); 
     rect.setAttribute('y', pos_y); 
    } 
}​ 

http://jsfiddle.net/gMwMb/