1. flip card

로직

셔플된 카드를 클릭해서 맞으면 사라지고 틀리면 다시 뒤집는다. 배열에 클릭된 카드 두 장을 담고 두 장을 비교한다. 비교하려면 id가 필요하다.

세팅

name, url 짝으로 이미지 정보가 담긴 객체들의 배열이 필요하다. 일단 for문으로 src, id를 각각 준다. 클릭 이벤트 걸고 sort로 셔플. 그리고 append.

(막힘) 클릭된 카드에 새로운 이미지 어떻게 줄까. forEach는 중복됨. (해결) 클릭한 id를 이용해 셔플드 배열에서 name을 가져온다.

시작

클릭된 카드 담는 배열에 클릭된 카드 이름 저장. 이제 클릭된 카드에게 셔플드에서 이미지 이름을 주었고클릭된 카드의 id 정보도 얻었다. 그럼 이제 클릭된 카드에게 src를 다시 줄 수 있다. 셔플드 배열[id].url

이제 카드가 틀리면 다시 뒤집고 카드가 맞으면 사라지는 로직해야 한다. match라는 새로운 함수 만들어서 match 함수로. 틀리면 setTimeout으로 다시 카드가 뒤집혀야 하는데 다시 클릭해도 똑같은 이미지여야 한다. 그러려면 name, id를 다시 node정보로(맞는 용어인가) 변환해서 찾아야 하는데 고민좀..

(막힘) 카드가 틀렸으면 다시 뒤집혀야 하는데 그 카드들을 어떻게 가져와야 하지. (해결) html에 있는 img 다 가져와서 클릭된 아이디랑 같은 거로 찾음

    const cards = document.querySelectorAll("img")
    const newTarget = cards[clickedCardIds[0]]

정확히 설명은 못 하겠는데 삼각형을 만들어서 돌리는 느낌...? 아무튼 짝 맞춘 카드 배열 만들어서 거기에 넣어줘서 승리 패배 판정한다.

--> id를 이용하는 것

2. wack-a-mole

로직

생각보다 간단 setTimeout으로 그림이 등장했다 사라지게 한다. 그림이 등장했을 때 클릭하면 점수가 올라간다. 클릭은 id로 잡는다.

세팅

랜덤넘버로 div에 mole 클래스를 준다. 새로운 squares 배열을 만들어서 담고 랜덤넘버에 해당하는 칸을 mole한테 줌.

(막힘) mole이 시간마다 생성되어야 하는데 setTimeout이 작동을 안 한다. 깜빡 하는 동안 나타났다 사라져야함. (해결)timerId랑 setTimeout, setInterval로 만든다.

스코프 때문에 조금 헷갈렸는데 contains 으로 해결. 타이머에서 살짝 막힘.

3. connect-four

로직

가장 아래부터 돌을 깔 수 있다. 마지막 row는 미리 taken으로 한다. 턴제니까 1p, 2p가 있고 순서에 따라 바뀐다. flag

squares / square에 이벤트 리스너 거는 것에 대해 어떤 기준으로 하는지 헷갈린다.. index가 항상 문제여. setInterval할 때 remove먼저 하고 add한다.

--> 이중 for문 하려다가 실패. 이중포문 다시 공부하자.

4. snake

로직

setTimeout 실행마다 뱀이 움직이고 방향을 바꿀 수 있다. 벽에 부딪히면 사망, 자기 신체(div)에 닿아도 사망. 애플은 랜덤으로 생성. 사과 먹으면 div이 꼬리에 붙는다.

세팅

먼저 현재 snake의 인덱스와 current index를 정한다. snake = [2,1,0] 0이 꼬리 2가 머리다. 그리고 direction은 1. 즉, 오른쪽이다. current index는 일단 0. forEach로 squares(board)에 snake 클래스 달고 interval 이란 변수를 만드는데 interval은 setInterval을 위한 변수다. setInterval()할당하고 move함수, 그리고 interTime이란 변수를 준다. intervalTime은 뱀을 시간마다 움직이게 할 변수.

(막힘) setTimeout 할 때마다 뱀이 움직인다 -> 즉, snake = [2,1,0] 라고 하고 squares에서 똑같은 인덱스를 가진 div에 가야한다 (해결) snake index 배열 기준 forEach해서 그 인덱스의 value(예를 들어 [2,1,0].forEach(index=>squares[index])) 이런 식으로 적용한다

뱀에게 setInterval 주기 전에 키보드로 움직이는 함수 만들자. keyup마다 direction대로 움직이니까 일단 remove다. 동서남북 direction을 더하고 빼주자. 이제 currentIndex를 만지러 move 함수로 간다. 사과를 안 먹었을 경우 오른쪽으로 기본적으로 이동하는데 머리가 늘어나는 대신 꼬리가 없어진다. snake배열에 pop을 하면 꼬리부터 정해진 시간마다 하나씩 자른다. 이걸 다시 머리에 붙이면 움직이는 것처럼 보인다. tail인덱스에 해당하는 squares에서 snake를 지운다. 이제 머리에 방향 만큼 index를 더하면 된다. 만약 오른쪽이라면 currentSnake[0] + 1을 한 인덱스를 unshift해주면 된다.

이렇게 오른쪽으로 계속 이동한다. 그리고 currentSnake[0] 즉, 머리에만 snake를 추가해준다. 이제 이동 제한을 할차례. direction과 동서남북 부딪히는 벽의 제한에 따라 경우를 나눈다. 그리고 뱀의 방향(머리)가 뱀 자신의 클래스가 있는 div을 갔을 때

랜덤 사과 만들기

랜덤으로 사과 인덱스 정해서 떨어트리면 된다. 한번만 하면 되니까 한번만 만들자. 일단 전역에 사과 인덱스 선언. 그리고 다시 move에 가서 snake가 사과 먹었을 때를 해준다. 사과를 먹으면 html에 squares[tail]에 해당하는 div에 클래스 추가 그리고 snake배열에 tail push 한다. 그리고 랜덤애플 생성. 난이도 상승을 위해서 clear interval 하고 interval time에 speed 곱하고 interval을 다시 실행한다.

--> currentSnake[0]을 기준으로 뱀을 잘라서 움직이게 하는 것이 어려웠다. 인덱스에 약하다..