JavaScript로 간단한 Windows 8 게임 만들기 : 입력 및 사운드

이 일련의 게시물은 HTML5, JavaScript, WinJS 및 CreateJS를 사용하여 간단한 Windows 8 게임을 만드는 방법을 보여줍니다. . 이 게임은 XNA 샘플 게임 "Catapult Wars Lab"을 기반으로합니다. 웹 기술을 기반으로하는 Windows 8 용 새 버전을 개발함에 따라 해당 게임의 자산을 재사용 할 것입니다. 이 게시물에서는 사용자 입력에 응답하고 사운드를 추가하여 좀 더 활기차게 만듭니다. 키 테이크 아웃

튜토리얼은 HTML5, JavaScript, WinJS 및 CreateJS를 사용하여 간단한 Windows 8 게임을 만드는 방법을 보여줍니다. 게임은 XNA 샘플 게임 "Catapult Wars Lab"을 기반으로합니다. 게임은 MSPointer 시스템의 구현과 탭 및 더블 탭과 같은 제스처를 감지하기위한 MSGESTURE를 통해 마우스, 터치, 펜 및 제스처와 같은 다양한 형태의 사용자 입력에 응답하도록 설계되었습니다. 게임은 또한 게임이 시작될 때 사운드 파일이 준비되도록 HTML 오디오 요소 및 preloadjs를 사용하여 음향 효과를 통합하여 게임 경험을 향상시킵니다. 사용자 입력 처리

물론 무작위, 시간 기반, 정밀 기반 (예 : "클릭… ​​지금!")을 촬영할 수있는 방법에는 여러 가지가 있지만이 경우 사용자가 방향과 속도를 모두 나타내는 선을 그릴 수 있습니다. . 먼저 Default.js의 상단 근처에 새 변수를 추가하겠습니다.

Windows 8은 마우스, 터치, 펜을 그리는 몇 가지 방법을 지원하며, 우리의 게임은 사용자가 가지고있는 것을 지원할 수있을 정도로 유연해야합니다.  다행히도 Mspointer 시스템은 이들 모두에 대한 지원을 하나로 결합합니다.  MSPointerdown/Up을 사용하여 시작 및 종료 조준, MSPointermove와 사용자가 목표를 조정할 때 피드백을 제공합니다. 그건 그렇고, TAP, Double Tap 등과 같은 제스처를 감지하기위한 MSGESTURE를 통한 큰 지원이 있습니다. 입력 및 제스처를 처리하는 좋은 예는 MSDN의 "Ballineight"샘플입니다. 이 이벤트는 발사시 호출되는 청취자 기능을 가리키면 사용됩니다.  초기화 () 함수의 상단 근처에 추가하여 지금 처리하겠습니다. 그리고 이제 기능 자체의 경우 : 원하는 위치를 추가하지만 update ()와 FirShot () 사이에 배치됩니다. 운동이 여기에 남아 있습니다.  단순화를 위해 Admentaim () 함수 동안 AIM %가있는 텍스트 표시 및/또는 조준 화살표를 그리는 것을 생략했습니다.  계속해서 추가하십시오 - 이전 부분에서 우리는 이미 필요한 기술을 이미 사용하고 있습니다. 목표를 계산하는 데 도움이되는 기능 : 다시 말하지만, 단순성은 하루를 지배하며 이것은 플레이어 1을위한 것이지만 다음은 다음과 같습니다. 239-241 라인-시작에서 종료점까지의 거리에서 새로운 포인트를 만듭니다.  프레임/업데이트 당 적용하기 위해 좋은 속도로 확장하십시오.

라인 242 & 244 - X와 Y가 제한되어있어 샷이 화면에서 사라지지 않도록하여 너무 빨리
• 라인 243 & 245 - 샷이 적을 향해 나아가고 있는지…

우리는 이전에 플레이어 1이 항상 무작위로 발사되도록 Update ()에 임시 코드를 추가했습니다.  이제 새로운 AIMVECTOR를 사용할 수 있도록이를 교체 할 수 있습니다. 계속해서 게임을 실행하십시오… 이제 마우스, 펜 또는 터치를 사용하여 샷을 제어 할 수 있습니다! “말을 듣고 있어야합니다!” - 사운드 추가 게임 개발자로서의 우리의 일은 소리가 들릴 때까지 수행되지 않습니다.  우리는 이미 2 부에 사운드 파일을 다시 추가 했으므로 다음 단계를로드하여 다음 단계를 수행하겠습니다. 먼저, 기본값을 단정하게 유지하기 위해 몇 가지 변수 :

게임이 시작될 때 우리의 리소스가 준비되도록 이미 Preloadjs를 연결했다고 이미 2 부에서 기억하십니까?  우리는 사운드와 동일한 접근 방식을 사용할 수 있으므로 매니페스트에 추가하겠습니다.

이 파일을 사용하려면 HTML 오디오 요소 인스턴스를 만듭니다.  간단히 말해서, 사운드 파일 당 하나의 오디오 인스턴스를 만들면 해당 인스턴스의 이전 재생이 완료되기 전에 하나의 사운드가 재생되지 않아 클리핑이 발생할 수 있습니다.  이 문제를 해결하기위한 몇 가지 방법이 있습니다 (예 :“HTML5 오디오 및 JavaScript 컨트롤”참조. ), 그러나 우리는 사운드를 재생할 때마다 하나의 인스턴스를 사용하는 단순한 & 비효율적 인 를 수행합니다. 이 예에서는 SoundJS (CreateJS의 다른 부분)를 사용하지 않지만 물론 스핀을 위해 가져갈 수 있습니다! 연극 (파일) 도우미 기능 추가 : 그게 다야!  이제 우리는 단지 그것을 호출하여 오른쪽 파일을 가리키는 것을 지정합니다.  우리는 여러 곳 에서이 작업을 수행 할 것입니다. 먼저 FirShot ()에 호출을 추가합니다. 이제 processhit () : 의견에서 언급 한 바와 같이, 투석기를 파괴하기 위해 여러 번의 히트가 필요하다면 "폭발"대신 "히트"사운드를 사용할 수 있습니다. 마지막으로, EndGame ()에서 플레이 엔드 승리 또는 사운드를 잃어 버립니다. 계속해서 시도해보십시오. 게임에서… 그리고… 축하해요!  당신은 게임을 만들었습니다! 우리는이 게시물에서 많은 근거를 다루었지만 다른 것들과 마찬가지로 시도해 볼 다른 것들이 있습니다.  왜 그들 중 일부를 찌르지 않겠습니까? 스크린 조정 - 초상화/풍경, 스냅/채워진.  CSS 미디어 쿼리에 대해 배울 수있는 좋은 기회! > 터치/제스처지지 개선 스프라이트/애니메이션 - 샷 히트/미스, 투석기 풀백/화재, 투석기 파괴

게임 플레이 역학 - 바람 추가, 새로운 장면, 새로운 투석기 기능/업그레이드, 탄약 선택 등 산을 추가하고 구름을 배경으로 움직입니다 (자산이 이미 있습니다)

는 현재 매우

인텔리형

지능 를 추가하십시오 라이브 타일 사용을 고려하십시오 - 아마도 플레이어의 마지막/높은 점수를 보여줄 수 있습니까? 즐기다!  당신이 추가 한 멋진 새로운 것들에 대해들을 수 있기를 기대합니다! JavaScript를 사용하여 간단한 Windows 8 게임을 만드는 것에 대해 자주 묻는 질문 게임 캐릭터에 더 복잡한 움직임을 추가 할 수 있습니까? 게임 캐릭터에 더 복잡한 움직임을 추가하려면 'requestAnimationFrame'메소드를 사용할 수 있습니다. 이 방법을 사용하면 브라우저의 다음 리 페인트 전에 애니메이션 기능을 호출하여 더 매끄러운 애니메이션을 만들 수 있습니다. 이 방법을 사용하여 사용자 입력 또는 게임 로직을 기반으로 게임 문자의 위치를 ​​업데이트 할 수 있습니다. 예를 들어, 사용자가 특정 키를 누를 때 캐릭터 점프를 할 수 있습니다.

게임에 음향 효과를 추가 할 수있는 방법은 무엇입니까?

게임에 음향 효과를 추가하면 향상 될 수 있습니다. 게임 경험. JavaScript의 '오디오'객체를 사용하여 사운드 파일을 재생할 수 있습니다. 사운드를 재생하려면 새 오디오 객체를 만들고 '재생'방법을 호출해야합니다. 또한 '볼륨', '루프'및 '일시 정지'메소드를 사용하여 볼륨을 제어하고 사운드를 루프하며 사운드를 중지 할 수 있습니다.

게임을 다른 화면 크기에 어떻게 응답 할 수 있습니까?

게임을 반응하려면 JavaScript에서 'window.innerWidth'및 'window.innerHeight'속성을 사용할 수 있습니다. 이 속성은 각각 브라우저 창의 너비와 높이를 반환합니다. 이 속성을 사용하여 브라우저 창의 크기에 따라 게임 요소의 크기와 위치를 조정할 수 있습니다.

내 게임에 멀티 플레이어 기능을 추가 할 수 있습니까?

멀티 플레이어 기능 추가 당신의 게임은 상당히 복잡 할 수 있습니다. 플레이어 간의 실시간 커뮤니케이션을 가능하게하려면 WebSocket을 사용해야합니다. 또한 대기 시간 및 동기화와 같은 문제를 처리해야합니다.

더 나은 성능을 위해 게임을 최적화 할 수있는 방법은 무엇입니까?

더 나은 성능을 위해 게임을 최적화하는 몇 가지 방법이 있습니다. 한 가지 방법은 애니메이션에 'requestAnimationFrame'메소드를 사용하는 것입니다. 이 방법은 사용자가 다른 탭으로 전환 할 때 애니메이션을 일시 중지하기 때문에 'SetInterval'또는 'settimeout'보다 효율적입니다. 또 다른 방법은 많은 메모리를 차지할 수 있으므로 글로벌 변수와 클로저의 사용을 최소화하는 것입니다.

내 게임에 터치 컨트롤을 추가하려면 어떻게해야합니까?

게임에 터치 컨트롤을 추가하려면 '터치 스타트', '터치 모브'및 '터치 엔드'이벤트를 JavaScript에서 사용할 수 있습니다. 이 이벤트는 사용자가 화면을 터치하고 손가락을 움직이고 손가락을 각각 들어 올릴 때 발사됩니다. 이 이벤트를 사용하여 게임 캐릭터의 움직임을 제어 할 수 있습니다.

Windows 스토어에 내 게임을 게시하려면 어떻게해야합니까?

Windows 스토어에 게임을 게시하려면 만들어야합니다. Windows Store 개발자 계정. 계정이 있으면 인증을 위해 게임을 제출할 수 있습니다. 게임이 인증 프로세스를 통과하면 Windows 스토어에 게시됩니다.

게임에 인앱 구매를 추가하려면 어떻게해야합니까?

게임에 인앱 구매를 추가하려면 게임에 구매를 추가하십시오. , Windows.applicationModel.store 네임 스페이스를 사용해야합니다. 이 네임 스페이스는 인앱 구매를 구현하는 데 필요한 클래스와 메소드를 제공합니다.

내 게임에 업적을 추가 할 수있는 방법은 무엇입니까?

게임에 업적을 추가하려면 Windows를 사용할 수 있습니다. ApplicationModel.userDataAccounts 네임 스페이스 이 네임 스페이스는 업적을 구현하는 데 필요한 클래스와 메소드를 제공합니다.

다른 장치에서 내 게임을 어떻게 테스트 할 수 있습니까?

다른 장치에서 게임을 테스트하려면 Windows 장치 포털을 사용할 수 있습니다. . 이 도구는 Windows 장치에서 게임을 원격으로 디버그하고 테스트 할 수 있습니다.

위 내용은 JavaScript로 간단한 Windows 8 게임 만들기 : 입력 및 사운드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!