본문 바로가기

jQuery

[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] setInterval setInterval은 JavaScript의 반복 함수입니다.일정한 시간 간격으로 코드를 반복 실행하는데요.이와 비슷한 함수로는setTimeout이 있습니다. 정해진 시간 후에 코드가 한번 실행시키는 함수입니다. setInterval함수의 예제를 살펴봅시다.setInterval(() => {    let x = Math.random() * 500;    let y = Math.random() * 500;    $("img").css("top", y + "px");    $("img").css("left", x + "px");         }, 1000); 함수는 실행할 내용과반복할 시간이 들어가는데요.위 코드를 해석해보면x와 y에 랜덤한 값을 넣어서이미지의 x,y값에 해당 값을 css로 넣는 코드입니다.. 더보기
[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이라는 선택자.. 더보기
[jQuery] 선택자 선택자는 HTML 요소를 선택하는 방법입니다. jQuery에서는 $(선택자)를 사용하여 HTML 요소를 선택하고,해당 요소에 대해 작업을 수행할 수 있습니다.예시를 하나 살펴볼까요. $(function(){ alert("점심 먹으러 준비 갈 완료 !"); })  function이라는 선택자가 들어가면프로그램이 실행되면해당 메소드 내에 작업을 수행합니다.jQuery를 사용하면서 알게되는여러 기능들을 기록해 나갈 예정입니다. 더보기

티스토리툴바