자바스크립트 게임 개발 : 『삼국지 조조전』 컴포넌트 개발 (3) 상황별 대화에서 타자기 출력 텍스트 모방_자바스크립트 기술

처음 두 번의 강의에서는 캐릭터를 움직이게 하는 방법을 알려드렸으니, 오늘은 『삼국지』의 『조조』에 등장하는 캐릭터를 흉내 내는 대사를 구현하는 방법에 대해 살펴보겠습니다. 아래에 특정 링크를 작성했습니다.

1. 서문

아직도 어떤 뉴스에서는 타자기와 같은 방법으로 텍스트를 만들어내면 끔찍한 결과가 나온다는 사실을 다들 기억하실 거라 믿습니다. 그래서 오늘의 주요 목적은 이것을 하는 것입니다.

9월 5일, 사무실에서 이런 시술을 하자는 아이디어가 떠올랐고 몇 가지 아이디어가 있었습니다. 우선 마진을 조정하는 방법을 사용하고 싶었지만, 결국 매우 번거롭고 기술이 좋지 않았습니다. 그래서 저는 배열과 루프를 사용할 것입니다. 9월 13일에 시간을 내서 작성했는데, 요즘 너무 바빠서 근무일 중에는 블로그를 관리하는 것이 기본적으로 불가능하여 여러분께 공유할 시간이 없었습니다. 이제 주말이니까 내 경험을 여러분과 공유하겠습니다. 함께 발전할 수 있기를 바랍니다.

2. 코드 설명

먼저 코드를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var contentout = [];
var content = "ducle, ducle, ducle, ducle..."
contentout = content.substring(0, content.length)
var sub = 0 ;

var time = 0;

function input(){
for(var i = 0; i setTimeout("document .getElementById(' ID_P_CONTENT').innerHTML = contentout[sub], sub = 1", time);
time = 100;
}
}

이것을 사용했습니다. 코드에서 예상치 못한 결과가 발생했습니다. 하하, 설명이 좀 과장됐긴 했지만, 정말 제가 원하는 걸 얻게 됐어요. 더 이상 고민하지 말고 분석을 살펴보겠습니다.

이러한 코드는 입력을 완료하고 배열, 루프 및 몇 가지 일반 변수만 사용합니다. 난이도는 그리 높지 않다고 볼 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var contentout = []; var content = "ducle, ducle, ducle, ducle...";
contentout = content.substring(0, content.length)
var sub = 0; ;


여기에서는 전역 변수를 정의합니다. 첫 번째는 배열을 정의하는 것입니다. 결국 배열과 루프가 이 프로그램의 핵심입니다. 그런 다음 문자열을 정의하고 내용을 "ducle, ducle, ducle, ducle..."로 설정했습니다. 다음 단계는 문자가 하나씩 배열에 들어가도록 만드는 것입니다. 그래서 문자열을 하나씩 문자로 자르도록 설계된 substring() 함수를 사용했습니다.

하위 문자열 구문: stringObject.substring(start,stop)
w3cschool도 확인할 수 있습니다:
http://www.jb51.net/w3school/js/jsref_substring .htm
문자열을 하나씩 잘라낸 후 잘라낸 값을 배열에 할당해야 합니다. 이때 배열은 각 단어를 멤버로 하나씩 올바르게 입력할 수 있습니다. 아래첨자. 누구나 내가 다음에 무엇을 하고 싶은지 짐작할 수 있습니다. 즉, 루프를 사용하여 배열의 내용을 표현하는 것입니다.
나머지 변수 sub는 나중에 배열 요소를 출력할 때 사용하는 첨자 변수입니다. 시간은 나중에 루프를 입력할 시간입니다. 자세한 분석은 아래에서 다루겠습니다. 코드를 다시 보세요:

코드 복사 코드는 다음과 같습니다. function input(){

for(var i = 0; i setTimeout("document.getElementById('ID_P_CONTENT').innerHTML = contentout[sub], sub = 1", 시간);
시간 = 100;
}
}


특히 루프를 사용하여 배열의 요소를 하나씩 출력하는 핵심 부분입니다. JavaScript 루프에서 가장 짜증나는 점은 변수가 먼저 루프된다는 점을 누구나 알고 있습니다. 즉, 루프할 때마다 경고와 함께 여기에 변수 i를 입력하면 항상 동일한 값을 가지며 최대값과 동일하게 됩니다. 그래서 위에서 정의한 하위 변수가 작동하게 됩니다.

하위 변수는 대기 후 처리되기 때문에 몇 번을 반복하더라도 일정 시간=1이 될 때까지 대기해야 합니다. 그렇다면 출력할 때 첨자로 사용하는 것이 더 적절합니다.

모두가 setTimeout 함수를 이해합니다. 동일한 시간을 갖는 두 개의 setTimeout 시간 매개변수가 있으면 코드가 같은 줄에 작성되지 않더라도 두 코드가 동시에 실행됩니다. 따라서 반복될 때마다 100을 추가하고 100밀리초 후에 텍스트가 하나 더 표시됩니다.

또한 여기에서 개체의 내용을 변경하려면 =를 사용해야 합니다. 그렇지 않으면 한 번에 한 단어만 표시됩니다.

코드 다운로드 주소
3. 시연효과

첫 번째는

그런 다음:

마지막으로:

데모 주소:
4. 포스트스크립트

열심히 노력하면 성공할 수 있다고 생각합니다. 앞으로도 좋은 기술이 있으면 바로 공유하도록 하겠습니다. 최근에는 이전에 이야기했던 기술들을 정리하여 작은 데모를 만들었습니다. 모두 마음에 드셨으면 좋겠습니다. 데모의 다운로드 및 시험 플레이는 곧 발표될 예정이며 아직 테스트 중입니다. 또한 게임 개발과 게임 엔진도 중요합니다. 게임 디자인을 더 쉽게 할 수 있는 엔진을 직접 개발할 계획입니다.
지원해주셔서 감사합니다!