jQuery를 사용하면 무궁무진한 기능들을 만들 수 있습니다.
제가 만든 낚시 게임의 메인 기능은 낚시, 상점, 캐스팅인데
그 외에 시각적으로 재미있는 요소들을 몇 개 넣어봤습니다.
메인 기능을 소개하기 앞서, 그 부분을 먼저 리뷰해볼까 합니다.
오른쪽에 메뉴들이 보이시나요?
그 중에서 6개의 모드 먼저 리뷰해보겠습니다.
각각 지정된 지정키가 있는데
이 부분은 jQuery의 키 이벤트를 사용해서
해당 키를 눌렀을 때 어떤 이벤트가 발생하게 구현했습니다.
키 이벤트를 사용하는 코드를 살펴보겠습니다.
C키를 누르면 상태창의 배경색을 변경하려고 했습니다.
$(document).keydown(function(e) {
if (e.keyCode === 67) { //C키
let randomColor = Math.floor(Math.random() * 12) + 1;
$("#status").css("background-image", "none");
$("#status").css("border", "none");
if(randomColor === 1){
$("#status").css("background-color", "#D3F1DF");
}else if(randomColor === 2){
$("#status").css("background-color", "#D4EBF8");
}else if(randomColor === 3){
$("#status").css("background-color", "#FFE6A9");
}else if(randomColor === 4){
$("#status").css("background-color", "#B3C8CF");
}else if(randomColor === 5){
$("#status").css("background-color", "#CA7373");
}else if(randomColor === 6){
$("#status").css("background-color", "#FBD288");
}else if(randomColor === 7){
$("#status").css("background-color", "#F0C1E1");
}else if(randomColor === 8){
$("#status").css("background-color", "#C6E7FF");
}else if(randomColor === 9){
$("#status").css("background-color", "#F3F3E0");
}else if(randomColor === 10){
$("#status").css("background-color", "#FFB38E");
}else if(randomColor === 11){
$("#status").css("background-color", "#FFE3E3");
}else if(randomColor === 12){
$("#status").css("background-color", "#A5B68D");
}
}});
먼저 keydown(키가 눌렸을 때) 괄호 내의 동작을 수행하는데요.
키보드에는 각각 다른 키코드를 가지고 있습니다.
이때 이벤트의 키코드 즉, e.keyCode가 67인 경우는
키보드 'C'가 눌린 것인데
이때 괄호 내의 동작을 수행합니다.
저는 12가지의 색상을 상태창에 랜덤으로 부여할 예정입니다.
그래서 1부터 12까지의 랜덤값을 선언하고
각 수에 따라서
$("#status").css("background-color", "#D3F1DF");
status라는 아이디의 background-color css를 변경합니다.
이 부분은 숫자가 많기 때문에
switch-case로 구현했어도 좋았을 것 같습니다.
C키를 눌렀을 때
다음은 상태창 복구(Z)키입니다.
if (e.keyCode === 90) { //Z키
$("#status").css("background-image", "url('resources/img/background/status.png')");
}
Z의 키코드인 90인 경우
background-image를 원래 경로로 변경합니다.
Z키를 눌렀을 때
다음은 텍스트의 색상을 변경하는 기능입니다.
T를 누를 경우 검정색,
W를 누를 경우 하얀색으로 텍스트가 변경됩니다.
if (e.keyCode === 84) { //T키
$("h3").css("color", "black");
}
if (e.keyCode === 87) { //W키
$("h3").css("color", "white");
}
T키 눌렀을 때
W키 눌렀을 때
마지막으로 모닝모드 (M)과 나이트모드 (N)인데요.
N을 누르면 배경 이미지를 좀 더 어둡게 바꾸고
전체 적으로 필터 기능을 부여해서 밝기를 낮췄습니다.
$("body").css("filter", "brightness(85%)");
$("body").css("background-image", "url('resources/img/background/lake_night.jpg')");
$("body").css("background-color", "black");
$("body").css("background-size", "cover");
나이트 모드
다시 모닝 모드인 M을 누르면 원래대로 돌아오겠죠?
모닝 모드
여기까지가 게임의 재미를 더할 부속 요소들이었습니다.
그런데 키보드를 누를 때 말고
메뉴를 클릭했을 때도 해당 기능이 수행되어야겠죠?
<div class="right-bar">
<div class="inventory-menu" onclick="toggleInventory()">🎣 <br>인벤토리<strong>[E]</strong></div>
<div class="inventory-menu" onclick="toggleUserInfo()">🧑 <br>유저<strong>[U]</strong></div>
<div class="inventory-menu" onclick="toggleShop()">🏬 <br>상점<strong>[P]</strong></div>
<div class="inventory-menu" onclick="toggleColor()">🎨 <br>상태창 색상<strong>[C]</strong></div>
<div class="inventory-menu" onclick="toggleRecovery()">↩️ <br>상태창 복구<strong>[Z]</strong></div>
<div class="inventory-menu" onclick="toggleBlack()">⚫<br>글자 색상<strong>[T]</strong></div>
<div class="inventory-menu" onclick="toggleWhite()">⚪<br>글자 색상<strong>[W]</strong></div>
<div class="inventory-menu" onclick="toggleMorning()">🌞<br>모닝 모드<strong>[M]</strong></div>
<div class="inventory-menu" onclick="toggleNight()">🌙<br>나이트 모드<strong>[N]</strong></div>
</div>
이 부분은 onclick 이벤트로 구현할 수 있습니다.
메뉴마다 각각 onclick으로 수행할 메소드를 다르게 지정해서
function toggleInventory() {
$("#inventory").fadeToggle(500);
}
function toggleUserInfo() {
$("#UserInfo").fadeToggle(500);
}
function toggleShop() {
$("#Shop").fadeToggle(500);
}
function toggleRecovery(){
$("#status").css("background-image", "url('resources/img/background/status.png')");
}
function toggleBlack(){
$("h3").css("color", "black");
}
function toggleWhite(){
$("h3").css("color", "white");
}
function toggleNight(){
$("body").css("filter", "brightness(85%)");
$("body").css("background-image", "url('resources/img/background/lake_night.jpg')");
$("body").css("background-color", "black");
$("body").css("background-size", "cover");
}
function toggleMorning(){
$("body").css("filter", "brightness(100%)");
$("body").css("background-image", "url('resources/img/background/lake.jpg')");
$("body").css("background-color", "none");
}
키 이벤트와 똑같은 코드의 함수들을 만들어주면
메뉴를 눌러도 잘 동작할 것 같습니다.
다음 시간에는 메인 기능들을 소개해보는 시간을
갖도록 하겠습니다.
읽어주셔서 감사합니다!
나중에 알게된 사실!
기존에는
if (e.key === "1") { // 1키
console.log("숫자 1 키가 눌렸습니다!");
}
e.keyCode를 써서 각 키에 해당하는 키 코드를 찾아봐야 했는데
최신 브라우저에서는 e.key를 사용하면 키 코드 대신 해당 키를 넣으면
똑같이 키 이벤트를 발생할 수 있습니다. (훨씬 편리하네요)
방향키나 ESC등 Key이름이 조금 다른 것이 있지만
기본 알파벳과 숫자는 해당 문자를 입력하면 사용 가능합니다.
JavaSpring/ at main · AgentHyun/JavaSpring
GitHub - AgentHyun/JavaSpring
Contribute to AgentHyun/JavaSpring development by creating an account on GitHub.
github.com
