중합체로 Sokoban을 구축합니다

이 튜토리얼은 재사용 가능한 웹 구성 요소를 만들기위한 JavaScript 라이브러리 인 Polymer를 사용하여 클래식 소코반 게임을 구축하는 것을 보여줍니다. 출판을 위해 yeoman 생성기와 bower를 활용합니다.

주요 개념 :

generator-polymer 중합체 웹 구성 요소 : 사용자 정의, 재사용 가능한 HTML 요소는 소코반 게임을 구조화하여 코드 구성 및 유지 관리를 촉진하기 위해 만들어집니다. 양방향 데이터 바인딩은 실시간 게임 상태 업데이트를 가능하게합니다 사용자 정의 요소 : , 와 같은 요소는 태그를 사용하여 정의됩니다. 속성은 중합체 발현을 사용하여보기에 결합된다.

게임 로직 : 는 게임 맵과 모델을 관리합니다. 사용자 입력은 a 에 의해 처리됩니다. 데이터 바인딩은 자동보기 업데이트를 보장합니다 출판을위한 Bower : 를 구축 한 후 구성 요소는 Bower를 통해 게시하여 Bower 레지스트리에서 액세스 할 수 있으며 에 제출할 수 있습니다. CSS 스타일링은 사용자 정의 요소 내에 캡슐화됩니다

폴리머 설정 :
• 발전기를 설치하십시오 : 새로운 폴리머 프로젝트 만들기 : (표준 구성 요소 추가를 거부 할 수 있습니다.) 이것은 프로젝트 구조 (단순화)를 만듭니다
로 개발을 시작하십시오. (단순화) :
• 사용자 정의 요소 만들기 (예 : ) : 를 사용하여 요소를 생성합니다. sprite-el : box-el 이것은 데이터 바인딩 (), 게시 된 속성 (, sokoban-el, , polymer-element)을 나타냅니다. 게임 로직 및 구성 요소 (, ) :
• 요소는 를 구성하고 상자, 벽 등을 나타냅니다. 를 사용하여 , 입력에 GameController> 및 뷰 업데이트에 대한 데이터 바인딩을 사용하여 게임을 오케스트레이션합니다. 반복 템플릿은 여러 상자를 렌더링하는 데 사용됩니다. 사용자 정의 이벤트 ()는 게임 완료를 신호하기 위해 발사됩니다 KeyboardInputManager Bower와의 출판 :
개발 후 Bower를 사용하여 사용자 정의 요소를 게시하십시오. 웹 구성 요소 태그가 포함되어 있는지 확인하고 에 제출하십시오.

추가 탐사 : 전체 소스 코드는 GitHub에서 사용할 수 있습니다 (원본 기사에서 제공되는 링크). 이 기사는 또한 스타일링, 속성 관찰 및보다 고급 폴리머 특징에 대해 설명합니다. <strong> 갤러리는 기존 웹 구성 요소의 예를 제공합니다 <out>이 개정 된 출력은 원래의 의미를 유지하는 반면 동의어를 사용하여 문장을 다시 구조화하고 개선 된 흐름 및 가독성을위한 구조 조정 단락을 유지합니다. 이미지는 원래 형식과 위치로 유지됩니다</out></strong>

위 내용은 중합체로 Sokoban을 구축합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!