jquery 썸네일형 리스트형 [Spring] 낚시 상점 토이 프로젝트인 낚시 게임의최종 기능인 상점 기능을 리뷰해보려고합니다. create table rod( r_name varchar2(10 char) not null, r_price number(6) not null, r_damage number (5) not null ); 먼저 낚시대 테이블은 이렇게 구현되어 있습니다.낚시대 이름, 낚시대 가격, 낚시대 데미지가 DB컬럼으로 지정되어 있고,상점에서 낚시대를 구입하면DB에 추가할 예정입니다. 그럼 View부터 보여드리겠습니다. div id="Shop" class="Shop" style="display:none;">table id = "ShopTbl" class = "ShopTbl">tr>div class = "user-title">Shop👩d.. 더보기 [Spring] 낚시 이벤트2 낚시에 성공하면물고기 데이터 베이스에서 물고기 정보를 가져와서인벤토리에 해당 물고기를 추가하려고 합니다. 물고기 DB에는 현재 물고기 번호,물고기 이름, 물고기 가격에 대한 데이터가 12개 들어있습니다.1부터 12까지의 랜덤한 숫자를 정해서해당 번호에 해당하는 물고기의 데이터를인벤토리에 추가하려고 합니다. f (gagePercent >= 100) { isFishing = false; canFightFishing = false; gagePercent = 30; clearInterval(in.. 더보기 [Spring] 낚시 이벤트 토이프로젝트의 메인 기능인낚시 이벤트에 대해서 리뷰해보려고합니다. 저는 낚시 가능 구역을 따로 만들어서이 구역으로 캐릭터가 들어가서Space Bar를 누르면 낚시를 하는 방식으로 구현했습니다.낚시 가능 구역은 div태그로 간단하게 만들었습니다. div class="fishing-section" id = "fishing-section">h4 id = "fishing-section-h4">낚시 가능 구역h4>div> fishing-section이란 클래스를 만들었고 .fishing-section { position: absolute; top: 100px; left: 200px; width: 300px; height: 400px; background-color: transparent; borde.. 더보기 [jQuery] 도움말 구현 게임을 하려면 플레이 방법을 알아야하는데요.사용자를 위해서 도움말 메뉴를 구현해봤습니다. 도움말의 경우 화면 오른쪽 메뉴바를 클릭하거나숫자 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 = ".. 더보기 [jQuery] 캐릭터 이동 이벤트 jQuery의 키 이벤트 기능을 사용하면캐릭터 이동을 쉽게 구현할 수 있습니다.우선 방향키를 눌렀을 때마다 보여질 4개의 이미지를 준비합니다.저같은 경우는 이렇게 4가지를 준비했습니다. 이미지가 많으면 많을수록ex) 오른쪽으로 걷는 동작 매 키프레임마다 이미지 4개동작은 자연스러워 지지만 저는 DALLE3로 만들었기 때문에이미지 4개로 간단하게 구현했습니다.코드를 살펴볼까요? $(document).keydown(function(e) { switch (e.keyCode) { case 37: leftPosition -= 15; $("#down-img").attr("src", "resources/img/left.png"); break; cas.. 더보기 [jQuery] jQuery의 CSS를 이용한 기능 jQuery를 사용하면 무궁무진한 기능들을 만들 수 있습니다.제가 만든 낚시 게임의 메인 기능은 낚시, 상점, 캐스팅인데그 외에 시각적으로 재미있는 요소들을 몇 개 넣어봤습니다.메인 기능을 소개하기 앞서, 그 부분을 먼저 리뷰해볼까 합니다. 오른쪽에 메뉴들이 보이시나요? 그 중에서 6개의 모드 먼저 리뷰해보겠습니다.각각 지정된 지정키가 있는데이 부분은 jQuery의 키 이벤트를 사용해서해당 키를 눌렀을 때 어떤 이벤트가 발생하게 구현했습니다.키 이벤트를 사용하는 코드를 살펴보겠습니다. C키를 누르면 상태창의 배경색을 변경하려고 했습니다. $(document).keydown(function(e) { if (e.keyCode === 67) { //C키 let randomColor = Math.f.. 더보기 이전 1 2 다음
