자바스크립트 게임 개발 중 '삼국지조조' 컴포넌트 개발 (2) 캐릭터 걷기_자바스크립트 스킬 구현

지난 강의에서는 정적 캐릭터를 동적으로 만드는 방법에 대해 이야기했습니다. 오늘은 캐릭터를 움직이게 하는 방법에 대해 이야기하겠습니다. 이번 강의는 이전 강의 내용과 관련이 있기 때문에 아래에 이전 강의 링크를 작성했습니다.

1. 사진 준비

오늘은 사진을 좀 더 신선하게 바꿔보겠습니다.

이 자료는 아직도 『삼국지조조전』에 나온 것입니다. 제 기억이 맞다면 조조의 자료일 것입니다. 다음은 지난번의 기술을 조합하여 캐릭터를 움직이는 방법을 알려드리겠습니다. 하지만 오늘은 이전 강의에서 캐릭터를 정적인 상태에서 동적으로 움직이는 방법에 대해 이미 이야기했기 때문에 캐릭터를 움직이는 방법에 중점을 둡니다.

2. 코드 설명

전체 자바스크립트 코드 살펴보기:

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

var moveLengthLeft = 0;
var moveLengthTop = 0

var actionST = 0; 🎜>
var pic = 0;

function action()
{
var pic1 = "./pic2.png"
var pic2 = "./pic3.png ";
var pic3 = "./pic1.png";
var actionArray = [pic1, pic2, pic3];

var doc = document.getElementById("ID_IMG_CAOCAO");

if (pic == actionArray.length - 2){
pic = 0;
}else{
pic = 1
}

if(pic > ; 2) {
pic = 2;
doc.src = "./pic1.png"
}

doc.src = actionArray[pic]

function walk()
{
setInterval(action, timeInterval)

for(var i = 0; i < 100; i ){
$("# ID_IMG_CAOCAO") .animate({marginLeft: moveLengthLeft}, 10, function(){ //jquery에서 animate를 사용하여 캐릭터의 걷기 제어
actionST ;

if(actionST == 100){
standCaocao( );
}
}) // 애니메이션이 완료되면 콜백을 호출합니다. 콜백에 함수를 넣을 수 있습니다.

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);

moveLengthLeft = 2;
moveLengthTop = 1;

functionstandCaocao()
{
pic = 2;
}


로컬 분석은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.function action() { var pic1 = "./pic2 .png"; var pic2 = "./pic3.png";

var pic3 = "./pic1.png";

var actionArray = [pic1, pic2, pic3];

var doc = document .getElementById("ID_IMG_CAOCAO");

if (pic == actionArray.length - 2){
pic = 0
pic = 1;
}

if(pic > 2){
pic = 2;
doc.src = "./pic1.png"
}

doc.src = actionArray [pic];
}


위 코드에 대해서는 지난 강의에서 이미 언급했기 때문에 오늘은 따로 다루지 않고 어떻게 하는지만만 이야기하겠습니다. 캐릭터를 움직이게 합니다.

우선 객체를 움직이게 하려면 의심할 바 없이 jquery가 필요합니다. 예, 오늘은 그 기능 중 하나인 애니메이션을 사용해 보겠습니다.
코드를 다시 살펴보세요.

코드를 복사하세요.

코드는 다음과 같습니다.

함수 걷기() { setInterval(action, timeInterval) for(var i = 0; i < 100; i ){

$("# ID_IMG_CAOCAO").animate( {marginLeft: moveLengthLeft}, 10, function(){ //jquery에서 animate를 사용하여 캐릭터의 걷기 제어

actionST ;

if(actionST == 100){
standCaocao();
}
}); // 애니메이션이 완료되면 콜백을 호출합니다. 콜백에 함수를 넣을 수 있습니다.

$("#ID_IMG_CAOCAO").animate({marginTop: moveLengthTop}, 10);

moveLengthLeft = 2;
moveLengthTop = 1;



이러한 코드는 주로 콜백 및 애니메이션에서 문자의 움직임과 정지를 구현할 수 있습니다. 콜백은 주로 캐릭터를 멈추게 하고, 애니메이트는 주로 캐릭터를 움직이게 합니다.

일반적으로 animate의 구문은 animate({css 코드 변경}, 완료 시간, 콜백);입니다. 자세한 내용은
http://www.jb51.net/w3school/jquery/jquery_ effects.htm
을 참조하세요. 여기에는 다른 많은 jquery 함수가 있으며 이에 대해 자세히 알아볼 수 있습니다.

물론 애니메이트도 당연하지만 콜백은 어떨까요? ? ? animate 안에 숨겨져 있는 것으로 밝혀졌습니다.

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

function(){ //jquery에서 animate를 사용하여 캐릭터 걷기 제어

if(actionST == 100){
standCaocao()
}
}); // 애니메이션이 완료되면 콜백을 호출합니다. 콜백에 함수를 넣을 수 있습니다.

이 코드는 콜백입니다. 단지 그의 위치를 ​​함수에 넣었기 때문에 눈에 잘 띄지는 않습니다.
콜백에 대한 일부 튜토리얼:
http://www.jb51.net/w3school/jquery/jquery_callback.htm
코드 문자열도 있습니다:

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

function standCaocao()
{
pic = 2 ;
}

이 코드는 주로 동적 문자를 정적 문자로 변환하는 데 사용됩니다. 이 움직임이 멈추면 캐릭터의 움직임도 사라집니다.

소스 코드 다운로드: (jquery-1.8.0.js 파일 포함)

3. 시연효과

첫 번째는

그런 다음:

마지막으로:

데모 장소

후기

우선, 캐릭터의 걷기와 움직임은 게임 제작의 필수 요소입니다. 좋은 알고리즘과 기능을 선택하는 것이 성공의 열쇠입니다.

다음번에는 "삼국지"의 "조조"에 나오는 등장인물의 줄거리 대화를 모방하기 위해 js를 사용하는 방법을 연구하겠습니다. 계속 지켜봐 주시기 바랍니다!

더 많은 응원 부탁드립니다. 감사합니다. 더 좋은 글로 보답하겠습니다.