requestAnimationFrame을 사용한 게임 애니메이션

Question

requestAnimFrame을 사용하여 간단하게 게임을 만들려고했지만 애니메이션이 작동하지 않아 그 이유를 모르겠습니다. 어쩌면 도움이 될지도 몰라? 여기에 코드입니다 :

// requestAnimationFrame() shim by Paul Irish 
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 
window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(/* function */ callback, /* DOMElement */ element){ 
       window.setTimeout(callback, 1000/60); 
      }; 
})(); 

//Create canvas 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 640; 
canvas.height = 480; 
document.body.appendChild(canvas); 

// The main game loop 
var lastTime; 

function main() { 

    var now = Date.now(); 
    var dt = now - lastTime; 

    draw(); 
    update(dt); 

    lastTime = now; 
    requestAnimFrame(main); 
} 

main(); 

function ball(){ 
    this.radius = 5; 
    this.x = 300; 
    this.y = 50; 
    this.vx = 200; 
    this.vy = 200; 
    this.ax = 0; 
    this.ay = 0; 
    this.color = "red"; 
    this.draw = function(){ 
     ctx.beginPath(); 
     ctx.fillStyle = this.color; 
     ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); 
     ctx.fill(); 
    }; 
} 

function draw() { 
    newBall = new ball(); 
    newBall.draw(); 
} 

function update(dt) { 
    newBall = new ball(); 
    newBall.x += newBall.vx * dt; 
} 

update(dt)에서 기능 볼이 이동 나던 이유를 모르겠다는 ...

Answer 1

코드에서 몇 가지 오류가 있습니다

1. 당신은 ' 함수 밖에서 변수를 다시 초기화하려면 항상 이니셜 라이저 (즉시 호출 된 함수)를 사용하십시오.
2. kalley가 언급 한 것처럼 전역 개체를 사용하는 대신 모든 그리기의 시작 위치에 새 공을 만듭니다.
3. 공이 올바르게 그려지더라도 Date.now()가 초 단위로 측정되기 때문에 다음 프레임 내의 그리기 영역 바깥에있게됩니다 (.getMilliseconds() 사용).
4. 마지막으로 볼을 놓을 때마다 캔버스가 정리되지 않기 때문에 공이 같은 위치에 있습니다.

   function draw() { 
       ctx.clearRect(0, 0, canvas.width, canvas.height); 
       theBall.draw(); 
   } 
   

   다른 여러 가지가 있지만이 fiddle 지금은 어떻게해야 : 당신이 찾고있는 무엇을

.