지뢰찾기 게임 구현 익숙한 지뢰찾기 게임 프로그램을 구현했다. 마인이 들어있는 데이터 테이블과 유저에게 보이는 스크린 테이블을 따로 만들어 작성했고 지뢰가 아닌 칸에 대해서는 주변 마인의 수를 탐지해 탐지한 마인 수를 띄우고 개수가 0인 칸을 누르게 되면 탐색을 통해 최대한 많은 빈칸들이 열리도록 작성했다. 개인풀이 다이어그램 알고리즘 const $tbody = document.querySelector(".table tbody"); const $result = document.querySelector(".result"); const mineCnt = 10; const row = 10; const col = 10; let opened = 0; // 데이터 테이블 생성 const dataTableLinear..

카드 맞추기 구현 문제 처음 12장의 카드를 잠깐 기억했다가 뒤집은 후 색상이 같은 2장의 카드를 짝지어 모든 카드를 맞추는 프로그램이다. 클릭했을 때 클릭한 카드의 패밀리 노드 중 특정한 클래스를 가진 노드들을 가져와 해당 노드의 색상을 비교해 맞추어가는 방식으로 동작한다. 구현에 어려움은 없었는데 parent와 child 노드를 왔다갔다 하는 부분들이 많다. 이 부분에 더 좋은 구현 방법이 있을 것 같은데. 개인풀이 다이어그램 알고리즘 const $cards = document.querySelectorAll(".card"); const $cardsFront = document.querySelectorAll(".card__face--front"); const colorPack = [ "orange", ..

미니 전투 게임 제작 간단한 텍스트 게임이다. 다이어그램대로 작성했는데 자질구레한 기능들을 구현해 넣다보니 코드가 좀 지저분해진 것 같다. (플래그 변수 넣고 빼는 부분은 나중에 스스로 헷갈려서 버그 수정에 힘이 좀 들었다.) 오류 나올만한 부분은 모두 제거했고 문제는 게임이 재미가 .. 어차피 구현 훈련을 위한 목적이니까. 좀 더 게임스럽게 만들려면 그래픽도 추가하고 아이템이나 다양한 몬스터들도 추가를 하면 될 것 같다. 객체 지향으로 재설계하는게 이런 게임 만들기 프로그램에선 더 깔끔할 것 같긴 하다. 개인 풀이 다이어그램 알고리즘 const $startGame = document.querySelector(".startGame"); const $myInfo = document.querySelector..

틱택토 프로그램 컴퓨터와 대결하여 가장 먼저 3칸을 연달아 차지하는 플레이어가 승리하는 프로그램을 작성하시오. 개인 풀이 다이어그램 알고리즘 const $log = document.querySelector(".log"); // 빈 테이블 생성 const spaceArray = []; for (let _ = 0; _ < 3; _++) { spaceArray.push(Array(3)); } const $items = document.querySelectorAll(".item"); let itemIndex = 0; // DOM 데이터 매칭 for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { spaceArray[i][j] = $items[itemIndex]..

클릭속도 테스트 녹색 화면이 나왔을 때 클릭 속도를 측정하는 프로그램을 작성하시오. 개인 풀이 다이어그램 알고리즘 const $screen = document.querySelector(".screen"); const $timeDiff = document.querySelector(".timeDiff"); const $log = document.querySelector(".log"); const recordArray = []; let timeout; let startTime, endTime, timeDiff; let flag = true; const handleScreenClick = (e) => { if (flag === false) return; if ($screen.style.backgroundColo..

가위바위보 대결 프로그램 풀이 컴퓨터는 가위, 바위, 보를 연달아 순환하며 내 선택에 따라 결과를 판단해 승/패/무승부를 매기는 프로그램을 작성하시오. 개인 풀이 다이어그램 알고리즘 const $computer = document.querySelector("#computer"); const $score = document.querySelector("#score"); const $rock = document.querySelector("#rock"); const $scissors = document.querySelector("#scissors"); const $paper = document.querySelector("#paper"); const IMG_URL = "./rsp.png"; $computer.st..