[간단 프로그램]미니 스타그래프트

✅ 주요 기능

클릭하면 드론이 침을 발사하고 침에 맞은 벙커는 HP가 1씩 깎임

1. 드론 클릭 후 이벤트

드론을 클릭하면 작동할 수 있도록 설정한다. 

//HTML
<div class="drone" id="drone" onclick="attack()"></div>

//JavaScript
function attack() {
    console.log('attack');
}

위 코드를 보면 드론을 클릭하면 콘솔창에 'attack' 이라는 문구가 뜨게 되는데 이를 jQuery 와 익명함수로 더 간결하게 수정하였다.

* jQuery cdn을 입력하고 HTML에 있는 onclick 이벤트는 삭제

 $('#drone').click(function(){
        console.log('attack');
})

📍 jQuery의 장점은 1. 간결한 문법 2. 편리한 API 3. 크로스브라우징이 있다
   *크로스브라우징이란? 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업
📍익명함수란 이름이 없는 함수로 함수를 딱 한번만 사용할때 이용한다.

 

2. 드론 클릭 후 침 이미지 나온 후 오른쪽으로 이동

드론을 클릭하면 이미지가 먼저 나오게 해야하는데 이는 .fadeIn() 메서드를 사용하고 나온 후 이미지가 오른쪽으로 날라가야 하기 때문에

처음엔 .css({left: 200})을 주었다.

$('#drone').click(function(){
        $('#spit').fadeIn()
        $('#spit').css({left: 400})
})

문제는 침이 나온 후 자연스럽게 왼 > 오 로 움직이는게 보여야하는데 그렇지 않고 뚝 끊기듯이 오른쪽에서 등장했다. 그래서 기존 .css()메소드 대신 .animate() 메서드를 주었다. 그럼 자연스럽게 침이 날라가는것이 보인다. 침이 날라간 후 드론에 맞으면 사라져야 하므로 .fadeOut() 메서드로 침이 사라지는것 까지 주었다.

$('#drone').click(function(){
    $('#spit').fadeIn();
    $('#spit').animate({'left':'+=300px'});
    $('#spit').fadeOut();
})

이 후 계속 드론을 클릭하면 fadeOut해서 사라진 지점 부터 침이 +350px 만큼 날아가고 다시 사라지는데 다시 드론에서 부터 시작하기 위해 fadeOut 이후 바로 다시 드론 위치로 돌아오기 위해 .css()메서드를  주었다.

$('#drone').click(function(){
        $('#spit').fadeIn();
        $('#spit').animate({'left':'+=300px'});
        $('#spit').fadeOut();
        $('#spit').css({'left':'50px'})
})

📍 .fadeIn(지속기간, 완료시) : 선택한 요소를 서서히 나타나게 하는것으로 사용가능한 두 인수 모두 선택사항이다.
📍.fadeOut(지속기간, 완료시) : 선택한 요소를 서서히 사라지게 하는것으로 사용가능한 두 인수 모두 선택사항이다.
📍.animate(변화할 css, 지속기간, 이징효과, 완료시) : 애니메이션 효과를 주는 메서드로 변화할 부분은 필수로 입력해야한다.
📍.css(): 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가한다.

 

3. 벙커에 침이 맞으면 hp 1 씩 감소

피가 깎이는 시점을 생각하면 벙커가 침에 맞은 이후이다. (침이 사라지는 순간) 먼저 hp의 초기설정을 3으로 한 후 fadeOut에 인수 함수를 넣어 fadeOut이 완료되면 피가 1씩 깎이게 했다. 이를 HTML에 쓰여지기 위해서 .text() 메서드를 사용했다.

let hp = 3;

$('#drone').click(function(){
    $('#spit').fadeIn();
    $('#spit').animate({'left':'+=300px'});
    $('#spit').fadeOut(function(){
        hp -= 1; // hp = hp - 1
        $('#hp').text(`HP : ${hp}`);
    });
    $('#spit').css({'left':'50px'})
})

📍 .text() : 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 역할

 

4. 벙커의 hp가 0이 되면 벙커가 사라짐

공격을 받고 hp가 0이 된 벙커는 사라져야 하므로 조건문을 활용해 벙커가 0이 됐을때의 조건을 걸고 해당 조건이 참일 경우에 벙커에 .fadeOut() 메서드를 주었다.

$('#drone').click(function(){
        $('#spit').fadeIn();
        $('#spit').animate({'left':'+=300px'});
        $('#spit').fadeOut(function(){
            hp -= 1;
            if(hp == 0){
                $('#bunker').fadeOut();
            }
            $('#hp').text(`HP : ${hp}`);
        });
        $('#spit').css({'left':'50px'})
    })

 

🌟 완성본

이미지와 함께 더 귀여운 미니스타그래프트를 보고싶다면 아래 깃헙 주소로 이동해주세요
https://github.com/dananote/frontend-developer/tree/main/JavaScript/0328/%EB%AF%B8%EB%8B%88%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%98%ED%94%84%ED%8A%B8