도드넷
JAVASCRIPT#69 - 메인루프 물체 움직이기 충돌 구현 본문
I used to be love drunk now i'm in hang over i need your love for breakfast
♥ Marry me applejack
JAVASCRIPT#69 - 메인루프와 물체 움직이기 충돌 구현
1. 메인 루프
- 게임 실행후 지속적으로 반복되는 함수 부분
- 지속적으로 물체(나뭇조각)을 움직이게한다.
- 해당라인의 물살 속도에 맞춰 플레도 함께 움직이게 한다.
var gameloop = function()
{
packets1.position = packets1.position + packets1.speed;
packets2.position = packets2.position + packets2.speed;
packets3.position = packets3.position + packets3.speed;
packets4.position = packets4.position + packets4.speed;
$("#packets1").css("background-position", ""+packets1.position + "px 0px");
$("#packets2").css("background-position", ""+packets2.position + "px 0px");
$("#packets3").css("background-position", ""+packets3.position + "px 0px");
$("#packets4").css("background-position", ""+packets4.position + "px 0px");
var newPos = gf.x("player");
switch(gameState){
case "LINE1" :
newPos = newPos + packets1.speed;
break;
case "LINE2" :
newPos = newPos + packets2.speed;
break;
case "LINE3" :
newPos = newPos + packets3.speed;
break;
case "LINE4" :
newPos = newPos + packets4.speed;
break;
}
gf.x("player", newPos);
}
2. 키 바인딩 캐릭터 움직이기 + 라인 게임상태 설정하기
$(document).keydown(function(e)
{
if(toggler == 1)
{
switch(e.keyCode)
{
case 65:
gf.x("player", gf.x("player") - 5);
break;
case 68:
gf.x("player", gf.x("player") + 5);
break;
case 87:
switch(gameState)
{
case "START" :
toggler = 0;
$("#player").animate({top:370}, function(){gameState = "LINE1"; toggler = 1; detectSafe(gameState);});
break;
case "LINE1" :
toggler = 0;
$("#player").animate({top:330}, function(){gameState = "LINE2"; toggler = 1; detectSafe(gameState);});
break;
case "LINE2" :
toggler = 0;
$("#player").animate({top:290}, function(){gameState = "LINE3"; toggler = 1; detectSafe(gameState);});
break;
case "LINE3" :
toggler = 0;
$("#player").animate({top:250}, function(){gameState = "LINE4"; toggler = 1; detectSafe(gameState);});
break;
case "LINE4" :
toggler = 0;
$("#player").animate({top:195}, function(){gameState = "LINE5"; toggler = 1; detectSafe(gameState);});
break;
case "LINE5" :
toggler = 0;
$("#player").animate({top:155}, function(){gameState = "LINE6"; toggler = 1; detectSafe(gameState);});
break;
case "LINE6" :
toggler = 0;
$("#player").animate({top:115}, function(){gameState = "LINE7"; toggler = 1; detectSafe(gameState);});
break;
case "LINE7" :
toggler = 0;
$("#player").animate({top:75}, function(){gameState = "LINE8"; toggler = 1; detectSafe(gameState);});
break;
case "LINE8" :
toggler = 0;
$("#player").animate({top:35}, function(){gameState = "LINE9"; toggler = 1; detectSafe(gameState);});
break;
case "LINE9" :
toggler = 0;
$("#player").animate({top:0}, function(){gameState = "WON"; toggler = 1; detectSafe(gameState);});
break;
}
break;
case 83:
switch(gameState)
{
case "LINE1" :
toggler = 0;
$("#player").animate({top:430}, function(){gameState = "START"; toggler = 1; detectSafe(gameState);});
break;
case "LINE2" :
toggler = 0;
$("#player").animate({top:370}, function(){gameState = "LINE1"; toggler = 1; detectSafe(gameState);});
break;
case "LINE3" :
toggler = 0;
$("#player").animate({top:330}, function(){gameState = "LINE2"; toggler = 1; detectSafe(gameState);});
break;
case "LINE4" :
toggler = 0;
$("#player").animate({top:290}, function(){gameState = "LINE3"; toggler = 1; detectSafe(gameState);});
break;
case "LINE5" :
toggler = 0;
$("#player").animate({top:250}, function(){gameState = "LINE4"; toggler = 1; detectSafe(gameState);});
break;
case "LINE6" :
toggler = 0;
$("#player").animate({top:195}, function(){gameState = "LINE5"; toggler = 1; detectSafe(gameState);});
break;
case "LINE7" :
toggler = 0;
$("#player").animate({top:155}, function(){gameState = "LINE6"; toggler = 1; detectSafe(gameState);});
break;
case "LINE8" :
toggler = 0;
$("#player").animate({top:115}, function(){gameState = "LINE7"; toggler = 1; detectSafe(gameState);});
break;
case "LINE9" :
toggler = 0;
$("#player").animate({top:75}, function(){gameState = "LINE8"; toggler = 1; detectSafe(gameState);});
break;
case "WON" :
toggler = 0;
$("#player").animate({top:35}, function(){gameState = "LINE9"; toggler = 1; detectSafe(gameState);});
break;
}
break;
}
}
});
Point1. 키바인딩 하는 방법
- document를 셀렉터로 잡고 keydown 메소드에 switch(e.keyCode)문을 이용한다.
$(document).keydown(function(e){switch(e.keyCode) case 53: @@@@@ });
Point2. toggler?
- 애니메이션이 끝나기도 전에 다른 애니메이션이 재생되서 도착지점까지 가기전에 다른 명령을 받는 현상을 막기위해서 toggler를 설정, animate 메소드에 의해 애니메이션이 끝나면 콜백으로 불러서 원상태로 돌려놓게 만듬.
3. 충돌 구현
var detectSafe = function(state)
{
switch(state)
{
case "LINE1":
var relativePosition = (gf.x("player") - packets1.position) % 200;
if(relativePosition < 0)
{
relativePosition = relativePosition + 200;
}
console.log(gf.x("player") + " - " + packets1.position + " = " + relativePosition);
if(relativePosition > 90 && relativePosition < 185)
{
alert("You've safely made it");
return true;
}
else
{
alert("You've failed to jump");
return false;
}
break;
case "LINE2":
var relativePosition = (gf.x("player") - packets2.position) % 200;
if(relativePosition < 0)
{
relativePosition = relativePosition + 200;
}
console.log(gf.x("player") + " - " + packets2.position + " = " + relativePosition);
if(relativePosition > 90 && relativePosition < 185)
{
alert("You've safely made it");
return true;
}
else
{
alert("You've failed to jump");
return false;
}
break;
case "LINE3":
var relativePosition = (gf.x("player") - packets3.position) % 200;
if(relativePosition < 0)
{
relativePosition = relativePosition + 200;
}
console.log(gf.x("player") + " - " + packets3.position + " = " + relativePosition);
if(relativePosition > 90 && relativePosition < 185)
{
alert("You've safely made it");
return true;
}
else
{
alert("You've failed to jump");
return false;
}
break;
case "LINE4":
var relativePosition = (gf.x("player") - packets4.position) % 200;
if(relativePosition < 0)
{
relativePosition = relativePosition + 200;
}
console.log(gf.x("player") + " - " + packets4.position + " = " + relativePosition);
if(relativePosition > 90 && relativePosition < 185)
{
alert("You've safely made it");
return true;
}
else
{
alert("You've failed to jump");
return false;
}
break;
}
}
Point1. % 연산에 대한 고찰
- 얘를 들어 어떤 수의 집합이 있다고 하자 집합에는 0부터 3억까지 들어있다.
만약 이 집합을 % 2 를 해주면 결과값은 오직 두가지 0 또는 1 만 나오게 된다.
다른 예를 들어서,
[ 이 세상에서 가장 큰 수 :: 999,999,999..... ] % 200 의 값은?
정확한 값은 모르지만 결과값은 반드시 0~199 이내의 어떤 수 라고 할 수 있다.
Point2. 어떻게 충돌을 구현했지?
- (플레이어 위치 - 그림위치) % 그림단위를 해서 차잇값을 그림단위 범위(0~199)로 한정시킴. 이런식으로 한정시키면 반환값은 곧 그림 단위내에서의 플레이어의 위치를 반환하게 됨. (만약 값이 음수가 될 경우 그림단위를 더해줘서 양수값으로 만들어줌)
- 값이 만약 특정(나무)범위안에 속할경우 충돌이벤트 발생시킴.
다음에는 데스씬과 나머지라인에 좀비추가해야지.
'창고 > JS KING 포니 [중단]' 카테고리의 다른 글
| JAVASCRIPT#71 - 최적화1. 인터벌과 타임아웃 줄이기 (0) | 2016.07.18 |
|---|---|
| JAVASCRIPT#70 - 랜덤위치와 충돌 구현2 (1) | 2016.07.16 |
| JAVASCRIPT#68 - 게임 초기화 RECAP. (0) | 2016.07.14 |
| JAVASCRIPT#67 - CSS relative vs absolute 그리고 parseInt (0) | 2016.07.13 |
| JAVASCRIPT#66 - 다시 한걸음씩. (0) | 2016.07.13 |