토이프로젝트 썸네일형 리스트형 [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] 물고기 판매 이 게임의 최종 목적은물고기를 팔아서 돈을 벌고,상점에서 낚시대를 사서 데미지를 강화 후물고기를 쉽게 잡는 것입니다.그래서 잡은 물고기를 파는 기능이 필요한데오늘은 그 기능 구현 과정을 리뷰해보려고 합니다. 먼저 인벤토리의 물고기를 누르면물고기의 상세 정보가 뜨게 됩니다.저는 이 로직을 파는 로직과 묶어서구현해봤습니다. 먼저 인벤토리의 물고기를 그냥 눌렀을 때는 //인벤토리 내 물고기 클릭시 showInfo 메소드 실행 function showInfo(fishName, fishPrice, fishSize, event) { console.log("Fish Size: ", fishSize); var clickX = event.pageX; var clickY = event.pageY;.. 더보기 [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] jQuery의 CSS를 이용한 기능 jQuery를 사용하면 무궁무진한 기능들을 만들 수 있습니다.제가 만든 낚시 게임의 메인 기능은 낚시, 상점, 캐스팅인데그 외에 시각적으로 재미있는 요소들을 몇 개 넣어봤습니다.메인 기능을 소개하기 앞서, 그 부분을 먼저 리뷰해볼까 합니다. 오른쪽에 메뉴들이 보이시나요? 그 중에서 6개의 모드 먼저 리뷰해보겠습니다.각각 지정된 지정키가 있는데이 부분은 jQuery의 키 이벤트를 사용해서해당 키를 눌렀을 때 어떤 이벤트가 발생하게 구현했습니다.키 이벤트를 사용하는 코드를 살펴보겠습니다. C키를 누르면 상태창의 배경색을 변경하려고 했습니다. $(document).keydown(function(e) { if (e.keyCode === 67) { //C키 let randomColor = Math.f.. 더보기 [React] 배열에서 랜덤 추출 후 출력하기 방학이 어느덧 끝나가네요. 학기중에도 프로젝트 계속 진행해 보려고 합니다! 지난 시간에 이어서 버튼을 한 개 추가 해보겠습니다. function Snack(){ const navigate = useNavigate(); const [snack,setSnack] = useState("snack") return ( 과자 {navigate("/")}}>홈 {navigate("/getsnack")}}>과자 뽑기 ) } 과자 뽑기 버튼을 누르면 과자를 뽑아주는 getsnack페이지로 이동하도록 만들었습니다. input과 button 컴포넌트를 사용해서 과자 뽑기 페이지를 만들었습니다. 하지만 홈 버튼이 너무 안보이죠? unction GetSnack(){ const navigate = useNavigate(); co.. 더보기 이전 1 2 다음 목록 더보기
