웹의 게임 요소 재현 : 미국 카드 스 와이프 중

웹 개발자는 종종 비디오 게임 디자인에서 영감을 얻습니다. Overwatch 와 같은 인기있는 타이틀의 사용자 인터페이스에서 Pokémon Go 와 같은 게임의 매력적인 역학에 이르기까지 게임 요소는 웹 개발 프로젝트를 향상시킬 수있는 풍부한 가능성을 제공합니다. 이 접근법은 전체 게임을 구축하기보다는 특정 게임 기능을 해결하여 집중적 인 기술 개발을 허용합니다. 이 집중된 접근 방식은 종종 개발자를 새로운 기술과 기술에 노출시킵니다.

이 기사는 미국 카드 스 와이프 정비사를 재현하는 것을 보여줍니다. 익숙하지 않은 사람들의 경우, 우리 중에는 플레이어가 작업을 완료하면서 승무원 간의 사기꾼을 식별 해야하는 멀티 플레이어 게임이 있습니다. 카드 스 와이프 작업은 단순성에도 불구하고 어려움으로 인해 밈적 상태를 달성했습니다.

대화식 데모

다음은 미국 카드 스 와이프의 레크리에이션입니다. (데모는 여기에 포함됩니다)

이 데모를 구축하는 데 사용 된 기술을 살펴 보겠습니다.

마우스 및 터치 이벤트 처리

핵심 기능은 카드를 드래그하기 쉽게 만드는 것입니다. 이 카드는 포인터를 수평으로 따라 독자와 수직으로 정렬합니다. 드래그는 특정 범위로 제한되며 카드는 릴리스시 원래 위치로 재설정됩니다.

마우스 및 터치 이벤트 처리기를 사용하여 달성됩니다. mousedown , mousemove 및 mouseup (또는 Touch Equivalents)의 세 가지 기능 - 상호 작용을 관리합니다. 다음은 단순화 된 JavaScript 코드 스 니펫입니다.

 const card = document.getElementById ( 'card');
const reader = document.getElementById ( 'Reader');
active = false를하자;
InitialX를하자;

// 이벤트 리스너
document.addeventListener ( 'Mousedown', DragStart);
document.addeventListener ( 'mousemove', drag);
document.addeventListener ( 'MouseUp', Dragend);
document.addeventListener ( 'touchstart', dragstart);
document.addeventListener ( 'touchmove', drag);
document.addeventListener ( 'touchend', dragend);

// ... (드래그 스타트, 드래그, 드래그 엔드 및 원본에서와 같이 함수) ...

performance.now() 로 스 와이프 검증

스 와이프 유효성 검사 속도와 거리를 확인합니다. 거리가 충분하지 않거나 속도가 잘못되면 잘못된 스 와이프가 발생합니다.

독자에 대한 카드의 위치는 dragEnd 에서 확인됩니다.

 지위를 보자;
// ... (카드가 완전히 스 와이프되지 않았는지 확인) ...

스 와이프 지속 시간은 dragStart 및 dragEnd 의 performance.now() 타임 스탬프를 사용하여 측정됩니다.

 // ...

리더 요소의 data-status 속성은 유효성 검사 결과에 따라 업데이트됩니다. 그런 다음 CSS는 적절한 메시지를 표시하고 녹색 또는 빨간색 표시등을 조명합니다.

 / * 상태 메시지 및 조명 표시기에 대한 CSS */

비주얼 및 오디오 향상

추가 개선에는 레트로 LCD 룩에 맞춤형 글꼴 (DSEG)을 사용하여 CSS를 사용하여 텍스트에 미묘한 지터 애니메이션을 추가하는 것이 포함됩니다.

 / * 지터 애니메이션을위한 CSS */

마지막으로, 원래 게임의 음향 효과를 통합합니다.

 // ... (유효한/유효하지 않은 스 와이프에 대한 오디오 재생) ...

이것은 전체 사용자 경험을 향상시킵니다.

게임 메커니즘을 복제합니다

이것은 미국 카드 스 와이프 레크리에이션 중에서 게임 요소를 복제하면 웹 개발 기술을 넓힐 수있는 방법을 보여줍니다. 특정 게임 정비사에 중점을 두어 개발자는 관리 가능한 범위 내에서 다양한 기술과 설계 측면을 탐색 할 수 있습니다. 좋아하는 게임 메커니즘을 복제 해보십시오 - 당신은 당신이 배우는 것에 놀랄 것입니다!

위 내용은 웹의 게임 요소 재현 : 미국 카드 스 와이프 중의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!