지난 시간에 class 공부를 마쳐서 class로 구현할 수 있을줄 알았는데 아니였고… 영웅을 화면에 띄우는 것부터 시작해서 동작 구현 등을 같은 기수 광훈님의 도움을 엄청 많이 받았다. 감사합니다 ㅠㅠ
함수로 쓴 코드와 클래스로 쓴 코드를 먼저 비교해보자!
함수로 구현
var hero_position = 400
var hero = document.getElementById('hero')
function left() {
hero.style.backgroundPositionX = 70+'px
//이 부분을 처음에 background-position-x로 써서 오류가 났음
hero_position -= 10
hero.style.left = hero_position + 'px'
//hero의 포지션이 0일때 멈추게 하는 법
if(hero_position <= 0) {
hero_position = 0
}
}
function right() {
hero.style.backgroundPositionX = 35+'px'
hero_position += 10
hero.style.left = hero_position + 'px'
//hero의 포지션이 764일때 멈추게 하는 법
if(hero_position >= 762) {
hero_position = 762
}
}
function moving(event) {
if(event.keyCode === 37) {
left()
}
if(event.keyCode === 39) {
right()
}
}
window.addEventListener('keydown',function(event) {
moving(event)
})처음에 실수했던 부분
- backgroundPositionX를 CSS에서 쓰던 대로 하이픈(-)을 썼다가 오류가 발생. Camel case로 적어보니 그 오류는 해결쓰!
아직 나는 초보자이고, 게임을 구현하는 게 생소하다 보니 이미지를 자르는 데서부터 시간이 굉장히 오래 걸렸는데 함수 자체는 간단쓰! 이게 될까??? 하는 의심으로 쉽사리 식을 써내려가지 못했다 ㅋㅋ
기계를 좀 더 믿자.
Class로 구현
class Hero {
// 인스턴스가 생성될때 같이 실행할 프로퍼티들 담기
constructor(parents) {
this.parents = parents;
this.hero = this.create_hero();
this.hero_position = 400;
window.onkeydown = this.move_hero.bind(this);
}
// 김영웅 등장쓰!
create_hero() {
let elhero = document.createElement('div');
elhero.className = 'hero';
this.parents.appendChild(elhero);
return elhero;
}
move_hero(event) {
switch(event.keyCode) {
case 37:
this.hero.style.backgroundPositionX = 70+'px'
this.hero_position -= 10;
this.hero.style.left = this.hero_position +'px'
if (this.hero_position <= 0 ) {
this.hero_position = 0;
}
break;
case 39:
this.hero.style.backgroundPositionX = 35+'px'
this.hero_position += 10;
this.hero.style.left = this.hero_position +'px'
if(this.hero_position >= 762) {
this.hero_position = 762;
}
break;
}
}
}
let parentsMainDiv = document.getElementById("bg");
let hero = new Hero(parentsMainDiv);사실 김영웅씨 파트는 class로 구현했을 때의 메리트를 별로 못 느끼겠다 ㅠㅠ 유령 파트를 class로 구현하면 뭔가 아!! 이거였어? 하는 느낌이 올텐데.. 유령은 동작 구현을 class로 하지 못해서 포기한 상태 ㅠㅠ 월요일날 위코드 멘토 ♥예리님♥께서 봐주실 예정쓰
글이 너무 많으면 지루해지니깐 위의 식을 그림으로 분석해봤다 ㅋㅋ
- class 하단에 배경화면을 불러와서 우리가 부모라고 설정한 다음 김영웅과 연결
- dom에서처럼 document.getElementsbyClassName 를 써서 hero를 불러왔었는데 div부터 새로 만들어야 한다는 사실..
- 위에서 생성한 element와 parent를 꼭
appendChild로 묶어줘야 한다!
appendChild하니까 최근에 꾼 꿈이 생각난다…
기차역이 배경이었던 꿈.. 도착지까지 캐리어가 4개나 있어서 미리 화물칸에다 부쳤는데 도착하고 나니 나만 못 받았어… 그래서 직원한테 내 짐 어딨냐고 따지니까 appendChild를 안 해줬다고 오히려 나를 꾸짖었다 ㅎ
appendChild의 중요성을 또 한번 깨닫게 되는 소중한 꿈이었다…☆ 다시 본론으로 들어가서…
- event의 target(?)을 설정하는 부분이 제일 헷갈렸다. 이벤트가 걸리는 건 window라고 생각해서
this.event.keyCode = event.keyCode;와 같은 식을 constructor에 넣었는데 역시나 안됐다. 함수 switch문에 event.keyCode를 넣으니 해결쓰! - 이벤트에 on땡땡 기능을 넣을땐 bind를 이용해 this와 묶어줘야 함수가 실행이 될 수 있다.
유령부분은.. 랜덤으로 위치가 바뀌는 것 까진 했는데 class로 setInterval과 기타등등을 구현하려니 너무 너무 힘들었다… 포기하기 까지 정말 나름의 고민과 고통을 겪었는데.. 이 또한 지나가면 아무것도 아니겠지!!
다른 공부를 위해 오늘의 포스팅은 짧게 여기서 끄읕~~