🎮 小型スターウォーズ

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でイベントを使用することもできます.本プロジェクトではclickイベントを使用し、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>

匿名関数

1回の関数のみを使用する場合は、定義と呼び出しを2回行う必要があるため、効率が低下します.このとき匿名関数を使うと便利です.
匿名関数は、関数名を指定する必要はありません.関数を定義する必要はありません.

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

実装の開始

今では使うべき概念を理解し、ミニスターウォーズを本格的に作り始めましょう.
ドローンをクリックすると、発射針の形で実現するので、このように記入します.fadeIn()関数は、jQueryのホームページでも見られる効果をサポートします.

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

.animate関数を使用して、送信された針をターゲットにヒットさせます.fadeInで出現した針が目標物に到達する必要があるため、.animate関数で針の位置を右に押す.位置をleft: '+=250'に指定し、左側から250 px離れた場所に送信します.

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

目標を達成した以上、目標を達成した針が消えるアニメーションを実現します.後に消える効果が必要なので、fadeOutを使用します.
しかし、運行するとドローンをクリックして唾液がバンカーに触れて消え、再びドローンをクリックするとバンカーに到着した位置で再度打ち上げられます.透明化されていますが、再びドローンを押すと、最初の位置に戻り、発射の形に変わります.
このためには、.css()関数が使用されます.jQueryで変更したいcssの内容を変更できます.現在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が計算される.
この現象を防止するためにコールバック関数を用いた.コールバック関数は、上述した動作の終了を待ち、終了後に実行されるように動作する.
無人機をクリックすると、マスクに撃たれた後、hpが減少するはずなので、fadeOutの後、fadeOut内で関数を記述して、hpが減少するようにします.

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" });
	}
});