자바스크립트 게임 개발 : '삼국지 조조전' 컴포넌트 개발 (1) 정적 캐릭터 만들기 move

자바스크립트 게임 개발 : '삼국지 조조전' 컴포넌트 개발 (1) 정적 캐릭터 만들기 move_javascript 스킬

WBOY

풀어 주다： 2016-05-16 17:42:59

원래의

2508명이 탐색했습니다.

우선 게임을 플레이할 수 있으려면 움직임과 움직임이 결합되어야 합니다. (하하 다들 제가 합성 얘기를 할 줄 알았는데... 사실 제가 오늘 이야기하고 싶은 건 자바스크립트에요) 정적인 일을 모르는 사람이 어디 있겠어요? 사물은 태어날 때 정적이기 때문에(gif 애니메이션을 사용하지 않는 한) 정적을 달성하기 위해 처리가 필요하지 않습니다. 그런 다음 Javascript를 사용하여 정적 그림을 동적 그림으로 바꾸는 방법을 알려 드리겠습니다.

1. 사진 준비

fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png 우선 고전 게임을 몇 개 찾았습니다. 게임 "삼국지" "조조 전기"의 자료(위 장군 파운드의 사진입니다). 아래에서는 이러한 스틸 이미지를 사용하여 고요함을 움직임으로 바꾸는 방법을 보여 드리겠습니다. 코드를 시연하려면 위 그림을 다운로드하십시오. 그림 이름은 아래 열에 해당합니다.

2. 코드 설명

먼저 다음 자바스크립트 코드를 살펴보세요.

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

var picSub = 0; 

var time = 150; //시간 간격(밀리초) 

var pic1 = ". /01.png"; 
var pic2 = "./02.png"; 
var pic3 = "./03.png"; 
var pic4 = "./01.png"; 
var picArr = [pic1 , pic2, pic3, pic4]; //배열을 정의하고 그림의 위치에 해당하는 변수를 넣습니다.

setInterval(changeImg, time); 특정 시간에 따라 전환

functionchangeImg() 
{ 
var xElem = document.getElementById("ID_IMG_ROLE") 

if(picSub == picArr.length- 1){ 
picSub = 0; 
}else{ 
picSub = 1; 
} //그렇다면 배열 첨자를 0으로 재설정하여 초과하지 않도록 하세요. 초과하지 않음 

xElem.src = picArr[picSub]; //사진 전환
} 

functionchangeFight() 
{ 
pic1 = "./fight01.png "; 
pic2 = "./fight02.png"; 
pic3 = "./fight03.png"; 
pic4 = "./fight04.png"; 

picArr = [ pic1, pic2, pic3, pic4]; 
 
setTimeout(reduction, 600); 
} 

function 감소() 
{ 
pic1 = "./01. png"; 
pic2 = "./02 .png"; 
pic3 = "./03.png"; 
pic4 = "./01.png"; 
picArr = [pic1, pic2, pic3, pic4]; 
}

이 코드는 제가 가장 좋아하는 배열을 사용합니다. 물론 여기 배열은 전체 프로그램의 핵심이기도 합니다. 다음은 단어에 대한 설명입니다.

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

 var pic1 = "./01.png"; 
var pic2 = "./02.png"; 
var pic3 = "./03.png" 
var pic4 = " ./01.png"; 
var picArr = [pic1, pic2, pic3, pic4]; //배열을 정의하고 그림의 위치에 해당하는 변수를 넣습니다 

우선 배열에는 사진의 위치에 해당하는 여러 변수를 넣었습니다. 다음 작업을 위해.
코드를 다시 보세요:

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

var xElem = document.getElementById("ID_IMG_ROLE"); 

if(picSub == picArr.length-1){ 
picSub = 0; 🎜>picSub = 1; 
} //배열 길이를 초과했는지 확인합니다. 초과하지 않도록 배열 첨자를 0으로 반환합니다. 

xElem.src = picArr[picSub]; // 그림 전환 


여기서 if...else 문을 사용하여 배열 첨자가 배열 길이를 초과하는지 확인합니다. 초과하는 경우 첨자가 0으로 반환됩니다. 그런 다음 배열의 아래 첨자에 해당하는 이미지 위치를 가져와 ID 속성 ID_IMG_ROLE을 사용하여 img 태그의 src 속성에 할당합니다. 이렇게 하면 그림이 계속 변경될 수 있습니다. 따라서 이 시점에서 그에게 함수를 호출할 수 있는 장소를 제공하면 작업이 완료됩니다! 사진이 순간적으로 표시되지 않게 하려면 대기 시간(초)을 주고 기다린 후 다음 사진을 표시해야 합니다. 그래서 다음 코드를 사용하여 함수를 호출했습니다. 

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

var time = 150; //시간 간격(밀리초)

setInterval(changeImg, time) //특정 시간에 사진 전환

이렇게 하면 그림이 움직일 것입니다. 여기에도 기능을 추가했습니다. 녹색 테두리에서 마우스 왼쪽 버튼을 누르면 내부의 캐릭터가 공격합니다. 원리도 매우 간단합니다.
모든 사람의 테스트 편의를 위해 모든 사람이 다운로드할 수 있도록 아래에 html을 포함한 모든 코드를 넣었습니다.

다운로드 코드 제공

: 3. 시연 효과
첫 번째는

그런 다음: