javascript
-
JavaScript] 자바스크립트 12강.셀프 체크 - 첫 클릭에는 지뢰 안 나오게 하기Javascript 2023. 9. 24. 16:50
문제 요구 사항 🟦 첫 클릭에 지뢰를 심으면 되지 않는다 🟦 첫 클릭에 그 자리가 지뢰면 그 지뢰를 옮겨 준다 이런 경우가 있는데 저희는 두 번째 경우를 선택을 하고 그 지뢰를 처음 마나는 빈칸에 넣을 수도 있고, 무작위로 칸을 찾아 보낼 수도 있습니다 저희는 첫 번째 클릭한 위치의 지뢰를 주변 8 칸 중 빈칸으로 보냅니다. 주변 8칸이 지뢰이 면 다시 그 주변의 8칸을 탐색합니다. 재귀함수를 통해서 찾으면 됩니다. 재귀 함수를 할 떄, 항상 호출 스택의 최대 크기를 초과하지 않도록 조심하면 됩니다 1. 첫번 째 클릭한 칸이 지뢰이면 옮기는 함수 // 첫 번째 클릭시, 지뢰 이동 함수 let normalCellFound = false; let serached; let firstClick = true; f..
-
[JavaScript] 자바스크립트 12장-재귀 함수 사용하기_지뢰 찾기 게임Javascript 2023. 6. 28. 23:29
12-1. 지뢰 찾기 순서도 그리기 🔆 지뢰 찾기란? 테이블 모야으이 칸을 만들고 폭탄을 무작위로 배치해야 합니다. 그리고 칸을 클릭하 주변 지뢰 개수를 표시하고, 주변 칸이 빈칸이면 한 번에 모든 칸을 여는 작업도 필요합니다. 또한, 마우스 오른쪽 버튼으로 칸을 클릭해 물음표나 깃발 표시도 해봅니다. 기능이 다양하므로 코드도 상당히 길겠죠? 호출 스택과 이벤트 루프의 원리를 활용해 실행 순서를 파악할 수 있다. 🔆 순서도 작성 시작 가로,세로 수에 따라 테이블 생성 칸에 현명하게 지뢰 심기 대기 12-2. 지뢰 심기 가로 10칸, 세로 10줄, 지뢰 10개로 시작합니다. 지뢰 데이터를 표현하는 배열을 만들고 반복문을 돌면서 tbody 태그 안에 tr 과 td 태그를 만들어 넣으면 됩니다. 데이터와 화면..
-
[JavaScript] 자바스크립트 11장. 이벤트 루프 이해하기 - 카드 짝 맞추기 게임Javascript 2023. 6. 16. 18:28
11-1. 카드 짝맞추기 게임 순서도 🔆 순서도 작성 11-2. 카드 생성하기 12장의 카드 생성 6가지 색이 필요 / 빨강(red), 주황(orange), 노랑(yellow), 초록(green), 하얀(white), 분홍(pink) 앞면의 색이 6가지 색이고 뒷면은 네이비(navy) 색으로 한다. 🔆 concat 🔆 같은 결과 값( 배열 안에 1,2가 있다) 🔆 다른 결과 값(배열 1이랑 그 안에 배열 2가 있다) function shuffle() { // 피셔-예이츠 셔플 for (let i = 0; colorCopy.length > 0; i += 1) { const randomIndex = Math.floor(Math.random() * colorCopy.length); // 카피된 갯수 만큼 랜덤..
-
[JavaScript] 자바스크립트 10강.셀프 체크 - 기타 기능 구현하기Javascript 2023. 6. 15. 19:49
배운 것 정리 🔆 window window 객체는 브라우저를 가리키는 객체로, 브라우저가 제공하는 기본 객체와 함수들은 대부분 window 객체 안에 들어 있습니다. document 객체나 console 객체로 실제로는 window.document, window.console 인데, window를 생략하고 document 와 console 만 적습니다. 🔆 this this 는 상황에 따라 다른 값을 가집니다. 기본적으로 this 는 window 객체를 가리키므로 어떤 다른 값을 가지는만 외우면 됩니다. 객체를 통해 this 를 사용할 때는 this 가 해당 객체를 가리키게 됩니다 특정 메서드는 콜백 함수의 this 를 바꿉니다. addEventListener 가 대표적입니다 this 가 바뀌는 것을 원..
-
[JavaScript] 자바스크립트 10장. 클래스_텍스트 RPG 게임 만들기Javascript 2023. 6. 9. 23:28
10-1. 텍스트 RPG 순서도 그리기 🔆 순서도 작성 게임에는 두 가지 모드가 있음모험, 휴식, 종료 중에서 선택하는 일반 모드와 적을 만나게 될 때 돌입하는 전투 모드입니다.전투 모드에서는 적을 공격하거나 체력을 회복하거나 도망갑니다. 🔆 화면 구성 주인공 생성하는 화면 주인공 스텟 화면 모험 모드 화면 전투 모드 화면 몬스터 스텟 화면 시작 1.모험 2.휴식 3.종료 입력 1.공격 2.회복 3.도망 입력 초기 화면 10-2. 주인공이나 몬스터 만들기 🔆 주인공 및 몬스터 스텟 변수 만들기 🔆 hreo 및 monster 객체 형태로 스텟을 만듬 // hero 객체 const hero = { name: '', lev: 1, maxHp: 100, hp: 100, xp: 0, att: 10, attack(..
-
[JavaScript] 자바스크립트 9강.셀프 체크 - 컴퓨터의 턴 만들기Javascript 2023. 6. 8. 18:37
배운 것 정리 이벤트 버블링 이벤트 버블링(event)은 이벤트가 발생할 때 부모 태그에도 동일한 이벤트가 발생하는 현상입니다. parentNode, children 부모를 찾을거면 parentNode 쓰고 자식을 찾을거면 children를 쓴다. flat() 함수 유사 배열을 배열로 만들어 준다. 2차원 배열을 1차원으로 만들어 주고 3차원 배열을 2차원으로 만들어준다 3차원 배열을 1차원으로 만들라고 하면 flat을 두 번 쓰면 된다. every, some every => 모든 조건이 true이면 true , 하나라도 flase이면 flase some=> 하나만 true이면 true , 모두가 flase이면 flase 문제 요구 사항 🟦 가장 빠른 다섯 번의 시도를 정렬 🟦 힌트 sort 메서드 사용..
-
[Javascript] 자바스크립트 8장 Date 사용하기_반응속도 테스트Javascript 2023. 6. 5. 21:43
8-1. 반응속도 체크 순서도 그리기 반응속도 체크 : 사용자는 처음 파랑 화면 봄(대기 화면) / 파랑 화면에서 한 번 클릭하면 빨강 화면으로 변함(준비 화면) 파랑 화면(대기 화면)에서 빨간화면(준비 화면)에서 초록 화면으로 바뀔 때, 사용자가 클릭을 하면 초록색 화면이 뜬 시간과 클릭한 시각의 차이를 구하는 반응 속도를 계산 만약 준비 화면(빨강) 일 때, 클릭한다면 성급했다는 메세지가 나오고 다시 클릭하도록 대기 화면(파랑)으로 보냅니다. 순서도 시작 파랑 화면 띄움 대기 화면 클릭 무슨색 화면인가? 파란색 빨간 화면으로 전환한다. 랜덤 타이머 작동한다. 초록 화면을 띄우고 시간을 재기 시작한다. 빨간색 파랑 화면으로 전환하고 성급했다고 안내한다. 초록색 클릭할 때까지 얼마 거렸는지 측정 및 표시..