캔버스에 개체 이동

Question

기술을 향상시키기 위해 캔버스에 게임을 만들려고합니다. 아이디어는 화면에 플레이어가 제어하는 ​​두 개의 객체가 있다는 것입니다. 플레이어와 함께 게임을 초기화 한 다음 플레이어 입력을 수신하는 게임 루프를 시작합니다.

현재 플레이어를 캔버스에 그릴 수 있습니다 (이 단계에서는 간단히 사각형 임). 그러나, 난 이러한 개체를 게임 루프의 각 "진드기"에 이동하는 데 문제가 있습니다. 현재 직사각형은 이전 프레임의 직사각형 위에 그려집니다. 캔버스를 지우고 각 틱마다 "선수"를 다시 그리기를 원합니다.

어떻게하면됩니까? 그리고 그것은 최선의 방법입니까, 아니면 더 나은 접근 방법이 있습니까?

코드 샘플을 게시 하겠지만 JavaScript 파일은 매우 장황하고 위의 설명으로 충분합니다.

Answer 1

플레이어의 모양이 프레임마다 변경되지 않으면 세 개의 개별 canvas 요소를 사용합니다. 하나는 배경 용이고 다른 하나는 각 플레이어 용입니다. 그러면 다시 그릴 필요가 없습니다. 각 플레이어 캔버스의 CSS left 및 top 값을 변경하십시오.

플레이어의 모양이 일 경우이 변경되면 다시 그려야합니다. 그러나 각각에 대해 별도의 canvas을 사용하려고 할 수도 있습니다. 그렇게하면 배경을 다시 그릴 필요가 없습니다. 각 플레이어를 그릴 수 있습니다.

물론 배경이 변경되거나 이동하면 어쨌든 다시 그릴 필요가 있습니다. 이 경우에는 하나의 캔버스 만 사용하거나 별도의 캔버스로 실험 해보십시오. 다시 그리기 전에 배경 (또는 캔버스)을 지우는 방법에 대한 구체적인 질문은 a couple of ways to clear a canvas입니다.

어떤 식 으로든 setTimeout() 또는 setInterval() 대신 브라우저를 지원하는 브라우저에서 requestAnimationFrame()을 사용하십시오. requestAnimationFrame polyfill을 검색하면 이전 브라우저를 지원하는 방법에 대한 예제가 많이 있습니다. 여기에 좋은 requestAnimationFrame polyfill입니다.

Answer 2

다음은 기본적인 게임 루프를 사용한 좋은 자습서입니다. 그것은 배경, 괴물 및 선수를 렌더링합니다.

http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

// The main game loop 
    var main = function() { 
     var now = Date.now(); 
     var delta = now - then; 

     update(delta/1000); 
     render(); 

     then = now; 
    }; 

업데이트에서 개체의 위치를 ​​업데이트 한 다음 렌더링 호출합니다.

Answer 3

죄송합니다. 다른 사용자가 만족스러워하면서 장면의 각 요소에 대해 별도의 캔버스를 사용하는 것은 끔찍한 생각입니다. 그리고 그것은 어쨌든 당신의 기술을 향상시키지 못할 것입니다.

예, 한 캔버스에서 다른 프레임으로 변형되지 않는 개체까지도 모든 캔버스에서 다시 그려야합니다. 캔버스를 지우는 것은 간단합니다. context.clearRect(0, 0, canvas.width, canvas.height)을 사용하거나 fillRect을 사용하여 배경을 일부 색상으로 칠하거나 전체 캔버스에 이미지를 그려서 정적 배경을 만들면 전체 캔버스를 덮을 수있는 모든 것이 가능합니다.

그래서 개체를 업데이트하고 캔버스를 지운 다음 모든 것을 다시 그립니다. 당신은 단지 2 개의 직사각형을 가지고 있기 때문에 변화가 유일한 위치는 구현하기가 쉽습니다.

해당하여, 좀 더 객체 지향 aproach 갈 수도 있습니다 더 복잡한 일을 시작하면 내가 좋아하는, 장면에있는 각 개체는 "자신을 그리는 방법을 알고"필요 의미 :

var player1 = new PlayerRect(position); 
player1.draw(context); 

당신이 그것을 업데이트 할 것

이 방법은 루프의 위치가이 같은 일이다 :

당신이 개체의 수백으로 끝날 경우

player.position.x += 10; 

, 당신이 할 일은 당신이 추가 할 수있는 목록입니다 /이 제거 객체와 그 draw 메소드를 호출하는 루프.

나는 그것이 내가하는 방식이다.