컴퓨터 알아가기/JavaScript
-
JavaScript 입문 : textRPG 만들기 - 헌터내역 및 동물내역 업데이트, 일반게임모드, 메시지 표시, 게임종료 메소드컴퓨터 알아가기/JavaScript 2022. 9. 9. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 클래스를 이용하여 코딩을 하다보면 코드가 복잡해 지더라도 큰 흐름을 기억한다면 무난히 적어 내려갈 수 있는 장점이 있는 것 같습니다. 이번장에서는 헌터와 동물의 최초 기본체력을 나타내고 상호간 공격에 의해 체력변화를 나타낼 수 있는 사냥모드를 작성해 보고자 합니다. 1. start( ) 함수 start( ) 함수는 헌터의 이름을 입력하면 게임이 시작되는 함수입니다. 게임이 시작전 헌터의 기본 능력치를 나타낼 예정이며 이 능력치는 사냥 후 변하는 체력도 업데이트 해줘야 합니다. 따라서 함수로 선언하고 별도 업데이트 방식에 대한 코딩을 해주면 됩니다. 2. UpdateHunter( ) 만들기 updateHunter( )를 start( ) 함..
-
JavaScript 입문 : textRPG 만들기 - 클래스 이용하여 기본코드 재구성컴퓨터 알아가기/JavaScript 2022. 9. 8. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 기본으로 하고 있습니다. 이제부터는 본격적으로 클래스를 이용하여 textRPG 내역을 재코딩하면서 내용을 업데이트 하도록 하겠습니다. 다시 강조하지만 클래스의 기본은 객체지향프로그램 (Object Oriented Program, OOP)이며 기본 구성으로 생성자 (Constructor)와 부모상속을 하는 (Super)를 기억해야 합니다. 1. 각 클래스별 항목 클래스로 게임을 재구성하기 위해서 클래스를 나타내는 항목을 고민할 필요가 있습니다. 우선 hunter와 animal은 클래스 하나의 항목으로 고민할 수 있습니다. addEventListener( )메소드가 있는 지점은 일반메뉴와 사냥메뉴가 작동하는 곳으로 기본적인 활성화만 시켜놓고 다 지우고 갑니다. 전체적..
-
JavaScript 입문 : 클래스 기본 구조컴퓨터 알아가기/JavaScript 2022. 9. 7. 19:30
지난시간 this에 대해 textRPG에 적용을 해보았습니다. 아울러 복잡한 코드를 좀 더 간편하게 할 수 있는 방식으로 클래스를 이용하여 코드를 재세팅하고자 할려고 했습니다. 그러기 위해서는 기본적으로 클래스가 무엇인지 개괄적인 내용을 공부하고 textRPG에 클래스를 적용해 보도록 하겠습니다. 1. 클래스 정의 자바스크립트에서 Class(클래스)는 객체를 생성하기 위한 템플릿입니다. 따라서 데이터와 이를 조작하는 코드를 하나로 추상화 한다고 합니다. 2. 클래스 선언 클래스 문법을 활용하기 위하여 클래스 선언을 해야합니다. 이는 일종의 함수식이기 때문에 중괄호를 통하여 함수식을 표시하며 호출방식은 해당 클래스 이름에 new를 붙혀 호출합니다. 이때 둘다 이름은 대문자로 표시하는 것을 암묵적인 약속으로..
-
JavaScript 입문 : textRPG 만들기 - this를 이용하여 사냥메뉴 만들기컴퓨터 알아가기/JavaScript 2022. 9. 6. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간까지 전체 RPG의 기본프레임 즉, 게임이 동작할 수 있는 구조를 미리 구성 하였습니다. 오늘은 자바스크립트의 중요한 요소인 this를 이용하여 사냥메뉴에서 상호간 공격하는 롤플레이 형태의 코딩을 공부해 보고자 합니다. this를 알아야하는 이유중 하나는 this를 이용하여 향후 지금과 같은 형태의 코딩에서 중요항목별 묶는 클래스 기능을 사용할 때 아주 유용하게 사용할 수 있습니다. 1. this (자바스크립트) 자바스크립트에서 this는 다음과 같이 우선 기억해 두면 편합니다. " 자바스크립트 객체안에 this는 객체 자기 자신을 가리키며, 객체.메소드( ) 형태가 되어야 this가 객체 자신을 카리킵니다. " 사실 이러한 정의..
-
JavaScript 입문 : textRPG 만들기 - 롤플레이 대상(헌터와 사냥감) 초기 설정, 초기화면, 일반메뉴 화면, 사냥메뉴 연결 구조 설정컴퓨터 알아가기/JavaScript 2022. 9. 5. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 지난시간까지 만들어야 할 순서도와 기본적인 프레임인 HTML과 JS 기본구조를 만들었습니다. 이 과정은 훈련화 되어야 하기에 거의 공장에서 일련의 과정을 거쳐가는 것 처럼 연습하고 있습니다. 이제는 기본프레임하에 자바스크립트 공부를 본격적으로 시작해 볼 예정인데 순서도를 기억해 보면 시작하여 헌터의 이름을 입력하고 일반메뉴 (사냥을 가기위한 모험편, 휴식편, 종료)의 화면이 필요하고 모험편으로 들어갔을때는 실질적인 사냥편을 구성해야 합니다. 이러한 큰 설계측면에서 연결구조를 볼 예정입니다. 1. 헌터와 사냥감 초기 설정 이 단계에서는 헌터와 사냥감의 능력치를 초기 세팅해 줍니다. 초기 세팅된 능력치로 상호간 공격을 할 수 있기때문에 사냥..
-
JavaScript 입문 : textRPG 만들기 - 기본포맷 (HTML/CSS, JS)컴퓨터 알아가기/JavaScript 2022. 9. 4. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 전체적인 순서도는 지난시간 미리 만들어는 보았는데 RPG형태이다 보니까 고려할 사항들이 많습니다. 먼저 기본적인 HTML / CSS 부분과 결국 상호작용을 할 수 있는 JS 부분을 고려해야 합니다. 1. 기본컨셉 전체적인 흐름에 대해 공부를 할 생각으로 이번장에서는 CSS를 특별히 다루지는 않습니다만 링크는 생성을 해 두고 향후 CSS와 연계되서 할 수 있는 부분이 나온다면 별도 적용하고자 합니다. HTML에서 첫번째 화면은 헌터의 이름을 입력알 수 있는 태그를 사용하고 입력후 클릭하면 화면이 바뀌어서 게임이 시작되는 개념으로 만들고자 합니다. 게임이 시작되는 화면은 크게 5개의 태그로 구성하고자 하며 이 구성에는 일반메뉴와 사냥메뉴를 ..
-
JavaScript 입문 : textRPG 만들기 - 순서도컴퓨터 알아가기/JavaScript 2022. 9. 3. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 컴퓨터 언어인 자바스크립트 재미있긴한데 공부를 한다는 개념은 힘들수 밖에 없는것 같습니다. 새로운 챔터에 대해 공부를 하는 시간입니다. 이번시간부터는 조금 더 깊이 들어가는 내용을 공부할 예정인데 소위 말하는 롤플레이게임에 대해 알아보고자 합니다. 현재 그래픽으로 만들 수 있는 수준은 아니기에 텍스트 기반에서 RPG를 구현하는 것을 연습해 보고자 합니다. 1. textRPG 기본 개념 우선 만들고자 하는 프로그래밍은 입력창에 주인공인 헌터의 이름을 입력한 후 랜덤하게 출몰하는 동물을 사냥하는 게임입니다. 다음과 순서를 고려하여 순서도를 설계할 필요성이 있습니다. ① 주인공 생성 절차 ② 일반 게임모드로 입장했을때 사냥을 할 동물들을 생성..
-
JavaSCript 입문 : 자바스크립트에서 this는 무엇인가? - 1컴퓨터 알아가기/JavaScript 2022. 9. 2. 19:30
자바스크립트를 공부하다 보면 this라는 단어가 심심치 않게 등장합니다. this가 this인데 갑자기 왜 나올까하는 생각으로 기본부터 이해를 해 보고자합니다. 일단, 문헌에 의하면 대부분의 경우 this값은 함수를 호출한 방법에 의해 결정된다고 합니다. 무슨 말인지 이해가 되지는 않습니다. 1. 객체내의 this는 변수를 의미 예제를 가지고 무작정 따라해 보면서 정의를 쉽게 내려야 할 듯 합니다. 객체내 word를 return하는 함수를 만드는 예제를 보면 다음과 같이 에러가 납니다. 물론 word값만을 객체에서 뽑고자 하면 console.log(test.word);로 하면 되지만 함수에 대한 내용을 참조하는 방식이 필요할 수 있습니다. 이럴 경우 this를 사용하며 여기서 this의 범위는 test라..