[JavaScript] jQuery (미니 게임)

미니프로젝트 #4 jQuery를 활용한 미니게임

 

jQuery 선언 방식 : $(선택자).행위;
​
$(‘#click’).click(함수이름) 클릭했을 때 함수 실행 (# 는 id를 나타내는 태그)
​

    <script>
        var hp = 3;
        $('#drone').click(function() {      // drone이라는 id를 클릭하면 실행되는 함수 (익명함수 형태)
            $('#spit').fadeIn();        // spit이라는 id 나타나기
            $('#spit').animate({'left': '+=250px'});    // 변화 (왼쪽으로 250px만큼 이동
            $('#spit').fadeOut(function(){  // 사라지기
                hp = hp - 1;            // hp가 1 줄어들면
                $('#hp').text('HP: ' + hp); // hp라는 id의 텍스트 수정
                if (hp == 0) {
                    $('#bunker').fadeOut();     // 만약 hp가 0이되면 bunker 사라짐
                }
            });
            $('#spit').css({left: 150});    // spit 클릭-사라짐-다시클릭 할 때 원래 위치에서 시작
        });
    </script>