캔버스에 구현 된 Checkers 보드 게임에 적합한 모델

Question

현재로서는 8x8 2 차원 배열 (그리드라고 부르며)이 포함 된 보드 객체가 있으며 조각은 int로 표시됩니다 1/2, 나는 조각으로 왕을 표시하는 비트 연산을 사용합니다.

보드의 렌더링과 캔버스에서 사용자의 클릭 등을 처리하는 Checkers 객체도 있습니다. Checkers 객체에는 Board 객체의 그리드를 반복하는 Draw 메서드가 있습니다. 보드. 따라서 Draw()를 호출 할 때마다 보드가 다시 그려지고 조각 위치가 다시 계산됩니다.

이제 애니메이션을 추가하고 싶습니다. 내가 달성 할 수 있었던 한 가지 방법은 가장 최근의 이동 (소스 및 대상 XY 좌표)을 추적하고 설정된 간격으로 Draw() 루틴을 실행하고 Draw() 루틴을 사용하여 그리려는 부분은 이전 이동의 대상 변수에 기록 된 좌표와 동일하며 그에 따라 조각의 위치가 조정됩니다.

이것이 작동하는 동안, 나는 그것이 지저분 해지기 쉬운 것을 발견한다.

내가 실험 한 또 다른 모델은 정수 대신 조각에 개체를 사용하는 것입니다. 조각에 픽셀 X 좌표를 기록하고 각 이동 (애니메이션 루프) 후에 업데이트 할 수있었습니다. 이것 역시 나쁘고, 보드 객체가 렌더링 로직에 묶이는 방식을 좋아하지 않았습니다.

이 분야에서 경험이있는 사람이라면 누구든지 더 나은 방법을 제안 할 수 있습니까?

서버 측 (NodeJS)에서 동일한 보드 클래스를 사용하므로 클라이언트와 서버에서 보드 클래스를 동일하게 유지하여 클라이언트가 이동하고 유효성을 검사하도록하는 것이 좋습니다. 서버에 의해 절대 거부되지 않습니다.

Answer 1

저는 처음에는 움직이지 않는 모든 조각을 그렸고, 시작부터 끝 위치 (시간에 따라 지정됨)에서 보간 된 선을 따라 움직이는 조각을 그립니다.

사실이 수준의 그래픽 복잡성이있는 경우, position: absolute 이미지를 사용하여 HTML/CSS/jQuery를 사용하여 조각을 나타냅니다. 그런 다음 jQuery의 애니메이션 기능을 사용하여 시작 부분에서 끝 위치로 이동하는 마지막 부분을 매우 쉽게 표시 할 수 있습니다 (그리고 원하는 동작을 얻으려면 swing 또는 linear과 같은 매개 변수가 필요함). 예 :은 :

// Assumes pieces are objects with id and position properties 
// and for each piece there is an image with id: piece.id 

$('#'+piece.id).animate({ 
    left: piece.position.x * board_scale, 
    top: piece.position.y * board_scale 
}); 

Answer 2

당신은 브라우저 지원을 언급,하지만 당신은 내가 당신의 말에 아주 약간의 작업으로 매우 부드러운 애니메이션을 허용 CSS3 transitions으로 다루고 싶어요 IE9 +를 사용하는 가정하지 않았다. 애니메이션은 모바일 장치에서도 하드웨어 가속이 가능하므로 종종 화려합니다.
사용이 :

애플이 이미 만든 체커는이 기술 :

https://developer.apple.com/safaridemos/checkers.php

// css 
.piece { 
    -webkit-transition: all ease-in .75s; 
    -moz-transition: all ease-in .75s; 
    transition: all ease-in .75s; 
} 

// js 
var aPiece = document.getElementById('aPiece'); 
var newLocation = "translate(20px, 30px)"; 
aPiece.style.webkitTransform = newLocation; 
aPiece.style.mozTransform = newLocation; 
aPiece.style.transform = newLocation; 

이 자동으로 애니메이션합니다 :)

Answer 3

는 캔버스를 사용하려면를 사용하여 데모에서는 , 정확히 서로 위치를 결정합니다.

그런 다음 아래쪽을 가져와 모든 정적 요소를 그립니다.
그리고 위쪽은 애니메이션, 즉 움직이는 요소 만 그립니다.

변경하는 요소 만 다시 그려야하므로 최적의 성능을 제공합니다.