🎮 미니 스타크래프트

jQuery란?

이번에 구현해 볼 프로젝트는 jQuery 중심으로 진행된다. jQuery는 JS를 쉽게 사용할 수 있도록 해 주는 라이브러리다.
이전까지 우리는 HTML에서 값을 가지고 와 사용하려면 아래와 같은 코드로 길게 작성해야 했다.

document.getElementById('content').value;

그러나 jQuery로 똑같은 내용을 작성하면 이렇게 된다.

$('content').val();

💡 jQuery 장점
1. 간결한 문법
2. 편리한 API
3. 크로스브라우징

IE, Chrome, Firefox, Safari 등 각 브라우저와 버전 차이 때문에 동작하는 모습이 조금씩 다르지만 jQuery를 사용하면 이러한 문제를 해결할 수 있다. 모든 브라우저, 모든 버전에서 적용되기 때문이다.

jQuery 사용법은 아래와 같다.

• 다양한 API
• cdn

<script
    src="https://code.jquery.com/jquery-3.5.1.js"
    integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous"></script>

• 작성법

$(선택자).행위

해당 내용을 jQuery로 가지고 오려면 어떻게 해야 할까?

<textarea id="content">jQuery를 배워보자</textarea>

이렇게 가져오면 완료!

console.log($('#content').val());

jQuery에서 이벤트를 사용할 수도 있다. 이번 프로젝트에서는 클릭 이벤트를 사용할 예정인데, JS에서는 onclick 키워드로 사용할 수 있다.

<button id="click" onclick="hello();">클릭</button>
<script>
	function hello() {
		console.log('hello');
	}
</script>

jQuery 버전 클릭 이벤트는 이렇게 사용할 수 있다.

<button id="click">클릭</button>
<script>
	function hello() {
		console.log('hello');
	}
	$('#click').click(hello);
</script>

익명함수

함수를 한 번만 사용하는 것이라면 정의하고 호출하는 두 번의 과정을 거쳐야 하기 때문에 비효율적이다. 이럴 때 익명함수를 사용하면 편리하다.

익명함수는 함수를 정의할 필요 없이 바로 사용할 수 있도록 함수 이름도 지정하지 않고 사용한다.

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

구현 시작

이제 사용될 개념은 이해했으니 본격적으로 미니 스타크래프트를 만들어 보자.

드론을 클릭했을 때 침을 발사하는 형태로 구현할 것이므로 이처럼 작성한다. fadeIn() 함수는 jQuery 홈페이지에서도 확인할 수 있듯이 나타나는 효과를 지원한다.

 $('#drone').click(function(){
	$('#spit').fadeIn();
});

이제 .animate라는 함수를 사용해 발사한 침이 목표물에 명중하도록 해 보자.

fadeIn을 통해 나타난 침에 목표물까지 도달해야 하기 때문에 .animate 함수로 침의 위치를 오른쪽으로 밀어 준다. 위치를 left: '+=250'으로 지정해 왼쪽으로부터 250px 멀리 있는 곳으로 보낸다.

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

목표물에 닿는 것까지 구현했으니 이제 목표물에 도달한 침이 사라지는 애니메이션을 구현해야 한다. 나타났다가 사라지는 효과가 필요하므로 fadeOut를 사용한다.

그러나 실행해 보면 드론을 클릭해 침이 벙커에 닿고 사라진 뒤, 다시 드론을 클릭하면 벙커에 닿았던 자리에서 다시 발사된다. 투명화는 되었지만 다시 드론을 누르면 처음 위치로 돌아와 발사되는 형태로 변경해야 한다.

이를 위해 .css() 함수를 사용한다. 변경하고 싶은 css 내용을 jQuery를 통해서 바꿀 수 있다. 현재 css에서 침(spit)의 위치가 left: 150px로 지정되어 있으므로 .css() 함수 안에서 초기 위치로 설정해 준다.

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

발사하는 동작은 완벽하니 벙커의 HP가 줄어드는 애니메이션을 구현해 보자.

벙커의 HP를 3으로 지정해 hp 변수에 할당하고 해당 문구를 띄우는 코드를 click 함수 안에 작성한다. 그러나 드론을 클릭하는 즉시 숫자가 줄어든다. 코드는 위에서부터 순차적으로 동작하기 때문에 애니메이션이 실행되는 동안 hp - 1이 계산되기 때문이다.

이러한 현상을 방지하기 위해 콜백(callback) 함수를 사용한다. 콜백 함수는 위의 동작이 끝날 때까지 대기하다 종료된 이후에 동작하는 형태로 실행된다.

우리가 드론을 클릭하면 벙커에 맞고 난 후 hp가 줄어들어야 하므로 fadeOut된 이후에 hp가 줄어들도록 fadeOut 안에 함수를 작성해 준다.

var hp = 3;

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

hp가 없으면 공격에 성공한 것이므로 벙커가 사라져야 한다. 이 기능도 fadeOut 이후에 동작해야 하므로 콜백 함수 안에 hp가 0일 때 동작한다는 조건문을 작성한다.

var hp = 3;

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

위의 코드는 0이 되어도 게임이 끝나지 않고 음수로 표시되며 무한 반복되기 때문에 0이 되면 다시 처음부터 시작하는 코드로 다시 구현해 보았다.

var hp = 300;
$("#drone").click(function () {
	if (hp == 0) {
		$("#bunker").fadeIn();
		hp = 300;
		$("#hp").text("HP: " + hp);
	} else {
		$("#spit").fadeIn();
		$("#spit").animate({ left: "+=250" });
		$("#spit").fadeOut(function () {
			hp = hp - 50;
			$("#hp").text("HP: " + hp);
			if (hp == 0) {
				$("#bunker").fadeOut();
			}
		});
		$("#spit").css({ left: "150" });
	}
});