분류 전체보기
-
JavaScript 입문 : 캔버스 (Canvas) 기초 - 정의, 채운 사각형 및 빈 사각형 그리기, 선 그리기, 선과 선을 연결하여 도형 만들기컴퓨터 알아가기/JavaScript 2022. 11. 5. 19:30
자바스크립트의 영역은 생각보다 넓은것 같습니다. 이곳 저곳 게임에 대해 조금 더 알아보다가 기본적으로 Canvas에 대해 아는 편이 좋다고 하네요. 캔버스(Canvas)는 말 그대로 그림을 그리는 바탕이 되는 도화지 같은 것이고 이 곳에서 애니메이션 효과를 이용하여 스크린에 시각적으로 나타낼 수 있다고 합니다. 아울러, 캔버스를 이용하여 원이나 사각형을 만들고 서로 충돌할 때 멈추는 과거에 많이 해 보았던 게임도 구현할 수 있다고 하니 모르고 넘어가자니 계속 머리속에 남아있게 되어 여기저기 강좌를 통해 기본 Canvas 기능에 대해 일부라도 알고 가는게 낫다고 판단이 되네요. 그냥 스스로 마음에 대한 위로라고 할까요 뭐 그렇습니다. ▒ 캔버스 (Canvas) 기본 기능의 이해 본 내용은 'develope..
-
JavaScript 입문 : 지뢰찾기 게임 - 에러 수정 (화면 중복 생김 방지, 지뢰 폭발후 시간 흐름 방지, Placeholder 화면 초기화) 및 게임 시작시 줄, 칸, 지뢰갯수 입력하기컴퓨터 알아가기/JavaScript 2022. 11. 4. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 지금까지 지뢰찾기 게임에 대해 코드를 완성 하였습니다. 게임을 하면서 나욌던 에러에 대해 수정 보완 하도록 하겠습니다. 먼저 게임에 대해 조금 그림으로 이해하기 쉽게 textContent 입력칸에 지뢰를 'X', 깃발을 '!'로 표시한 것을 이모지로 대신해서 다음과 같이 그림화 하였습니다. 그리고 이제는 게임의 난이도를 즐기기 위해서 먼저 가로줄, 세로줄 그리고 지뢰갯수를 직접 입력하면서 하는 방식을 만들어 보도록 하겠습니다. input 태그를 이용하여 진행하도록 하겠습니다. 1. 가로 세로 지뢰 갯수 input태그 이용 입력하기 HTML에 태그를 만들고 자바스크립트 form 이벤트인 'submit' 이벤트를 활용합니다. ① HTML ..
-
JavaScript 입문 : 지뢰찾기 게임 - 지뢰없는 칸 한꺼번에 열기 (재귀함수 최적화), 게임 승리 및 걸린시간 표시컴퓨터 알아가기/JavaScript 2022. 11. 3. 19:30
Recursion 재귀함수에 대해 공부를 하고 있습니다. 나 자신의 함수를 나에게 다시 적용함으로써 같은 조건하에서는 지속적으로 작동되게 만드는 함수입니다. 그런데 지난시간에도 보았듯이 작동이 되긴하는데 시간차가 생기고 결국에는 브라우저가 다운되는 현상이 벌어졌습니다. 이는 이벤트루트의 문제도 아니며 자기 자신이 루프를 돌면서 지난간 곳을 반복적으로 지나가기 때문입니다. 관련된 재귀함수를 최적화하는 내용을 공부해보겠습니다. 관련 내용은 제로초 TV 자바스크립트 강좌의 도움을 받아 공부하고 있습니다. 1. 재귀함수 최적화 지난시간 에러를 다시보면 빈칸이 열리긴 하는데 시간이 더디고 마지막에는 브라우저가 다운되는 현상이 있었습니다. 원인을 고민해 보면 내가 열었던 칸을 기준으로 다시 열리고 다시 열린칸을 기..
-
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를 실행하라 언뜻보면 헷갈리는..