jQuery animate() smoothing

Question

Im과 같은 거꾸로 flappy 새 게임을 만들려고 노력하는 Im는 큰 문제를 직면하고 있습니다.

파이프 장애물을 위에서 아래로 생성하려고 시도하지만 애니메이션이 텍스트 편집기처럼 매우 가짜로 보이고 부드럽 지 않아서 어떻게 부드럽게 할 수 있습니까? 나는 requestanimationframe 함수를 사용하여 시도했지만 여전히 couldnt.

$(document).ready(function(){ 
//Variables 
var screenWidth = $(window).width();//Screen width 
var screenHeight = $(window).height();//Screen height 
var birdWidth = $("#bird").width();//bird width 
var y = 0;//Background y position 
var astY = 0;//Pipe position 

var bird = {//bird properties 
    goingLeft: false, 
    goingRight: false, 
    lspeed: 0, 
    rspeed: 0, 
    maxSpeed: 10 
}; 

setBirdPosition(screenWidth/2 - birdWidth/2, screenHeight/1.3 - birdWidth/2); 
startBackgroundMovement(); 
spawnPipe(); 


//Start move the screen 
function startBackgroundMovement(){ 
    setInterval(function() 
    { 
     y+=1; 
    $('body').css('background-position-y',y + 'px'); 
    }, 10); 
} 


//bird starting position 
function setBirdPosition(posX, posY) { 
    $("#bird").css("left", posX); 
    $("#bird").css("top", posY); 
    bird.position = posX; 
} 
(function birdLoop() { 
    if (bird.goingLeft) { 
     bird.lspeed = Math.min(bird.lspeed *1.1 || 1, bird.maxSpeed); 
    } else { 
     bird.lspeed = Math.max(bird.lspeed - 0.5, 0); 
    } 
    if (bird.goingRight) { 
     bird.rspeed = Math.min(bird.rspeed *1.1 || 1, bird.maxSpeed); 
    } else { 
     bird.rspeed = Math.max(bird.rspeed - 0.5, 0); 
    } 
    bird.position = bird.position + (bird.rspeed - bird.lspeed); 
    $("#bird").css('left', bird.position); 
    requestAnimationFrame(birdLoop); 
}()); 

//Move bird 
$(document).keydown(function(e){ 
    switch(e.which){ 
     case 37://left 
      bird.goingLeft= true; 
      //left edge of screen 
     if (bird.position < 0) { 
     bird.position = 0; 
     } 
     break; 
     case 39://right 
      bird.goingRight= true; 
      //right edge of screen 
     if (bird.position > screenWidth - birdWidth) { 
     bird.position = screenWidth - birdWidth; 
     } 
     default: return;  
    e.preventDefault();//not sure if needed 
    } 
}).keyup(function(e){ 
    switch(e.which){ 
     case 37://left 
      bird.goingLeft= false; 
      //left edge of screen 
     if (bird.position < 0) { 
     bird.position = 0; 
     } 
      break; 
     case 39://right 
      bird.goingRight= false; 
      //right edge of screen 
     if (bird.position > screenWidth - birdWidth) { 
     bird.position = screenWidth - birdWidth; 
     } 
     default: return;  
    e.preventDefault();//not sure if needed 
    } 
}); 

function spawnPipe()//spawn pipes 
{ 
    setInterval(function() 
    { 
     astY += 30; 
     $("#fullPipe").animate(
     { 
     "top":astY 
     }); 
    }, 1); 
} 
}); 

확인이 : http://jsfiddle.net/icy1337/u38ratk9/

Answer 1

setInterval(function() 
{ 
    astY += 1; 
    $("#fullPipe").css("top", astY);    
}, 10); 

예 : http://jsfiddle.net/u38ratk9/6/

더 나은? :)