Bacon.js로 Pacman 게임 구축

JavaScript의 비동기 프로그래밍 기능은 "콜백 지옥"을 유발하기 때문에 축복과 저주입니다. async.js와 같은 유틸리티 라이브러리는 비동기 코드를 구성하는 데 도움이 될 수 있지만 제어 흐름을 효과적으로 추적하고 비동기 코드의 논리를 유추하는 것은 여전히 ​​어렵습니다.

이 기사는 Bacon.js와 같은 라이브러리를 사용하여 JavaScript의 비동기 기능을 처리하는 응답 형 프로그래밍 개념을 소개합니다.

키 포인트

반응 형 프로그래밍은 비동기 데이터 흐름을 처리하여 JavaScript의 비동기 기능을 관리하고 "콜백 지옥"을 피합니다. Bacon.js와 같은 라이브러리는이 개념을 구현하는 데 사용될 수 있습니다. bacon.js는 Pac Man 게임 버전을 만드는 데 사용할 수있는 반응 형 프로그래밍 라이브러리입니다. 이 라이브러리를 사용하면 더 나은 오류 처리와 데이터 스트림을 결합 할 수있는 기능을 제공하여 훌륭한 제어 및 유연성을 제공합니다.

이벤트 스트림 또는 관찰 가능한 객체를 Bacon.js에서 만들어 조작 할 수 있습니다. 이 스트림을 구독하여 이벤트를 비동기 적으로 관찰 할 수 있습니다. 예를 들어 Pac Man 게임에서 사용자 입력, 게임 로직 및 렌더링을 처리하는 데 사용할 수 있습니다.

bacon.js에는 Bacon.Property도 포함되어 있으며 변경 사항이 발생할 때 자체적으로 반응하고 업데이트되는 응답 속성입니다. 이것은 게임 상태의 변경 사항을 관리하는 데 사용할 수 있습니다.

반응을 시작하십시오 반응 형 프로그래밍 프로세스 비동기 데이터 흐름. 반복자 모드를 관찰 가능한 모드로 대체합니다. 이는 거래를 처리하기 위해 데이터를 적극적으로 반복하는 명령 프로그래밍과 다릅니다. 응답 형 프로그래밍에서는 데이터를 구독하고 이벤트에 비동기 적으로 응답합니다.

Bart de Smet은 그의 연설에서 이러한 변화를 설명합니다. André Staltz는이 기사에서 반응 형 프로그래밍을 탐색합니다.
• 반응 형 프로그래밍을 시작하면 모든 것이 비동기 데이터 스트림이됩니다. 서버의 데이터베이스, 마우스 이벤트, 약속 및 서버 요청이됩니다. 이를 통해 "콜백 지옥"이라는 것을 피하고 더 나은 오류 처리를 제공 할 수 있습니다. 이 접근법의 또 다른 강력한 특징은 데이터 스트림을 결합하는 능력으로, 훌륭한 제어와 유연성을 제공합니다. Jafar Husain은 그의 연설에서 이러한 개념을 설명합니다.
bacon.js는 RXJS의 대안 인 반응 형 프로그래밍 라이브러리입니다. 다음 섹션에서는 Bacon.js를 사용하여 널리 알려진 Pac-Man 게임 버전을 구축합니다.
• 프로젝트 설정
Bacon.js를 설치하려면 Bower를 사용하여 CLI에서 다음 명령을 실행할 수 있습니다.
• 라이브러리를 설치 한 후에는 응답 형 프로그래밍을 시작할 수 있습니다.
Pac Man Game API 및 Unicodetiles.js 외관과 느낌을 위해 텍스트 기반 시스템을 사용하여 자원과 스프라이트를 처리 할 필요가 없습니다. 직접 만들지 않기 위해 훌륭한 라이브러리 unicodetiles.js를 사용할 것입니다.
• 먼저, 게임 로직을 처리하는 Pacmangame이라는 클래스를 만들었습니다. 다음 방법을 제공합니다
  Pacmangame (부모) : Pacman 게임 객체를 만듭니다 <: :> start () : 게임을 시작하십시오 <: :> tick () : 게임 로직을 업데이트하고 게임을 렌더링합니다. SpawnGhost (Color) : 새 유령을 생성 updateGhosts () : 게임의 모든 유령 를 업데이트하십시오 MovePacman (P1V) : Pacman을 지정된 방향 로 이동하십시오
  • 또한 다음 콜백을 노출시킵니다
  onpacmanmove (movvev) : 참석하면 사용자가 버튼을 누르고 Pacman에게 이동하도록 요청할 때
  • 를 호출하십시오.
  따라서이 API를 사용하려면 게임을 시작하고 SpawnGhost에게 정기적으로 전화를 걸어 유령을 생성하고 onpacmanmove 콜백을 듣고 이런 일이 발생할 때마다 MovePacman에게 전화하여 실제로 Pacman을 이동합니다. 우리는 또한 Ghost의 움직임을 업데이트하기 위해 Upderghosts를 정기적으로 호출합니다. 마지막으로 변경 사항을 업데이트하기 위해 정기적으로 진드기를 호출합니다. 중요한 것은 Bacon.js를 사용하여 이벤트를 처리하는 데 도움이 될 것입니다.
  • 시작하기 전에 게임 객체를 만들어 봅시다 :
  우리는 새로운 Pacmangame을 만들고 Parent Dom Object ParentDiv를 통과하여 게임이 렌더링됩니다. 이제 우리는 게임을 만들 준비가되었습니다.
  이벤트 스트림 또는 관찰 가능한 물체
  • 이벤트 스트림 는 이벤트를 비동기 적으로 관찰하기 위해 구독 할 수있는 관찰 가능한 객체입니다. 다음 세 가지 방법을 사용 하여이 세 가지 유형의 이벤트를 관찰 할 수 있습니다.
  • Observable.onValue (f) : 가치 이벤트를 듣습니다. 이것은 이벤트를 처리하는 가장 쉬운 방법입니다.
  Observable.onerror (f) : 스트림의 오류를 처리하는 데 사용되는 오류 이벤트를 듣습니다.
  Observable.onend (F) : 스트림에서 끝나고 더 이상 이동 값을 사용할 수없는 이벤트를 듣습니다.
  스트림을 만듭니다
  이제 우리는 이벤트 스트림의 기본 사용을 이해 했으므로 이벤트 스트림을 만드는 방법을 살펴 보겠습니다. Bacon.js는 jQuery 이벤트, Ajax Promise, Dom Eventtarget, Simple Callbacks 및 Arrays에서 이벤트 스트림을 만드는 데 사용할 수있는 몇 가지 방법을 제공합니다.
  • 이벤트 흐름에 대한 또 다른 유용한 개념은 시간 개념입니다. 즉, 이벤트는 미래에 언젠가 올 수 있습니다. 예를 들어, 이러한 방법은 특정 시간 간격 내에서 이벤트를 전달하는 이벤트 스트림을 만듭니다.
  bacon.interval (간격, 값) : 주어진 간격 으로이 값을 무한히 반복합니다.
  베이컨. 반복적으로 (간격, 값) : 주어진 간격으로 이러한 값을 무한히 반복하십시오.

  bacon.later (지연, 값) : 주어진 지연 후에 값을 생성합니다.

  더 많은 컨트롤을 위해 Bacon.frombinder ()를 사용하여 고유 한 이벤트 스트림을 만들 수 있습니다. 우리는 Pac Man Move를위한 이벤트를 생성 할 Movestream 변수를 만들어 게임에서 이것을 보여줄 것입니다.

  $ bower install bacon

  우리는 관찰자가들을 수있는 이벤트를 보낼 값으로 싱크를 호출 할 수 있습니다. 싱크대 전화는 OnpacmanMove 콜백에 있습니다. 즉, 사용자가 키를 누르고 Pac-Man에게 이동하도록 요청할 때마다. 따라서 Pac-Man Move 요청에 대한 이벤트를 발행하는 관찰 가능한 객체를 만듭니다.

  우리는 간단한 값 movev를 사용하여 싱크를 불렀습니다. 이것은 MoveV 값을 사용하여 Move 이벤트를 추진합니다. Bacon.error 또는 Bacon.end와 같은 이벤트를 추진할 수도 있습니다.

  다른 이벤트 스트림을 만들어 봅시다. 이번에는 고스트 이벤트를 생성하기 위해 알림을 발행하고 싶습니다. 우리는 이것에 대한 spawnstream 변수를 만들 것입니다 : <🎜 🎜>

  bacon.seageventially () 주어진 간격으로 값을 전달하는 스트림을 만듭니다. 우리의 경우 800 밀리 초마다 유령 색상을 통과합니다. 또한 Delay () 메소드를 호출합니다. 스트림이 지연되므로 2.5 초 지연 후 이벤트가 방출되기 시작합니다.

  이벤트 스트림의 방법 및 대리석 다이어그램 이 섹션에서는 이벤트 스트림에 사용할 수있는 몇 가지 실용적인 방법을 나열합니다.

  Observable.map (f) : 값을 매핑하고 새 이벤트 스트림을 반환하십시오.

  $ bower install bacon

  Observable.Filter (f) : 주어진 술어를 사용하여 값을 필터링하십시오.

  관찰 가능.

  Observable.skip (n) : 스트림에서 첫 번째 n 요소를 건너 뜁니다.

  관찰 가능. 스로틀 (지연) : 특정 지연을 통한 흐름을 조절합니다.

  관찰 가능 .debounce (지연) : 특정 지연을 통한 흐름을 제기합니다.

  관찰 가능 .Scan (seed, f) 주어진 종자 값 및 축적기 기능으로 스트림을 스캔하십시오. 이것은 스트림을 단일 값으로 단순화합니다.

  이벤트 스트리밍을위한 더 많은 방법은 공식 문서 페이지를 참조하십시오. 대리석 다이어그램을 사용하여 스로틀 링과 제조의 차이점을 볼 수 있습니다.
  • 보시다시피, 스로틀링은 일상적으로 스로틀링 이벤트이며, De-Jittering은 주어진 "침묵 기간"이후에만 이벤트를 방출합니다.
  이러한 유틸리티는 단순하고 강력하며 흐름을 개념화하고 제어 할 수 있으므로 그 안에 데이터를 제어 할 수 있습니다. Netflix가 이러한 간단한 방법을 사용하여 자동 완성 상자를 만드는 방법에 대한이 이야기를 보는 것이 좋습니다.
  • 이벤트 흐름을 관찰하십시오 지금까지, 우리는 이벤트 스트림을 만들고 조작했으며 이제 스트림에 가입하여 이벤트를 관찰 할 것입니다.
  이전에 만든 Movestream 및 SpawnStream을 검토하십시오. 지금 구독합시다 :
  stream.Subscribe ()를 사용하여 스트림을 구독 할 수 있지만 stream.onValue ()를 사용할 수도 있습니다. 차이점은 구독이 이전에 본 세 가지 유형의 이벤트를 방출하는 반면 OnValue는 Bacon.next 유형의 이벤트 만 방출한다는 것입니다. 즉, Bacon.error 및 Bacon.end 이벤트를 무시합니다.
  • SpawnStream (800 밀리 초마다 사고)에 이벤트가 나타나면 그 가치는 유령을 생성하는 데 사용하는 유령 색상 중 하나입니다. Movestream에 이벤트가 나타나면 사용자가 Pac Man을 이동하기위한 열쇠를 누를 때 이런 일이 발생합니다. 우리는 Game.MovePacman을 DirectionV : 이벤트와 함께 나타나서 Pacman이 움직입니다.
  이벤트 스트림과 베이컨을 결합한 이벤트 스트림을 결합하여 다른 스트림을 만들 수 있습니다. 이벤트 스트림을 결합하는 방법에는 여러 가지가 있으며 여기에 여러 가지가 있습니다.
  bacon.combineAsarray (streams) : 결과 스트림의 값이 값이되도록 결합 된 이벤트 스트림 배열.
  • bacon.zipasarray (스트림) : 스트림을 새 스트림으로 압축하십시오. 각 스트림의 이벤트는 쌍으로 결합됩니다.
  bacon.combinetemplate (템플릿) : 템플릿 개체를 사용하여 이벤트 스트림을 결합합니다.
  bacon.combinetemplate의 예를 살펴 보겠습니다 : <🎜 🎜>
  • 보시다시피, 우리는 템플릿을 사용하여 이벤트 스트림 (예 : 비밀번호, 사용자 이름, FirstName 및 LastName)을 LoginInfo라는 결합 된 이벤트 스트림으로 결합합니다. 이벤트 스트림이 이벤트를 수신 할 때마다 로그인 닌포 스트림은 이벤트를 방출하여 다른 모든 템플릿을 단일 템플릿 객체로 결합합니다.
  bacon.js 스트림, 즉 베이컨 .BUS ()를 결합하는 방법도 있습니다. Bacon.bus ()는 값을 스트림으로 푸시 할 수있는 이벤트 스트림입니다. 또한 다른 스트림을 버스에 삽입 할 수 있습니다. 우리는 그것을 사용하여 게임의 마지막 부분을 구축 할 것입니다 :

  이제 우리는 Bacon.interval을 사용하여 다른 스트림 인 Ghoststream을 만듭니다. 이 스트림은 1 초마다 0을 방출합니다. 이번에는 구독하고 Game.upDateGhosts를 통해 유령을 움직입니다. 이것은 1 초마다 유령을 움직이는 것입니다. game.tick이 댓글을 달았으며 Movestream의 다른 Game.tick을 기억하십니까? 두 스트림 모두 게임을 업데이트하고 마지막으로 게임을 호출하십시오. TICK 변경 사항을 렌더링하므로 각 스트림에서 TICK을 호출하는 대신,이 두 스트림의 조합 인 세 번째 스트림을 생성 할 수 있습니다. 개울.

  스트림을 결합하려면 Bacon.bus를 사용할 수 있습니다. 이것은 우리 게임의 마지막 이벤트 스트림이며, 우리는 결합 된 Tickstream이라고합니다. 그런 다음 Movestream과 Ghoststream을 삽입 한 후 마지막으로 구독하고 Game.tick에 전화하십시오.

  $ bower install bacon

  <,> 그게 다야, 우리는 끝났다. 남은 유일한 것은 game.start ()를 사용하여 게임을 시작하는 것입니다.

  <🎜 🎜> <<> 베이컨 .Property 및 더 많은 예 <🎜

  베이컨 .property는 반응 형 속성입니다. 반응 형 속성이 배열의 합이라고 상상해보십시오. 배열에 요소를 추가하면 응답 속성 속성이 반응하고 자체 업데이트됩니다. Bacon.property를 사용하려면이를 구독하고 변경 사항을 듣거나 속성이 변경 될 때 주어진 객체의 메소드를 호출하는 속성을 사용할 수 있습니다. 다음은 베이컨을 사용하는 방법의 예입니다.

  먼저, 1 초 간격으로 주어진 배열의 값을 생성하는 이벤트 스트림을 생성 한 다음 스캔 결과 인 응답 속성을 만듭니다. 이것은 반응 값에 1, 3, 6 및 10의 값을 할당합니다.

  var game = new PacmanGame(parentDiv);

  자세한 정보 및 실시간 데모를 알아보십시오

  이 기사에서는 Pac Man Games를 구축하여 Bacon.js를 사용하여 응답 형 프로그래밍을 소개합니다. 게임 디자인을 단순화하고 이벤트 스트리밍 개념을 통해 더 많은 제어력과 유연성을 제공합니다. 전체 소스 코드는 Github에서 사용할 수 있으며 라이브 데모는 여기에서 찾을 수 있습니다.

  다음은 더 유용한 링크입니다 :

  bacon.js api 참조 bacon.js 비디오 소개 rxjs 웹 사이트 Highland.js 고급 스트리밍 라이브러리 Bodil Stokke의 "통찰력있는 히피족을위한 반응 형 게임 프로그래밍"
  Bacon.js로 Pac-Man을 구축하는 것에 대한 FAQ bacon.js를 사용하여 자신의 Pac Man 게임을 어떻게 만들기 시작합니까?
  • Bacon.js로 자신의 Pac Man 게임을 구축하려면 먼저 JavaScript 및 기능적 반응 형 프로그래밍 (FRP)의 기본 사항을 이해해야합니다. 이 지식을 마스터하면 개발 환경을 설정할 수 있습니다. 컴퓨터에 node.js 및 npm (노드 패키지 관리자)을 설치해야합니다. 그런 다음 NPM을 사용하여 Bacon.js를 설치할 수 있습니다. 모든 것이 설정되면 게임 코드 작성을 시작할 수 있습니다. Bacon.js를 사용하여 Pac Man 게임을 구축하는 방법에 대한 단계별 가이드를 보려면 당사 웹 사이트의 튜토리얼을 팔로우 할 수 있습니다.
  Pac Man 게임을 구축 할 때 Bacon.js의 역할은 무엇입니까?
  • bacon.js는 JavaScript 용 기능성 반응 프로그래밍 (FRP) 라이브러리입니다. 사용자 입력과 같은 비동기 이벤트를보다 관리하기 쉽고 읽기 쉬운 방식으로 처리 할 수 ​​있습니다. Pac Man 게임을 구축 할 때 Bacon.js는 사용자 입력 (예 : 키보드 이벤트), 게임 로직 (예 : Pac Man 및 Ghost의 움직임)을 처리하고 게임 상태를 화면으로 렌더링하는 데 사용될 수 있습니다.
  Bacon.js를 사용하여 구축 된 Pac Man 게임을 사용자 정의 할 수 있습니까?
  • 물론
  ! Bacon.js로 기본 PAC 맨 게임을 구축 한 후에는 원하는대로 사용자 정의 할 수 있습니다. 게임의 시각적 효과를 변경하고 새로운 기능을 추가하며 게임 규칙을 수정할 수도 있습니다. 가능성은 끝이 없으며, 가장 중요한 부분은 Bacon.js의 힘과 단순성과 기능적 반응 형 프로그래밍의 혜택을 누리면서 모든 것을 할 수 있다는 것입니다.
  • Bacon.js를 사용하여 구축 된 Pac-Man 게임을 어떻게 디버그합니까?
  Bacon.js로 구축 된 Pac-Man 게임 디버깅은 다른 JavaScript 응용 프로그램을 디버깅하는 것과 유사합니다. 브라우저의 개발자 도구를 사용하여 코드를 확인하고 중단 점을 설정하고 코드를 진행할 수 있습니다. 또한 Bacon.js는 이벤트 스트림에서 오류를 처리하는 데 사용할 수있는 "Onerror"라는 메소드를 제공합니다.
  Bacon.js로 구축 된 Pac Man 게임의 성능을 어떻게 최적화합니까?

  Bacon.js로 구축 된 Pac Man 게임의 성능을 최적화하는 몇 가지 방법이 있습니다. 한 가지 방법은 DOM 업데이트 수를 최소화하는 것입니다. Bacon.js의 "Combinetemplate"기능을 사용하여 여러 스트림을 DOM을 업데이트하는 단일 스트림으로 결합하여이를 달성 할 수 있습니다. 또 다른 방법은 불필요한 스트림 생성을 피하기 위해 "FlatMap"기능을 사용하는 것입니다.

  Bacon.js를 사용하여 다른 유형의 게임을 구축 할 수 있습니까?

  예, Bacon.js를 사용하여 비동기 이벤트를 처리하는 데 필요한 게임 유형을 만들 수 있습니다. 여기에는 Pac Man과 같은 클래식 아케이드 게임뿐만 아니라 실시간 전략 게임 또는 멀티 플레이어 온라인 게임과 같은 더 복잡한 게임도 포함됩니다.

  Bacon.js로 구축 된 Pac Man 게임에 멀티 플레이어 기능을 추가하려면 어떻게해야합니까?

  Bacon.js로 구축 된 Pac Man 게임에 멀티 플레이어 기능을 추가하려면 플레이어 간의 통신을 처리 할 수있는 서버가 필요합니다. 이를 위해 node.js 및 websockets를 사용할 수 있습니다. 클라이언트에서는 Bacon.js를 사용하여 수신 및 나가는 WebSocket 메시지를 처리합니다.

  Bacon.js로 구축 된 Pac Man 게임을 내 웹 사이트에 배포 할 수 있습니까?

  예, Bacon.js로 구축 된 Pac Man 게임을 웹 사이트에 배포 할 수 있습니다. Webpack 또는 Browserify와 같은 도구로 JavaScript 코드를 번들로 묶어야하며 웹 서버의 이미지 및 사운드와 같은 번들 코드 및 게임 리소스를 호스팅 할 수 있습니다.

  다른 JavaScript 라이브러리 또는 프레임 워크와 함께 Bacon.js를 사용할 수 있습니까?

  예, 다른 JavaScript 라이브러리 또는 프레임 워크와 함께 Bacon.js를 사용할 수 있습니다. Bacon.js는 독립형 라이브러리이므로 다른 라이브러리 나 프레임 워크에 의존하지 않습니다. 그러나 다른 라이브러리 또는 프레임 워크와 함께 사용하여보다 복잡한 응용 프로그램을 구축 할 수 있습니다.

  FRP (Functional Reactive Programming) 및 Bacon.js에 대해 자세히 알아볼 수있는 곳은 어디입니까?

  FRP (Functional Reactive Programming) 및 Bacon.js를 배우기 위해 온라인으로 사용할 수있는 많은 리소스가 있습니다. 공식 Bacon.js 문서로 시작하여 라이브러리의 기능 및 API에 대한 포괄적 인 안내서를 제공합니다. FRP 및 Bacon.js를 더 자세히 다루는 튜토리얼, 블로그 게시물 및 온라인 과정도 많이 있습니다.

  위 내용은 Bacon.js로 Pacman 게임 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!