HTML5 게임에서 임의의 숫자를 생성하는 방법 - 더미

비디오: 스크래치 예제 강의.20강-로또 추첨기 (SONOL.마술같은 코딩) 2024

난수는 HTML5 게임 프로그래밍의 핵심 부분입니다. 종종 어떤 종류의 무작위적인 행동이 필요합니다. 이것은 우주의 복잡성과 예측 불가능 성을 모방하는 데 사용됩니다. 대부분의 언어에는 난수 생성기가 내장되어 있습니다.이 특수 함수는 일종의 반 난수를 생성합니다. 숫자를 원하는 패턴에 맞추기 위해 조작을해야하는 경우가 많습니다.

페이지가 조금 복잡해 보이지만 사용법을 알면 강력하고 유연한 시스템을 설명합니다. 다음과 같은 현상이 발생합니다.

JavaScript가 임의의 숫자를 생성합니다.

언어마다 언어마다 다른 방식이 있지만 자바 스크립트에는 0과 1 사이의 임의의 부동 소수점 값을 만드는 함수가 있습니다.이 값은 원시 상자에 표시됩니다.
원시 값에 100을 곱합니다.

이 예제에서는 1에서 100 사이의 숫자를 원합니다. 0을 1로 100을 곱하면 0에서 99가됩니다. 9999 (9가 많이 있음) 값. 점점 가까워지고 있습니다. 시간 100 상자에 원시 값이 100으로 곱해진 후 원시 값이 표시됩니다.
큰 숫자를 정수로 변환합니다.

사용자는 소수점 이하 17 자리로 숫자를 추측하지 않으므로 정수가 필요합니다. JavaScript에는 부동 소수점을 정수로 변환하는 여러 가지 방법이 있습니다. 찾고있는 1에서 100까지의 동작을 얻으려면 Math라는 메서드를 사용합니다. 천장. 최종 결과가 마지막 상자에 표시됩니다.

전체 코드는 다음과 같습니다.

rand100. html fieldset {width: 600px; margin-right: 자동; margin-left: auto;} label {부동: 왼쪽; 너비: 250px; 텍스트 정렬: 오른쪽; margin-right: 1em; clear: left;} span {float: left;} 버튼 {display: 블록; 명확: 둘 다; margin: auto;} function roll () {// 양식 요소에 대한 변수를 만듭니다. var spnRaw = document. getElementById ("spnRaw"); var spn100 = document. getElementById ("spn100"); var spnFinal = document. getElementById ("spnFinal"); // 난수를 구합니다. var raw = Math. 무작위 (); spnRaw. innerHTML = 원시; // 100을 곱한다. times100 = raw * 100; spn100. innerHTML = times100; // 천장을 가져옵니다. var final = Math. 천장 (times100); spnFinal. 주사위 굴리기

게임 코드에 수학 사용
이 프로그램을 작동 시키려면 다음과 같이하십시오. geekiness의 궁극적 인 무기 인 수학을 불러야합니다.

JavaScript에는

Math

라는 멋진 라이브러리가 있습니다. 수학 라이브러리에는 상수 (예: pi) 및 숫자 작업을위한 몇 가지 유틸리티 함수와 같이 일반적으로 많이 사용되는 수학 함수와 같이 매우 괴상한 선량이 포함되어 있습니다. 물론, 처음에는 물론 난수를 생성하는 함수가 있습니다. 수학이라고합니다. random (). 정말로 수학을 말할 필요가 있습니다. random (). random ()을 모두 호출하면 JavaScript는 사용자가 말하는 내용을 알 수 없습니다.

수학. random () 함수는 반 난수를 생성합니다. (실제로는 무작위가 아니지만 다른 수의 복잡한 수식을 통해 생성됩니다.) 난수는 0과 1 사이의 부동 소수점 값입니다.이 값은 도움이되지 않지만 약간의 수학 만 있으면 변환 할 수 있습니다 원하는 다른 모든 범위의 0에서 1 값.

random () 함수 외에도 Math 객체에는 부동 소수점 값 (즉, 소수점이있는 숫자)을 정수로 변환 할 수있는 많은 함수가 있습니다 (숫자가있는 경우)

소수점 없음). 표준 parseInt () 메서드는 JavaScript에 내장되어 있지만 때때로 가벼운 변환을 원합니다. 수학 라이브러리에는 다음 도구가 많이 있습니다: 수학. round (): 표준 반올림 알고리즘을 사용하여 숫자를 변환합니다. 소수 부분이있는 경우. 5 이하이면 더 작은 정수가 선택됩니다. 소수 부분이보다 큰 경우. 도 5에서, 더 큰 정수가 선택된다. 즉, 3. 1 라운드에서 3 라운드, 3. 8 라운드에서 4. 999 수학. floor ():이 함수는 항상 반올림되므로, 3.1과 3.8은 모두 3이됩니다. parseInt () 함수는 Math와 동일합니다. 바닥(). 수학. ceil ():이 함수 (천장 함수를 가져옴)는 항상 반올림되므로 3.5와 4는 모두 4로 끝납니다.

필요한 함수는 특정 상황에 따라 다릅니다.
HTML 게임 양식 작성 방법
항상 그렇듯이 HTML은 모든 JavaScript 프로그램의 기초를 형성합니다. 여기서 가장 중요한 것은 사용자 인터페이스를 제공하는 양식입니다. 이 폼은 예측 가능한 몇 가지 특징을 가지고 있습니다:

미가공 데이터를 저장하는 범위:

실제로 사용자가 입력 할 수있는 것은 없으므로 다양한 출력 요소에 범위를 사용하십시오. 스팬은 일반적인 인라인 태그입니다. 이들은 페이지의 메인 플로우와 인라인 될 수있는 간단한 출력 요소가 필요한 상황에 매우 적합합니다. 원시 데이터 범위가 호출됩니다 (여기에 … 가세요). spnRaw.

times data의 또 다른 범위:
프로그램에서 계산을 수행 할 때 출력이 표시됩니다. 최종 출력을위한 세 번째 범위: 모든 계산이 끝나면 화려한 작업을 표시 할 방법이 필요합니다. spnFinal이이 목적을 수행합니다. 모든 것을 명확하게 해주는 라벨:
무슨 일이 일어나고 있는지 설명하는 라벨이 없으면 화면에 여러 개의 숫자가 표시됩니다. 사용자가 무슨 일이 일어나는지 파악할 수 있도록 간단한 예제에도 레이블을 추가하는 것을 잊지 마십시오. ->
모든 작업을 시작하는 버튼: 사용자가 요청할 때까지 아무 일도 일어나지 않으므로 양식에 버튼을 추가하십시오. 버튼을 클릭하면 roll () 함수를 호출하여 번호를 굴리게합니다.
CSS를 모두 멋지게 꾸미는 CSS:
CSS가없는 HTML은 추악하기 때문에 HTML 양식을보기 좋게 꾸미기에 충분한 CSS를 추가하십시오.