웹용 애니메이션 보드 게임 - 플래시가 아닌 - 가능한 것?

Question

웹 페이지의 사각형 게임 영역에 대한 마우스 이벤트 좌표 입력 데이터 및 간단한 콜백 좌표를 얻기위한 최상의 크로스 브라우저 방식은 무엇입니까? 크고 작은 이미지가로드되고 텍스트 문자열이 겹쳐서 표시되는 경우에도 그것?

그리고 크로스 브라우저 DHTML이있는 보드 게임 사각형에서 텍스트 문자열이나 반투명 이미지 오버레이를 임의의 위치 (기존 객체와 관련하여 지정된 Z 순서)에 삽입하거나 제거하는 가장 좋은 방법은 무엇입니까?

그리고 사용자가 내 이미지 중 일부 또는 전부를 선택하는 것을 멈추게하려면 어떻게해야합니까? (단지 이 마치 플래시 인 것처럼처럼 보이게합니다.) IE에서 오른쪽 클릭 메뉴가 나타나지 않게 할 수 있습니까? , FF 등?

데스크톱과 iPhone 및 잠재적으로 다른 모바일 플랫폼에서 모두 작동하는 무언가를 원하기 때문에 Flash 없이는이 작업을 수행하고 싶습니다.

플래시를 사용하지 않을 때 할 수있는 일에 심각한 제한 사항 (예 : 이미지 축소 기능, 벡터, 회전 기능 없음)이 있지만 사용 가능한 기능이 무엇인지 알고 싶습니다.

처음부터 코딩하는 것보다 쉽게 ​​만들 수있는 프레임 워크가 있습니까?

일부 요구 사항에 J/Query가 적합한가요? 그 밖의 무엇이 필요합니까?

Answer 1

웹, Canvas 및 SVG에서 임의의 그림 그리기 및 위치 지정 작업에 사용할 수있는 두 가지 주요 API가 있습니다.

일부 예제와 자바 추상화를 보려면 Chrome Canvas Experiments과 Raphael Javascript toolkit을보십시오.

Answer 2

jQuery는이 작업을 수행하는 데 탁월합니다. 나는 game of chess에 대한 프론트 엔드를 구현하기 위해 jQuery의 UI와 Ajax 기능을 사용했다.

각 타일마다 고유 한 div 이름을 가진 8 x 8 크기의 테이블을 만들면 Javascript가 id로 요소를 가져와 액세스 할 수 있습니다. 이와 같은 것을 만들 수 없다면 페이지의 임의의 위치에 요소를 배치 할 수 있습니다 (절대 또는 상대적). 조각을 드래그하거나 드롭 한 시점을 포함하여 Z- 인덱스를 쉽게 변경할 수도 있습니다.

오른쪽 클릭 및 항목 선택을 해제하는 한, 그 방법은 내가 모르는 방법입니다. Grand Strategy과 같은 다른 Ajax 게임을보고 싶을 수도 있습니다.이 게임은 내 실험보다 훨씬 세련되고이 작업을 수행하는 방법을 알고있을 수도 있습니다.

Answer 3

나는 Google Web Toolkit을 권하고 싶습니다. Java로 프로그래밍 할 수 있습니다. Java에서 수반되는 모든 유형 안전성과 멋진 IDE 기능을 제공하지만 Javascript로 컴파일하여 브라우저에서 실행할 수 있습니다. 또한 톤의 최적화를 지원하며 톤의 기능을 지원합니다.

Answer 4

키는 element.style.position = 'absolute'입니다. 설명하기 위해 그냥 자바 스크립트 밀어 관리했습니다 얼마나 멀리있어 여기에 무엇이 가능한지 (그에서 처음부터를!) :

• http://slebetman.110mb.com/tank3.html - DOM에서 RTS! 유닛/팀을 클릭 한 다음 다른 곳을 클릭하여 어디로 가야할지 알려줍니다. 당신은 양쪽을 제어 할 수 있습니다.