바닐라 JS 및 CSS로 브라우저 기반 게임 만들기 - itepoint

이 기사에서는 바닐라 JavaScript와 CSS 만 사용하여 브라우저 기반 플래그 검사 게임을 구축하여 외부 라이브러리 나 프레임 워크없이 현대 웹 기술의 힘을 보여줍니다. 이 매력적인 게임을 단계별로 만들어 봅시다.

개념:

이 게임은 깃발 이모티콘 및 객관식 옵션을 제공합니다. 플레이어는 국가를 선택하고 피드백을 받고 라운드를 진행합니다.

1 단계 : 기본 구조

우리는 국가와 그 깃발 목록이 필요합니다 (이모티콘 사용). 간단한 인터페이스는 플래그와 5 개의 답변 버튼을 표시합니다. CSS는 반응 형 디자인을 위해 그리드 레이아웃을 사용합니다. 프로젝트 구조에는 HTML 파일, 국가 데이터가 포함 된 data.json 파일 및 JavaScript, 헬퍼 기능, CSS 및 이미지 폴더가 포함됩니다.

2 단계 : 간단한 프로토 타입

fetch 사용하여 data.json 로드 한 다음 게임을 시작합니다. startGame 기능은 국가 목록을 무작위로 만들고 답을 선택하고 4 개국을 더 선택하며 DOM을 플래그 및 답변 버튼으로 업데이트합니다. checkAnswer 함수는 플레이어 선택을 평가하여 피드백을 제공합니다. Fisher-Yates Shuffle 알고리즘은 국가 질서를 무작위 화합니다.

3 단계 : 모듈 식 코드

코드 조직을 개선하기 위해 JavaScript 모듈을 사용합니다. HTML은 별도의 파일에서 헬퍼 함수 ( loadCountries 및 shuffle )를 가져 오는 step3.js 가져옵니다. 게임 로직은 Game 클래스 내에서 캡슐화되어 데이터 무결성과 유지 관리를 향상시킵니다.

4 단계 : 득점 및 게임 오버

Game 생성자에는 이제 numTurns 포함되어 있습니다. DOM은 스코어 디스플레이, 리플레이 버튼 및 게임 오버 화면을 포함하도록 업데이트됩니다. start 메소드는 점수와 회전 카운터를 초기화하고 nextTurn 방법은 라운드 진행을 처리하여 점수를 업데이트하고 모든 턴이 완료되면 게임 오버 상태를 트리거합니다. gameOver 메소드는 최종 점수를 표시합니다.

5 단계 : 애니메이션

CSS 애니메이션은 사용자 경험을 향상시킵니다. 키 프레임은 국가 목록에 대한 슬라이딩 애니메이션을 생성하여 회전 사이에 부드럽게 나타나고 사라집니다. animationend 이벤트는 원활한 전환을 보장합니다.

6 단계 : 최종 터치

컨텍스트를 제공하기 위해 제목 화면이 추가됩니다. 플레이어 등급 시스템은 최종 점수에 따라 구현됩니다. 정답을 축하하기 위해 애니메이션이 추가됩니다.

추가 개선 사항 :

이 기사는 몇 가지 개선 사항을 제안합니다.

• 음향 효과 추가.
• 웹 작업자를 사용하여 오프라인 플레이를 활성화합니다.
• 로컬 스토리지에 게임 통계 저장.
• 소셜 미디어 공유 기능 추가.

이 튜토리얼은 바닐라 JavaScript 및 CSS의 기능을 강조하면서 최소한의 코드로 기능적이고 매력적인 게임을 만드는 방법을 효과적으로 보여줍니다. CSS 애니메이션의 모듈 식 접근 및 사용은 현대 웹 개발을위한 모범 사례를 보여줍니다.

위 내용은 바닐라 JS 및 CSS로 브라우저 기반 게임 만들기 - itepoint의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!