본문 바로가기

jquery

[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.. 더보기
[jQuery] 반복문 Javascript에서는배열을 대괄호 []로 선언하고,객체는 중괄호 {}로 선언합니다. 배열let arr = [1, 56, 3, 86, 12]; 객체let obj = {menu : "초밥", price : 15000}; 배열속에 객체를 넣는 방법도 있습니다. let arrobj = [{    menu : "라면",    price : 4000,   },   {       menu : "김밥",        price : 3000,                   },      {       menu : "돈까스",        price : 7000,                    }       ];  jQuery에서는 배열을 대상으로 반복문을 사용할 수 있습니다.$.each를 사용해서 구현할 수 있.. 더보기
[jQuery] Mouseenter, Mouseleave Mouseenter와 Mouseleave는jQuery에서 제공하는 마우스 이벤트 함수입니다.코드를 보면서 설명하겠습니다.$("#t2").mouseenter(()=>{    $("#t2").css("opacity" , 1);    });$("#t2").mouseleave(()=>{    $("#t2").css("opacity" , 0);    }); Mouseenter는 Mouse가 식별자에 해당하는 공간에 들어올 때 (Enter),작업을 수행하는데요.위에서는 t2라는 식별자에 해당하는 태그의 공간에 마우스가 들어올 때table border = "1" id = "t2">table>(=>여기서는 table입니다.)해당 테이블의 opacity(투명도를) 1로 바꿉니다. 밑에는 Mouseleave라는 함수가 있.. 더보기
[jQuery] CSS jQuery의 css메소드를 써서선택자에 따른 css를 부여할 수 있습니다.이때 jQuery문의 구조는 $("선택자").css("속성명", "값") 형태입니다.예제 코드를 살펴보겠습니다. script type ="text/javascript" src ="jQuery.js">script>script type ="text/javascript">$(function(){    // $("선택자").css("속성명", "값");    $("#btn1").click(()=>{                 $("h1").css("color", "teal");        $("h1").css("background-color", "pink");                       });}); #btn1이라는 선택자.. 더보기

티스토리툴바