Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
캐릭터가 점프하면서 앞으로 나아가게 만들고있습니다
Viết
·
380
0
점프하면 앞으로 나가게는 만들었는데 방향이 left인 상태에서 점프를 up하면 right을 향한채로 뒤로 점프하게 됩니다.
계속 생각해보다가 도무지 모르겠어서 질문드립니다..!
up에서 기본으로 방향이 right으로 향하는거 같은데 어떻게 해결해야할까요
if (key.keyDown["right"] && key.keyDown["up"]) {
this.el.classList.add("jump_run");
this.el.classList.remove("run");
this.el.classList.remove("jump");
this.el.classList.remove("flip");
this.direction = "right";
this.moveY = this.moveY - this.jump;
this.moveX = this.moveX + this.speed;
setTimeout(() => {
this.el.classList.remove("jump_run");
this.el.classList.add("run");
}, 300);
} else if (key.keyDown["left"] && key.keyDown["up"]) {
this.el.classList.add("jump_run_back");
this.el.classList.add("flip");
this.el.classList.remove("run");
this.el.classList.remove("jump");
this.direction = "left";
this.moveY = this.moveY - this.jump;
this.moveX = this.moveX - this.speed;
setTimeout(() => {
this.el.classList.remove("jump_run_back");
}, 300);
////// 이하 CSS
.hero_box .hero.flip {
transform: rotateY(180deg);
}
.hero_box .hero.jump {
animation: hero_jump 0.5s 1;
}
.hero_box .hero.jump_run {
animation: hero_jump_run 0.5s 1;
}
.hero_box .hero.jump_run_back {
background-size: 1498px 182px;
animation: hero_jump_run_back 0.5s 1;
}
@keyframes hero_jump_run_back {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(-25px, -150px);
}
100% {
transform: translate(-40px, 0);
}
}
@keyframes hero_jump_run_back_flip {
0% {
transform: rotateY(180deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(180deg);
}
}
HTML/CSS인터랙티브-웹javascript
Câu trả lời 1
0
ggangcoding162118
Người chia sẻ kiến thức
안녕하세요 :)
일단 말씀하신 사항으로는 문제에 대해 정확한 이해를 못하겠네요 ^^;
만약 점프를 할 때 방향 문제라면 히어로가 슬라이드를 하는 원리와 같은 원리로 생각하면 편할것 같습니다.
슬라이드 기능과 점프 기능은 크게 다르지 않을 것 같네요 :)
왼쪽을 보고 슬라이드를 하면 왼쪽을 보고 슬라이드 합니다. 그리고 오른쪽을 보고 슬라이드하면 오른쪽으로 슬라이드 하죠!
이부분을 다시한번 고민해보면 좋을 것 같고 다른 문제라면 다시한번 질문을 올려주세요 :)