HTML5 게임에서 숫자 추측을 만드는 방법 - 더미

임의의 숫자를 사용하면 재미있는 HTML5 게임을 만들 수 있습니다. HTML, CSS 및 JavaScript를 함께 사용하는 간단한 게임을 살펴보십시오. 이 게임에는 많은 흥미로운 기능이 있습니다.

• 웹 페이지를 인터페이스로 사용합니다. 많은 자바 스크립트 프로그램과 마찬가지로 웹 페이지를 사용자 인터페이스로 사용합니다. 입력 요소는 입력 용이고 div는 기본 출력 요소이며 버튼은 모든 동작을 트리거합니다.

• CSS를 사용하여 스타일을 지정합니다. 페이지의 다양한 부분은 CSS로 포맷됩니다. CSS는 편의성과 재사용을 위해 외부 스타일 시트에 저장됩니다.

• 사용자가 몇 번이나 그녀를 쏜지를 알려줍니다. 각 패스에서 컴퓨터는 얼마나 많은 회전이 발생했는지 사용자에게 상기시킵니다.

• 사용자가 올바르게 추측하면 다시 시작 버튼이 나타납니다. 이 버튼은 처음에는 숨겨져 필요시에만 나타납니다.

• 올바른 대답은 특별한 디버깅 기능을 통해 프로그래머에게 제공됩니다. 프로그램을 테스트하는 동안 개발자는 정답이 무엇인지 알 수 있지만이 정보는 사용자에게 표시되지 않습니다.

• init () 함수가 게임을 시작합니다. init () 함수는 게임을 초기화합니다. 프로그램이 처음 시작될 때 호출되고 사용자가 다시 시작하려고 할 때 다시 호출됩니다. ->

  다른 기능이

• 버튼에 부착되어 있습니다. 사용자가 추측을 확인 버튼을 클릭하면 현재 사용자의 추측이 올바른 답과 비교되고 힌트가 사용자에게 반환됩니다. 게임 프로그램을 디자인하는 방법

  

복잡한 프로그램을 만들 때는 디자인 계획부터 시작해야합니다.

프로그래밍을 시작하기 전에 게임 개발 작업의 대부분이 발생합니다. 게임을 잘 디자인하면 프로그래밍이 훨씬 쉬워집니다. 게임 디자인은 코드 작성을 시작하기 전에 게임에 대한 많은 것을 이해하는 데 도움이됩니다.

일반 레이아웃:

• 레이아웃이이 그림에 의해 완전히 결정되지는 않지만 일반적인 모양을 쉽게 볼 수 있습니다. 명명 된 요소:

• 이름이 필요한 모든 요소가 결정되고 문서에 이름이 기록됩니다. 첫 번째 버튼과 같은 일부 요소는 코드에서 참조되지 않기 때문에 이름이 필요하지 않습니다. 버튼 기능:

• 각 버튼은 기능을 호출합니다. 다이어그램은 각 버튼이 호출 할 기능을 나타냅니다. 기능 계획:

• 모든 기능은 기능에 대해 영어로 설명되어 있습니다. 전역 변수:

• 함수간에 공유해야하는 변수가 설명됩니다. 실제로는 좋은 디자인 문서를 만드는 것이 어렵지만 이렇게하면 프로그래밍이 훨씬 쉬워집니다. 당신이하려고하는 것을 알아내는 것은 어렵고 그것을하는 방법을 찾는 것도 어렵습니다. 설계 문서를 작성하면 두 프로세스가 분리되므로 먼저 수행중인 작업

에 집중하고 어떻게 수행 할 것인지 걱정하십시오. 게임용 HTML 작성 방법 숫자 추측 게임의 HTML 코드는 게임을 종이로 디자인 한 경우 작성하기가 쉽습니다. 여기에 코드가 있습니다: Number Guesser

Number Guesser

0에서 100 사이의 숫자를 생각하고 있습니다. 숫자가 너무 높거나, 너무 낮거나, 정확하면 알 수 있습니다. 추측을 다시 확인하십시오.

HTML, CSS 및 JavaScript를 분리하는 것이 좋습니다.이 방법을 사용하면 큰 문제를 여러 가지 작은 문제로 "나누고 정복"할 수 있기 때문입니다. 다음은 HTML 문서의 주요 기능입니다.

외부 파일의 CSS에 대한 링크.
현재 CSS는 중요하지 않으므로 별도의 파일로 옮겨서 나중에 작업 할 수 있습니다.

JavaScript 코드를 아웃소싱합니다.

1. JavaScript 코드를 외부 파일로 옮기므로 아직 걱정할 필요가 없습니다. HTML 코드에서 단순히 외부 파일에 대한 링크를 만듭니다.

   페이지의 주요 구성 요소로 양식을 작성하십시오.

2. 이 페이지의 가장 중요한 부분은 양식입니다. 대부분의 양식과 마찬가지로 필드 세트, 레이블, 입력 요소 및 단추가 있습니다.

   출력을 위해 div를 만듭니다.

3. 출력 div는 보통 div입니다. 필드 집합 안에 넣으면 양식의 나머지 부분과 시각적으로 연결됩니다. div 안에 기본 텍스트를 넣을 수 있습니다 (나중에이 텍스트를 변경할 수도 있음). div는 코드를 통해 참조되기 때문에 id 속성이 필요합니다.

   사용자가 추측 할 수있는 입력 영역을 만듭니다.

4. 사용자는 일종의 숫자 입력을 입력해야합니다. 이 목적을 위해 입력 요소를 사용하십시오. 이 요소의 ID를 기억하려면 문서를 참조하십시오. (사용자가

   디자인 문서를 만들었습니까?) 입력에 라벨을 추가하여 사용자가 예상되는 것을 알 수 있도록하는 것이 좋습니다.

5. 추측을 확인하기위한 버튼을 만듭니다.

   추측을 확인 버튼을 클릭하기 전까지 사용자는 추측을하지 않습니다. 그래서, 정말로 그러한 버튼이 필요합니다. 이 버튼에는 이름은 필요 없지만 checkGuess () 함수가 호출됩니다. 다시 시작하려면 두 번째 버튼을 만드십시오. 이 프로그램의 흥미로운 기능 중 하나는 사용자가 다시 시작할 수있는 버튼입니다. 이 두 번째 버튼은 사용자가 정확하게 추측 한 경우에만 사용할 수 있습니다. 일반 HTML로 생성하고 CSS 및 JavaScript 트릭을 사용하여 필요시 사라지게합니다.