컴퓨터 알아가기/JavaScript
-
JavaScript 입문 : addEventListener를 통한 이벤트 객체에 대한 이해컴퓨터 알아가기/JavaScript 2022. 10. 1. 19:30
자바스크립트를 공부하면서 많은 내용들이 머리속에 맴돌다 나가는 경우가 허다합니다. 이런경우는 다시 보면 이해가 되기도 합니다만 초보인 저로서는 지금 이순간 잘 이해가 안가는 두가지 내용이 있는데 하나는 이벤트타겟이라는 개념과 this라는 개념입니다. 해서 가능한 다른 자료를 찾아보고 이해를 하고자 하고 노력을 합니다만 지속적으로 상황에 따라 필요자료가 있으면 업데이트를 하면서 이해해 보도록 노력할 예정입니다. ▒ 이벤트 객체에 대한 이해 이벤트 객체에 대한 내용은 한번 정리를 한 적이 있습니다. 관련된 내용과 같이 보는게 좋을 듯 합니다 2022.07.12 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : 이벤트 타겟 (event.target) 요소, textContent 사용 ..
-
JavaScript 입문 : Add( ), Remove( ), Toggle( ) 메소드컴퓨터 알아가기/JavaScript 2022. 9. 30. 19:30
자바스크립트를 사용하다보면 클래스명을 이용하여 어떤 기능을 활성화 시키거나 비활성화 시키는 메소드가 필요할 때가 있습니다. 이럴때 자주 사용하는 3종 세트 add( ), remove( ), toggle( )의 3종류가 있습니다. 각각의 기능을 확인해 보도록 하겠습니다. 기본적인 형태를 다음과 같이 만들어 놓고 3종세트의 역할을 보도록 하겠습니다. 상기 코드를 보면 HTML에는 3개의 태그를 만들어 놓았구요 각각 클래스명을 만들어 놓았습니다. 아울러 태그는 각각 색이 다른 사각형을 만들어 다음과 같이 브라우자상 나타나게 하였습니다.
-
JavaScript 입문 : 카드맞추기 게임 - 카드 기본데이터, 카드 생성, 카드 섞기, 카드맞추기 게임 시작 함수컴퓨터 알아가기/JavaScript 2022. 9. 29. 19:30
이 글은 제로초TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 지난시간까지 카드맞추기 게임 순서도와 카드가 뒤집히는 애니메이션인 CSS를 다뤄 봤습니다. 지금부터는 순수하게 자바스크립트만을 이용하여 카드맞추기 게임을 만들어 가도록 하겠습니다. 1. 카드 구성요소 만들기 카드 구성요소로는 전체 카드갯수와 색상이 들어간 배열이 필요합니다. 아울러 짝을 맞추는 게임이니 같은 색을 두번 사용해야 합니다. 여기서는 concat( ) 함수를 이용해 봅니다. 이제는 내가 쓰는 코드가 에러가 있는지 미리 확인하는 습관도 중요합니다. 강좌등을 보면 코드에 console.log( ) 메소드를 이용하라는 지침이 많은데 직접 코드에 쓰는 것 보다 콘솔에 타이핑해보면 쉽니다. 위 구성요소가 잘 되었는지는 다음과 같이 콘솔..
-
JavaScript 입문 : 카드맞추기 게임 - 기본프레임 잡기 (카드뒤집기 애니메이션 CSS 포함)컴퓨터 알아가기/JavaScript 2022. 9. 28. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 지난시간 순서도 기본이 완성이 되었으니 본격젹으로 카드맞추기 게임에 대한 코딩을 시작하도록 합니다. 1. HTML CSS JS 기본 형태만들기 이번 시간에는 HTML 파일 한곳에 CSS와 자바스크립트 코드인 script 태그를 같이 써 보도록 하겠습니다. 상기 코드를 보면 CSS코드는 태그에 기입하고 자바스크립트 코드는 태그에 기입할 예정입니다. 태그는 하나만 만들었으며 향후 이 곳에 카드 12장을 자바스크립트를 통하여 반영할 예정입니다. 2. 카드 애니메이션 CSS 자바스크립트 코드만으로 카드를 뒤집는 애니메이션은 만들기 상당히 어렵다고 합니다. 전문가들조차 그런 말을 하니 저로서는 엄두도 내기 싫네요 ㅎ. 이제부터 CSS를 작성하고..
-
JavaScript 입문 : 카드맞추기 게임 - 순서도컴퓨터 알아가기/JavaScript 2022. 9. 27. 19:30
이 글은 제로초TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 자바스크립트를 이용하여 뒤집혀진 카드의 짝을 찾는 '카드맞추기' 게임을 만들어 보고자 합니다. 다음과 같은 결과물을 예상 할 수 있는데요. 첫 화면에 12개의 카드가 엎어져 있고 전체 색을 보여준 후 다시 뒤집어 진 상태에서 같은 색을 맞추는 게임입니다. 강좌에 따르면 자바스크립트의 가장 중요한 요소 중 하나인 '이벤투 루프, Event Loop'에 대해 이해를 해야 완벽한 게임을 만들 수 있다고 합니다. 이론과 원리를 안다면 에러가 나는 상황에서 답답한 마음도 아느정도 해소될 것으로 기대해 봅니다. ▒ 카드맞추기 게임 완성 결과물 첫 화면에는 다음과 같이 12개의 카드가 엎어진 상태로 보입니다. (편의상 카드앞면이라고 하겠습니다. ) ..
-
JavaScript 입문 : textRPG 만들기 - 각 단계별 최종 작업컴퓨터 알아가기/JavaScript 2022. 9. 13. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 텍스트 롤플레이게임을 만들면서 더 추가로 꾸며보고 싶은 생각이 많이 들었습니다만, 지금 참조하고 있는 강좌도 거의 끝나가고 있기때문에 진도를 먼저 내보고 계속적으로 다듬어 보고자 합니다. 1. 일반 게임 모드 (휴식과 종료 코드 업데이트) 일반 게임 모드에서는 휴식과 종료 코드가 필요합니다. 휴식하는 동안 체력을 최대치로 확보하도록 하여 강한 상대가 나타나도 문제가 없게 하고 게임이 끝나는 종료 코드에서는 this.quit( )메소드를 사용하면서 화면에 떠있는 메시지를 없애면 되겠습니다. 2. 사냥 게임 모드 (회복과 도망 관련 코드) 사냥 게임 모드에서 추가 필요한 코드는 회복과 도망 관련 코드입니다. 회복은 사냥하다가 체력이 손실 되..
-
JavaScript 입문 : textRPG 만들기 - 사냥감 변경, 클래스간 상호 작용(클래스 상속)컴퓨터 알아가기/JavaScript 2022. 9. 11. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간 프로그래밍은 잘 작동이 되었지만 헌터가 계속적으로 사냥감을 획득하지 못하고 전사하는 경우가 발생이 되었습니다. 이는 설정해 놓은 동물들의 파워가 최초부터 워낙 강했기 때문인데요. 이 부분을 약간 수정하고 상호간 공격이 가능하도록 수정할 필요가 있습니다. 1. animalList 수정 좀 더 사냥감 획득이 용이하게 내용을 변경해 주었습니다. 이렇게 하고나니 브라우저상 어느 정도 싸움이 됩니다. 현재까지의 자바스크립트 코딩 내역입니다. // 객체지향프로그램 (OOP) 활용 // 클래스로 재구성 3탄 - 모험: animal생성, 전투메뉴 생성은 이전완료, 전투메뉴중 공격 // animal의 공격력 조절, 게임이 안되니 수정 const..
-
JavaScript 입문 : textRPG 만들기 - 사냥모드 업데이트 및 성공한 사냥감 업그레이드 파워 얻기컴퓨터 알아가기/JavaScript 2022. 9. 10. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. textRPG를 class를 이용하여 각 항목별로 묶고 해당되는 함수 메소드가 필요하면 별도로 프로그래밍 하는 연습을 하고 있습니다. 이는 클래스 생성자와 생성자 실행(트리거)을 통해 상호간 연결을 시키는데 장점은 순서와 상관없이 쌍방이 참조를 하면서 코드를 간결하게 하는 역할을 합니다. 이제 거의 완성해 나가는 상황인데 본격적으로 사냥모드에서 상호간 공격하는 메소드를 만들고 사냥감을 획득하게 되면 사냥감이 가지고 있는 업그레이드 파워를 뺏어와서 더욱 강력한 헌터가 되는 프로그램을 만들도록 하겠습니다. 1. 사냥모드 사냥모드에서는 공격을 하는 경우 나올 수 있는 경우의 수를 고민해야 합니다. 헌터가 죽는 경우, 동물이 죽는 경우 이에 따..