컴퓨터 알아가기
-
JavaScript 입문 : 지뢰찾기 게임 - 주변지뢰 갯수 찾기(카운트)와 지뢰없는 칸 한꺼번에 열기 (재귀함수 이용)컴퓨터 알아가기/JavaScript 2022. 11. 2. 19:30
지난시간 조건연결자(optional chaining)를 통하여 주변지뢰갯수 찾는 코드를 다음과 같이 연구해 보았습니다. 사실 앞 조건이 undefined가 아니면 에러가 나지 않기 때문에 다음 그림과 같이 2개는 optional chaining이 없어도 되는데 써줘도 무방합니다. 그렇다면 이제는 원래 지뢰찾기 게임에 근거하여 지뢰가 없는 칸을 한꺼번에 여는 함수식에 대해 공부를 해 보도록 하겠습니다. 이 곳에서는 재귀함수라는 개념도 등장하네요. (갈수록 어렵네요...) 1. 지뢰없는 칸 주변 8개 한꺼번에 열기 지뢰가 없는 칸을 한꺼번에 열기 위해서는 해당 함수식을 만들어 줘야 하는데 이는 좌클릭 했을 경우 지뢰가 아닌 상황에서 코드 작성이 필요합니다. 아래 그림에서 사각형 안에 함수식을 만들어 줘야 하..
-
JavaScript 입문 : 지뢰찾기 게임 - 주변지뢰 갯수 찾기(카운트)와 Optional Chaining컴퓨터 알아가기/JavaScript 2022. 11. 1. 19:30
지난 시간에 이어 지뢰를 감싸는 주변칸에 지뢰갯수를 나타내는 코드에 대해 고민하고 있습니다. 지뢰가 없다고 확신하는 칸을 클릭하면 주면 8개를 동시에 열어 닫힌칸을 열어가는 게임인데 이에 대한 논리를 고민해 보겠습니다. 본 글은 제로초 TV의 자바스크립트 강좌를 기본으로 공부하고 있습니다. 일단 다음과 같이 지뢰가 있는 경우에 대하여 변수를 만들고 시작 하겠습니다. 위 변수 mines는 코드숫자로 지뢰가 있는 경우를 지칭합니다. 이 변수에 클릭한 주변으로 지뢰가 있다면 카운트를 하는 방식을 고민해 보도록 하겠습니다. 1. 지뢰 주변 갯수 세기 우선 다시한번 그림을 그려 주변을 나타내는 경우를 고민하고 공통된 코드를 도출해 보도록 하겠습니다. 다음 그림을 기준으로 설명하겠습니다. 그림을 설명하자면 회색번호..
-
JavaScript 입문 : 좌클릭 이벤트 - 지뢰를 클릭하면 게임종료 및 일반칸 클릭시 논리적으로 주변 지뢰갯수 세는 방법 고민컴퓨터 알아가기/JavaScript 2022. 10. 31. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 지금부터는 본격적으로 지뢰를 찾는 기능을 추가할 건데요. 좌클릭으로 지뢰가 없는 칸을 전부 열면 게임에서 이기게 됩니다. 가장 이해하기 어려운 부분인데 새롭게 나오는 이론도 있고 한번 더 생각해야 되는 시간인 것 같습니다. 좌클릭 이벤트를 위해 addEventListener를 달고 함수를 만드는 과정부터 시작합니다. ▒ 좌클릭 이벤트 - 주변 지뢰 갯수 세기 1. 좌클릭 이벤트 선언과 함수선언 우클릭 이벤트 밑에 좌클릭 이벤트를 선언하고 함수를 만들도록 합니다. 2. onLeftClick( ) 함수 만들기 순서도를 보게되면 복잡하게 만들어져 있는데 저처럼 초보자들은 코드를 풀어 나가기가 쉽지 않습니다. 우선 좌클릭 이베트의 중요 역할을..
-
JavaScript 입문 : 우클릭 이벤트 - contextmenu, 우클릭 이벤트를 통한 깃발과 물음표 만들기컴퓨터 알아가기/JavaScript 2022. 10. 30. 19:30
지금까지 마우스 좌클릭을 통해 클릭이벤트를 공부는 해보았지만 우측클릭으로 하는 경우는 이번이 처음 배워보는 것 같습니다. 보통 addEventListener를 사용하는 경우 좌클릭 이베트는 'click'이었는데 우클릭은 'contextmenu'라는 이벤트가 따로 있습니다. 지금 이 글을 쓰고 있는 화면에 우측클릭을 해보면 다음과 같이 나옵니다. 상기 그림과 같이 우측클릭을 하면 나오는 내용을 제어하고 만들 수 있는이벤트가 contextmenu입니다. 지금부터는 contextmenu를 통해 10 X 10 배열칸에 우클릭을 통하여 깃발이나 물음표를 표시하는 기능을 배워보도록 할 예쩡입니다. 이는 제로초 TV 지바스크립트 강좌를 통하여 공부를 하고 있습니다. ▒ 우클릭이벤트 1. 우클릭이벤트로 만들어야 할 것..
-
JavaScript 입문 : 논리연산자 AND (&&) 와 OR (||)컴퓨터 알아가기/JavaScript 2022. 10. 27. 19:30
자바스크립트에서 논리연산자(&&와 ||)는 지금까지 다음과 같이 이해를 하고 있었습니다. A && B 는 A와 B가 전부 true여야 true이며 A || B는 A와 B중 하나만 true여도 true로 알고 있었습니다. 맞는 이야기인데 이는 단순하게 앞 뒤에 대한 참과 거짓을 확인할 때 사용하는 경우입니다. 이러한 논리연산자를 조금 더 깊이 정확하게 자바스크립트에서는 다음과 같이 사용합니다. A && B 는 A가 true이면 B를 실행하고 A || B는 A가 false이면 B를 실행하라는 뜻입니다. A || B는 A가 아니면 B를 실행하라는 뜻도 되겠지요. 반대이면 다음과 같이 생각하면 됩니다. A && B 는 A가 false면 A를 실행하고 A || B는 A가 true면 A를 실행하라 언뜻보면 헷갈리는..
-
JavaScript 입문 : 지뢰찾기 게임 - 본격적인 지뢰심기컴퓨터 알아가기/JavaScript 2022. 10. 26. 19:30
본 글은 제로초 TV의 자바스크립트 강좌를 기본으로 공부하고 있습니다. 지난시간 다음과 같이 랜덤하게 10개의 지뢰 인덱스를 뽑았습니다. 물론 이 인덱스는 새로고침 할때마다 변경이 되겠지요. 하여간 랜덤하게 뽑힌 10개의 인덱스와 지뢰를 연결하도록 하겠습니다. ▒ 본격적인 지뢰심기 1. 전체를 지뢰가 없다는 가정하에 NORMAL로 코드숫자 부여 지뢰는 총 10개로 하고자 했습니다. 총칸은 100칸이고요. 지난 시간까지는 해당칸에 대한 그림을 인덱스로 나타내었지만 본격적으로 생명을 불어넣기 위해서는 각 인덱스와 연결을 시켜야 합니다. 여기서는 코드숫자와 연결을 시켜야겠지요. 먼저 전체 100칸에 지뢰가 없는 NORMAL인 상태로 만들어 줍니다. 코드숫자는 -1로 하기로 했구요. 10 X 10은 이중반복문을..
-
JavaScript 입문 : 지뢰찾기 게임 - 기본적 HTML / CSS 만들기, 지뢰를 심기위한 랜덤숫자 뽑기컴퓨터 알아가기/JavaScript 2022. 10. 25. 19:30
본격적인 지뢰심기 게임을 만들어 보도록 하겠습니다. 1차적 결과는 다음과 같이 나오도록 할 예정입니다. 잠깐 그림에 대해 설명드리면 처음에는 가로 10칸, 세로 10칸인 2차원 배열을 만들고 그 중에서 지뢰를 10개 랜덤하게 만들고자 합니다. 지금은 편의상 지뢰를 'X'로 표시하고 우측 클릭에서 물음표와 깃발을 각각 '?'와 '!'로 표시할 예정입니다. 향후 전체코드가 완료되었을때는 지뢰 그림과 깃발 등 조금 더 데코레이션 하는 방향으로 할 예정입니다. 본 코딩은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 1. 기본적인 HTML / CSS 만들기 역시 기본틀이 되는 HTML과 CSS를 고민해야 하는데요. 10 X 10 바둑판 배열은 2차원 배열이라고 보면 되겠습니다. 2차원 배열은 자바스..
-
JavaScript 입문 : 지뢰찾기 게임 - 순서도컴퓨터 알아가기/JavaScript 2022. 10. 21. 19:30
이 글은 제로초 TV의 지뢰찾기 게임을 참조로 정리한 글입니다. 머리속에 잘 남아있지 않지만 그래도 자바스크립트를 공부하고자 했던 마음 가다듬고 조금 더 훈련을 해 보고자 합니다. 무작정 따라 하는 것보다 복습하고 이해할려고 하니 어느정도는 업그레이드가 되는 느낌은 있는데 어떨때는 쉽게 포기할 수도 있겠구나 하는 생각도 들긴합니다. 각설하고, 좀 더 매진해야겠습니다. 이번에는 지뢰찾기 게임을 도전해 보는데요. 우선 지뢰찾기 게임이 뭔지 알아야 할 듯 합니다. 사실 저같이 나이가 있는 사람은 과거 컴퓨터 윈도우에 기본으로 깔려있는 게임인데요. 잘 모르는 분들은 구글에서 지뢰찾기를 검색하면 바로 게임할 수 있습니다. 아주 단순한 1차원적 게임이죠. 그렇지만 게임에 대한 큰 흐름을 알아야 순서도를 만들고 그에..