원래 지난번 썼던 함수식을 class로 변형시킨 것을 써보려고 했지만, 임시저장해 놓은 글이 너무 아까워서 setInterval도 한번 짚고 넘어가겠다~
아래서부턴 임시저장했던 글! (사실 별 내용 없다~ setInteval 개념과 내가 실패한 함수식만 있을뿐)
어제 집 가기까지 만든 화면! 별 거 아닌것 같이 보이지만 여기까지 오느라 너무너무 힘들었다 ㅠㅠㅠ 이제 유령 파트를 구현해야 하는데!!
- 새로고침 시 유령 랜덤하게 등장하기
- 일정시간이 경과하면 유령 자동으로 떨어지게 하기
- 유령이 김영웅과 만나면 피바다! + 으악 bgm 넣기
- 피바다가 된 유령을 저 세상으로 보내기
어제 Math.random()을 이용해서 유령이 랜덤하게 등장하게까지는 만들었는데, set Interval이 약간 까다로울듯 한번 해보자!!!!
set Interval
setInterval(function, milliseconds, param1, param2, ...)
첫 번째 인자로 함수가, 두 번째 인자로 시간이 들어가는 이 함수는 지정한 시간마다 함수를 반복해주는 메소드이다. 여기서 주의할 사항! 1000 milliseconds는 1 second와 같다는 점~ 그럼 허접한 나의 식을 공개쓰..!
var enemy = document.getElementById('enemy')
var enemy_position = 400;
var enemy_top = 0;
function live() {
enemy.style.left = Math.floor(Math.random()*762) + 'px'
}
function raining() {
enemy_top += 30
enemy.style.top = enemy_top + 'px';
if (enemy_top >= 545) {
enemy.style.top = 545+'px'
}
}
let enemy_rain = setInterval(raining, 150)
window.addEventListener('load',function(event) {
live(event)
enemy_rain // 처음엔 여기에 소괄호 넣었는데 error가 떠서 지워줬다. 괄호를 쳐도 실행은 잘됨
})지난번에 김영웅씨를 띄우기 성공하고 나니 유령 부분은 약간 더 쉬워진 느낌적인 느낌?? 굿굿~ live함수에선 유령이 랜덤으로 나타나게 했는데 저렇게 쓰는게 맞는진 모르겠다.. 약간 버벅거리면서 나타나서 맘에 들진 않는다 ㅋㅋ
raining이라는 함수를 만들어서 유령의 top 위치를 변하게 만들었고, 바닥에 닿으면 더이상 이동 못하게 막아놨다. 더 기능을 넣고 싶은 욕심이 생기지만.. 난 이미 이미지 sprite 하는 부분과 우분투 설치하는 부분에서 시간을 많이 잡아먹었기 때문에 나중에 시간이 날때 보충해볼 생각이다!
여튼 raining 함수를 setInterval 안에 넣어주고.. 인자를 1000 ms로 설정했더니 너무 느려서 화끈하게 150으로 줄였더니 적당한 빠르기가 나왔다리~ 함수 만든걸 다 load 함수 안에 넣으면 완성! 생각보다 간단쓰~?
Collision Detection
이 키워드까지 오는데 여러 키워드가 필요했다..ㅎ 영웅이랑 유령이랑 만나면? 닿으면 ? 겹치면? 부딪힌다면? 충돌한다면? 아!!! collision detection!!!!! 좋았어~
나의 첫 시도. MDN 공식문서에 있는 Axis-Aligned Bounding Box(AABB)를 이용해 코드를 작성해보았다
function blood() {
let hero_xy = {x: hero.style.backgroundPositionX, y :hero.style.backgroundPositionY, width: 35, height:54}
let enemy_xy = {x: enemy.style.backgroundPositionX, y: enemy.style.backgroundPositionY, width: 45, height: 54}
if(hero_xy.x < enemy_xy.x + enemy_xy.width && hero_xy.x+hero_xy.width > enemy_xy.x && hero_xy.y < enemy_xy.y + enemy_xy.height && hero_xy.y + hero_xy.height > enemy_xy.y) {
enemy.style.backgroundPositionX = 45 + 'px'
}
}놀랍게도 아무일도 일어나지 않았다 ㅎ 유령을 잡아서 피바다를 만들어야 하는데… 죽이기가 너무 힘들다. 생명의 소중함을 다시 한번 깨닫게 되는 시간~
아무일도 일어나지 않은건 훼이크…! 오타를 발견해서 수정해보니…
유령이 죽은채로 내려온다… 벌써 죽으면 안되는데… 영웅이랑 만나서 죽어야 하는데 또르륵…
앗..근데 찾아보니 저 방법은 canvas를 썼을 때 쓸 수 있는 방법 같다…
다시다시… 정석대로 2차 시도! left 값 변화에 따라 함수를 작성해보았다.
function blood() {
let hl = hero.style.left
let ht = hero.style.top
let hw = hero.style.width
let el = enemy.style.left
let et = enemy.style.top
let ew = enemy.style.width
if ((el < hl-ew) || (hl < el-hw) || (ht-ew > et)) {
enemy.style.backgroundPositionX = 45+'px'
}
}또 다시 아무 일도 일어나지 않았다. 아까의 식은 유령이 죽어서 내려오긴 해도 여튼 죽긴 죽는데… 2차 시도때 식은 유령을 죽일수가 없다!
멘토님의 조언을 받고 class 형태로 다시 식을 써내려가 보기로 했다. 다음번 포스팅에선 클래스의 정의와 새로 구현한 식을 공유할 예정쓰~
어제와 오늘의 결론 너무 조급해 하지 말자. 아주 조금이라도 하던걸 갈아엎게 되었을때 흔들리지 않는 강려크한 멘탈의 소유자가 되자.