HTML5를 사용하여 Canvas에서 사용자 인터페이스 디자인하기

Question

캔버스에 작은 게임을 디자인했습니다. 인터페이스를 추가하고 싶습니다. 사운드 토글링 및 기타 설정과 같은 메뉴 옵션이있는 표준 기능입니다.

Angry Birds html5 (http://chrome.angrybirds.com)에는 인터페이스를 처리 할 수있는 캔버스 이외의 html 요소가 없습니다.

나는 전체 게임을 html5 캔버스로 디자인 한 다음 CSS 스타일을 사용하여 div와 같은 HTML 요소를 사용하여 완전히 디자인 한 사용자 인터페이스를 사용하는 것이 좋지 않을까 궁금한가요?

대체 시스템이 사용자가 화면에서 클릭하는 위치를 결정하기 위해 충돌 시스템을 작성한다고 가정합니다.

누군가가 올바른 방향으로 나를 가리킬 수 있고, 내 캔버스 게임에 어떤 방법 (순수한 캔버스 또는 html 요소)이 가장 좋을까요? 내 100 % 관심사는 성능이며, 테스트 모두 며칠이 걸릴 것이고 엄청난 고통이 될 것입니다. enter code here

Answer 1

사용자가 캔버스를 클릭 한 위치를 확인하는 것이 그리 어렵지 않습니다. 나는 도서관을 사용한다. gee 정말 쉽다. API의 예를 따라 gee 캔버스를 만들고 항상 마우스 위치 (g.mouseX, g.mouseY) 및 마우스 동작 (g.mousedrag, g.mousedown, g.mouseover, ecc ...)에 액세스하십시오. 물론 애니메이션 (g.draw)에 대한 자동 새로 고침도 처리합니다.

질문 : 캔버스 또는 CSS를 사용하여 UI를 작성하는 경우 귀하에게 달려 있습니다. 일반적으로 사용자 인터페이스의 성능에 신경 쓸 필요가 없으며 코드를 구현하는 방법에 따라 성능이 달라집니다. 나쁜 구현은 인터페이스 래치에 관계없이 성능 지연을 초래할 수 있습니다.