HTML / JavaScript 기반 게임 제작을위한 필수 지식 [닫기]


17

최신 HTML 표준과 JavaScript로 게임을 시작하는 데 필요한 지식이나 리소스를 HTML 5라고 부르는 전문가가 있는지 궁금합니다. 프로세스에 필수적인 JavaScript 라이브러리가 있습니까? <canvas>태그 외에 다른 HTML 조각에 대해 알아야 할 사항은 무엇입니까?

답변:


9

오디오비디오 태그를 알고 있어야 합니다. 저장된 게임 등을 위해 많은 데이터를 저장해야하는 경우 웹 저장소 는 매우 중요합니다.

이미 몇 가지 Javascript html5 게임 프레임 워크가 있으며 Akihabara 는 다소 인기가 있습니다.

다른 라이브러리와 마찬가지로 JqueryFunctional Javascript 는 내가 가장 좋아하는 것 중 2 가지입니다.


각 프레임 워크의 장점은 무엇입니까? 가장 간단하고 강력하고 깨끗한 코드는 무엇입니까? Functional Javascript 용어의 "Functional"이라는 단어는 흥미롭게 들립니다. 실제로 무엇에 관한 것입니까? pythonist에게 어떤 프레임 워크를 제안 하시겠습니까?

Web Storage는 db가 할 수없는 것을 제공합니까?
만료 된 닌자

@expiredninja 데이터베이스는 실제로 더 나을 것이지만 웹 저장소는 사용자 컴퓨터에 로컬입니다. Ajax 호출 등을 호스팅하는 것보다 호스팅이 빠르거나 빠릅니다.이 답변은 최신 브라우저 기반 게임에 사용 된 기술로 (약간) 구식입니다.
jdeseno

6

jQuery가 애니메이션, 스프라이트 그룹화, 충돌 감지 및 플레이어 입력 읽기와 같은 일부 게임 관련 활동을 수행하기위한 플러그인 인 GameQueryAkihabara 프레임 워크가 이미 있습니다.


4

더 많은 리소스를 버리 려면 RaphaelJS를 확인하십시오 . 멋진 API가있는 매우 멋진 SVG 그리기 및 애니메이션 라이브러리입니다. 데모를 확인하는 것을 잊지 마십시오.

전반적으로, 나는 <canvas>직접적인 DOM 조작보다 태그를 추천 한다 (예를 들어 <div>적중 테스트를 놀라 울 정도로 간단하게하기 위해 각 스프라이트를 독자적 으로 만드는 것). DOM 조작이 잘못되고 성능이 저하되는 것은 쉬운 반면, 기존 2D 개발 전략은 HTML 캔버스에서 잘 작동합니다.


3

HTML5 Canvas에 SVG 기반 애니메이션을 표시하기위한 JS 프레임 워크 인 Burst Engine에 대해 알고 있어야합니다.

http://burst.bocoup.com/

지금까지 사람들이 및 태그를 언급하는 것을 보았지만 'mousemove'및 'mousedown'이벤트와 같은 요소에 EventListener 콜백을 요소에 추가하는 것을 포함하여 JS / HTML 게임 개발에 필수적인 다른 DOM 항목이 있습니다. 예를 들어, 캔버스를 클릭 할 때 "shootAtClick"이라고 정의한 함수를 호출 할 수 있도록 첫 번째 캔버스 요소를 찾아 설정합니다.

document.getElementsByTagName ( "CANVAS") [0] .addEventListener ( 'mousedown', shootAtClick, false);

이 예제 에서 기본 마우스 컨트롤을 허용하도록 Akihabara 엔진을 확장 한이 예제 에서 작동하는 것을 볼 수 있습니다 . (Z를 눌러 시작하고 화살표 키를 사용하여 이동 한 다음 마우스를 클릭하여 커서 방향으로 촬영합니다.)


3

어떤 브라우저에서 어떤 HTML5 구성 요소가 지원되는지에 대한 지식

시간이 지남에 따라 크로스 브라우저 호환성이 점점 더 균일 해지지 만 일부 최신 구성 요소는 여전히 완전히 동일하게 지원되지 않습니다.

로컬 스토리지에는 브라우저마다 약간의 차이가있을 수 있으며 레거시 지원을 위해서는 jStorage 또는 YUI Storage Lite 와 같은 라이브러리가 필요합니다 .

웹 소켓은 브라우저마다 차이가있을 수 있지만 socket.io 는 편리한 추상화를 제공하는 유망한 라이브러리처럼 보입니다.

오디오 호환성은 브라우저마다 다른 사운드 파일이 필요한 매우 중요한 구성 요소입니다. http://html5doctor.com/native-audio-in-the-browser/

Chrome에는 짧은 오디오 파일을 재생할 수없고 많은 동시 사운드를 재생하면 브라우저 전체가 충돌 할 수있는 등 몇 가지 중요한 오디오 버그 가 있습니다.

가장 중요한 것은 라이브러리를 사용하여 브라우저의 차이점을 이해하고 필요에 따라 레거시 지원을 추상화하고 제공하는 것입니다.


1

HTML과 JavaScript는 솔직히 게임 개발에있어 좋지 않은 플랫폼이지만, 일종의 게임을 결정하기 전까지는 문제가되지 않습니다. 답은 1 인칭 슈팅 게임, RTS 또는 퍼즐 게임에서는 근본적으로 다릅니다.

산뜻한 것처럼 보이는 임의의 기술을 방해하는 모호하고 손이 닿는 답변을 얻기 시작했습니다. 이는 특히 합법적 인 답변이 포함 된 질문을하지 않았다는 경고 신호입니다.

응용 프로그램을 작성하는 데 필요한 C ++ 항목을 물을 수도 있습니다. 조건에 따라서. 프로젝트에 대해 자세히 알려 주면 유용한 답변을 얻을 수 있습니다.

대체로 거의 모든 웹 게임이 여전히 플래시 인 이유가 있습니다.


4
나는 그 질문이 모호하고 모든 곳의 답변에 동의하지만 "HTML과 [JS]는 ... 게임 개발에 나쁜 플랫폼"이라는 데 동의하지 않습니다. Google의 팩맨 기념일 로고를 기억하십니까? 스트레이트 HTML 및 JS. 특정 종류의 캐주얼 게임이 해당 플랫폼에서 잘 작동한다고 생각하며 웹을 사용하는 사람은 이미 런타임을 가지고 있습니다. (=
drhayes

1
와우, 팩맨. 획기적인. 기술 데모 이외의 용도로 게임에서 HTML / JS를 사용하지 않는 이유가 있습니다.
John Haugeland

1
@ Edmundito : 이것이 당신 이이 '질문'을 가야한다고 생각하는 경우 CW로 표시되어야합니다.
Jesse Dorsey

12
-1 가치없는 답변. 웹 게임이 좋은 플랫폼이 아니라고 생각하면 앉으십시오. 나는 이것이 왜 그렇게 많은 투표를 받았는지 모릅니다. 다른 사람들이 당신의 의견을 공유 할 수도 있지만이 질문에 전혀 답하지 않습니다.
Ricket

1
얘들 아. 2010 년의 답변은 오늘의 2014 년과는 매우 달랐습니다. 현재 HTML 게임이 많이 있습니다.
John Haugeland
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.