전체 글
-
[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] 자바스크립트 9강 이차원 배열 다루기_틱택토 게임Javascript 2023. 6. 7. 22:19
9-1. 틱택토 순서도 그리기(테이블 만들기) 택택토게임 : 삼목(3x3 표 위에서 진행하는 게임) 🔆 순서도 작성 1. 시작 2. 3x3 이차원 배열을 준비한다. 3. o의 턴으로 설정한다. 4. 3x3 테이블을 그린다. 5. 대기 ----------------------------------- 1. 칸을 클릭한다. 2. 클릭한 칸이 비어있는가? ❌: 대기 ⭕: 현재 턴을 칸에 적어넣는다. 승부가 났는가? ⭕: 승자를 표시한다. → 끝 ❌: 무승부인가? ⭕: 무승부라고 표시한다. → 끝 ❌: 턴을 넘긴다. → 대기 🔆 테이블 만들기 🔆 테이블 형태 3x3 테이블 형태는 다음과 같은 자바스크립트 코드로 구현할 수 있다. 실행 화면 9-2. 이차원 배열 다루기 🔆 테이블에 글자 표시 실행 화면 9-3. 표..
-
[JavaScript] 자바스크립트 8강 셀프 체크 - 속도 순으로 정렬하기Javascript 2023. 6. 6. 16:46
문제 요구 사항 🟦 가장 빠른 다섯 번의 시도를 정렬 🟦 힌트 sort 메서드 사용 $screen.addEventListener("click", (event) => { ... } else if (event.target.classList.contains("now")) { ... const rank = records .slice() .sort((a, b) => a - b) .splice(0, 5); for (let i = 0; i < rank.length; i++) { $result.append(document.createElement("br"),`${i + 1}위 : ${rank[i]}ms`); } startTime = null; endTime = null; ... } }); records의 결과를 sli..
-
[Javascript] 자바스크립트 8장 Date 사용하기_반응속도 테스트Javascript 2023. 6. 5. 21:43
8-1. 반응속도 체크 순서도 그리기 반응속도 체크 : 사용자는 처음 파랑 화면 봄(대기 화면) / 파랑 화면에서 한 번 클릭하면 빨강 화면으로 변함(준비 화면) 파랑 화면(대기 화면)에서 빨간화면(준비 화면)에서 초록 화면으로 바뀔 때, 사용자가 클릭을 하면 초록색 화면이 뜬 시간과 클릭한 시각의 차이를 구하는 반응 속도를 계산 만약 준비 화면(빨강) 일 때, 클릭한다면 성급했다는 메세지가 나오고 다시 클릭하도록 대기 화면(파랑)으로 보냅니다. 순서도 시작 파랑 화면 띄움 대기 화면 클릭 무슨색 화면인가? 파란색 빨간 화면으로 전환한다. 랜덤 타이머 작동한다. 초록 화면을 띄우고 시간을 재기 시작한다. 빨간색 파랑 화면으로 전환하고 성급했다고 안내한다. 초록색 클릭할 때까지 얼마 거렸는지 측정 및 표시..