간단하게 캔버스 애니메이션

Question

저는 두 개의 직사각형이 두 가지 방향으로 움직이는 간단한 캔버스 애니메이션을 가지고 있습니다. 그러나 이것이 더 단순화 될 수 있다고 생각합니다. 예를 들어

http://jsfiddle.net/tmyie/R5wx8/6/

var canvas = document.getElementById('canvas'), 
    c = canvas.getContext('2d'), 
    x = 10, 
    y = 15, 

    a = 20, 
    b = 50; 

function move() { 
    c.clearRect(0, 0, 500, 300); 

    c.fillRect(0, y, 5, 5), 
    c.fillRect(b, 5, 15, 15); 


    x++; 
    y++; 
    b++ 

    if (y > canvas.height || x > canvas.width) { 
     y = 0; 
     x = 0; 
    } 
} 

setInterval(move, 100); 

, 어떻게 내가 다른 세 가지 모양을 만들 싶어하면 어떻게됩니까? 현재 각 좌표에 대해 더 많은 변수를 만들어야합니다.

x++; 
    y++; 
    b++ 

각 사각형을 자체 객체로 변환 할 수있는 방법이 있습니까?

Answer 1

당신은 확실히 예를 들어, 객체로 만들어 놓을 수 있습니다

deltaX

function Rect(x, y, w, h, dltX, dltY, color) { 

    var me = this; 

    this.x = x; 
    this.y = y; 
    this.width = w; 
    this.height = h; 

    this.deltaX = dltX || 0;  /// and deltas can be optional 
    this.deltaY = dltY || 0; 
    this.color = color || '#000'; /// color is optional 

    this.update = function(ctx) { 
     me.x += me.deltaX; 
     me.y += me.deltaY; 

     ctx.fillStyle = me.color; 
     ctx.fillRect(me.x, me.y, me.width, me.height); 
    }  
} 

및 deltaY는 각 업데이트의 사각형을 이동하는 방법을 많이합니다. 예를 들어 1로 설정하면 update()이 호출 될 때마다 x 및 y이 1로 증가합니다.

델타를 사용하면 델타 값 (예 : delta = -delta)뿐만 아니라 가속도, 다양한 속도 등을 역전하여 쉽게 바운스 (아래의 데모 참조)를 만들 수 있습니다. 삼각 함수를 통해 피드를 제공 할 수 있습니다 특정 각도로 움직인다.

원하는 경우 고정 값을 사용할 수 있지만 델타는 장기적으로 유용하다는 사실을 알 수 있습니다 (주석 : 실제로는 최초의 Pong 게임에서 사용되는 매우 고전적인 방법입니다 :-)). 단순히 각을 업데이트하는 배열을 반복의 문제 여기에서

var rects = [ 
    new Rect(10, 10, 100, 100, 1, -2), 
    new Rect(100, 1, 50, 50, 2, 1, '#f00'), 
    ... 
] 

: 우리는 우리가 단순히 그것의 인스턴스를 생성하고 배열에 저장할 수있는 객체를 정의 이제

Online demo here

개체 :

function move() { 
    ctx.clearRect(0, 0, width, height); 

    for(var i = 0, r; r = rects[i]; i++) { 
     /// check any conditions here 
     r.update(ctx); 
    } 
    requestAnimationFrame(move); 
} 

requestAnimationFrame(move); /// start loop 

Answer 2

장기적으로는 Ken 's를 추천 하겠지만 약간 간단한 버전입니다. 광산에서는 직사각형은 여전히 ​​재산 가방이며, 독자적으로 행동하지 않습니다.

var canvas = document.getElementById('canvas'), 
    c = canvas.getContext('2d'), 
    rects = [{x:0, y:15, w:5, h:5, vx:0, vy:1}, 
      {x:50, y:5, w:15, h:15, vx:1, vy:0}]; 

function move() { 
    c.clearRect(0, 0, 500, 300); 

    for (var i=0; i < rects.length; i++) { 
     var rect = rects[i]; 
     c.fillRect(rect.x, rect.y, rect.w, rect.h), 
     rect.x += rect.vx; 
     rect.y += rect.vy; 
    } 
} 

setInterval(move, 100);