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

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

차례:

비디오: HTML5 1 to 50 프로모션 게임 - From Biz 2025

비디오: HTML5 1 to 50 프로모션 게임 - From Biz 2025
Anonim

임의의 숫자를 사용하면 재미있는 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 트릭을 사용하여 필요시 사라지게합니다.

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

편집자의 선택

편집자의 선택

Infographics 연구 : Google 검색 수정

Infographics 연구 : Google 검색 수정

Google은 귀하의 infographics에 대한 조사를 수행하는 훌륭한 도구입니다. 더 나은 결과를 얻으려면 Google이 검색 결과 페이지에서 제공하는 필터 옵션을 사용하여 이미지를 검색하고,지도를 포함하고, 판매용으로 사용할 수있는 항목을 찾을 수 있습니다. 또한 특수 검색 용어를 사용하여 검색 범위를 좁히거나 추가 검색 할 수 있습니다.

Infographics : 직원 및 비즈니스 관계 - 인형

Infographics : 직원 및 비즈니스 관계 - 인형

전 세계의 모든 스마트 프로세스는 인포 그래픽 당신이 적절한 도구를 가지고 있지 않다면 그것들을 이용하십시오. 기술 도구 이외에도 직원 및 비즈니스 관계가 정상적으로 작동하는지 확인하면서 고려해야 할 사항은 다음과 같습니다. Infographics work를 모으십시오.

키보드 Tableau - dummy의 단축키

키보드 Tableau - dummy의 단축키

는 키보드 단축키를 사용하여 Tableau 환경을 단순화합니다. 이 바로 가기를 사용하면 차트를 최대한 활용하면서 데이터를 신속하게 처리 할 수 ​​있습니다. 설명 키보드 단축키 Windows Mac 새 워크 시트 Ctrl + M Command-T 새 통합 문서 Ctrl + N Command-N 실행 취소 Ctrl + Z Command-Z 다시 실행 Ctrl + Y Command-Shift-Z 현재 워크 시트 지우기 Alt + Shift + Backspace Option-Shift- 삭제 시트 설명 ...

편집자의 선택

InDesign Creative Suite 5에서 PDF 문서 내보내기 - 인형

InDesign Creative Suite 5에서 PDF 문서 내보내기 - 인형

InDesign CS5에서 PDF 파일을 내보내 문서 배포 Creative Suite 5가 없거나 다른 컴퓨터 및 운영 체제를 사용하는 사용자에게 InDesign CS5로 생성 된 파일입니다. PDF로 내보내는 방법은 다음과 같습니다.

InDesign Creative Suite 5의 텍스트 파일 내보내기 -

InDesign Creative Suite 5의 텍스트 파일 내보내기 -

텍스트를 추출 할 수 있습니다 InDesign 문서에서 가져 와서 다른 곳에서 편집하거나 사용할 수 있습니다. 텍스트 형식은 문서의 텍스트에 따라 약간 씩 다릅니다. 텍스트를 내보내려면 다음 단계를 따르십시오.

내보내기 - Adobe InDesign CS5 내 인형

내보내기 - Adobe InDesign CS5 내 인형

CS5 문서를 Flash Professional 파일로 저장합니다. 이 프로세스는 SWF (Shockwave Flash 파일)를 만듭니다. 내보내려면 다음 단계를 따르십시오.