게임을 하려면 플레이 방법을 알아야하는데요.
사용자를 위해서 도움말 메뉴를 구현해봤습니다.
도움말의 경우 화면 오른쪽 메뉴바를 클릭하거나
숫자 1을 누르면 열리게 구현했습니다.
먼저 View쪽을 살펴보겠습니다.
도움말
도움말은 이런 식으로 구현되었는데요.
이미지와 간단한 설명 텍스트가 있고
하단에는 페이지를 넘어갈 수 있는 버튼이 있습니다.
코드를 살펴보겠습니다.
<div id="Help" class="Help" style="display:none;">
<h2> 도움말🤔</h2>
<div class = "help-text">
<img class = "keyboard-help" src = "resources/img/keyboard.png" width = "150" height = "150"> <img class = "fishing-zone-help" src = "resources/img/fishing-zone.png" width = "150" height = "150"> <img class = "casting-help" src = "resources/img/casting.png" width = "80" height = "80">
<h4>1. <span class = "space-bar">방향키</span>를 눌러 이동하세요 2. 낚시 구역으로 이동해 <span class = "space-bar">Spacebar</span>를 누르세요 3. 입질을 감지하면 <span class = "space-bar">Enter키</span>를 눌러 캐스팅하세요</h4>
<div class = "help-btn-section">
<button class = "help-btn-before">←</button><button class = "help-btn">→</button>
</div>
</div>
</div>
<div id="Help-Second" class="Help" style="display:none;">
<h2> 도움말🤔</h2>
<div class = "help-text">
<img class = "keyboard-help" src = "resources/img/fish-fighting-help.png" width = "350" height = "80"> <img class = "keyboard-help" src = "resources/img/catching-help.png" width = "350" height = "80">
<h4 class = "help-text">1. <span class = "space-bar"> a키</span> 또는 <span class = "space-bar">s키</span>를 눌러 데미지를 주세요 2. <span class = "gold">100%</span>의 충격을 주면 낚시 성공! 3. <span class = "space-bar">E키</span>를 눌러 인벤토리를 확인하세요 </h4>
<h4>💡인벤토리의 🚚를 누르고 물고기를 누르면 판매됩니다.<br><br>💡기본 데미지는 <span class = "space-bar">3</span>이고 물고기는 지속적으로 <span class = "space-bar">8</span>씩 저항합니다 낚시대를 구입해서 데미지를 늘려보세요💥 </h4>
<button class = "help-btn-before">←</button><button class = "help-btn">→</button>
</div>
</div>
좀 복잡해보이시죠?
저 같은 경우에는 도움말을 2페이지로 구성햇습니다.
각각 Help와 Help-Secnod라는 아이디를 가지고 있습니다.
도움말에는 사진과 텍스트만 들어가기 때문에 필요한 데이터를
하드코딩 했습니다.
오른쪽 버튼을 누르면 Seconde페이지로,
왼쪽 버튼을 누르면 다시 도움말 1 페이지로 이동합니다.
이 부분은 jQuery로 처리했는데요.
$(document).keydown(function(e) {
if (e.key === "1") { // 1키
isHelp = !isHelp;
$(".help-btn").click(function(){
$("#Help").fadeOut(500);
$("#Help-Second").fadeIn(500);
});
$(".help-btn-before").click(function(){
$("#Help-Second").fadeOut(500);
$("#Help").fadeIn(500);
});
if(isHelp){
$("#Help").fadeToggle(500);
}else{
$("#Help-Second").fadeOut(500);
}
}}
1번을 누르면 isHelp라는 변수를 반대 상태로 바꾸고
#Help에 해당하는 섹션을 fadeToggle이벤트에 의해
fadeIn시킵니다.
isHelp가 False면 2번째 도움말 페이지가 닫히게 됩니다.
오른쪽 화살표 버튼인 help-btn을 누르게 되면
첫번째 도움말 페이지를 Fade-Out시키고
2번째 도움말 페이지를 Fade-In시킵니다.
반대로 왼쪽 화살표 버튼인 help-btn-before를 누르게 되면
첫번째 도움말 페이지를 다시 Fade-In시키고
2번째 도움말 페이지를 Fade-Out시킵니다.
function toggleHelp(){
$("#Help").fadeToggle(500);
}
<div class="inventory-menu" onclick="toggleHelp()">❓ <br>도움말<strong>[숫자 1]</strong></div>
그리고 오른쪽 메뉴를 눌렀을 때에도 똑같이
도움말 창이 열리게 했습니다.
이때는 onclick을 사용했습니다.
시현 영상을 보여드리겠습니다.
