[자바스크립트] 테트리스 분석

출처: https://codepen.io/iftrrtrn/pen/EKwJLo

 

<CSS>

 

6: dispaly: inline-block;

 

   div 배치할 때 float: ; 보다 간단하다.

 

22: border-collapse: collapse; //table과 td 사이의 테두리를 없앱니다.

 

27: first-child // 첫번째를 선택하는 것

 

<javascript>

 

7: tetris class

9:   ~~

19: TetraminoForms

55: fieldArray

64: generateComponent() 

    //클로저 함수 

   // 미리보기, 게임판, 게임판 배열 만들기

66: 미리보기 그리기

75: appendChild // td 같은 것 추가

81: classLIst.add // class 추가

92: piece 없는 보드 그리기

114: 보드 배열 값 초기화

      filedArray.push([])

      filedArray[i].push('.')

      (0, 0) (0, 1) (0, 2) ..... (0, 9)

      (1,0)   ....

      (2.0)  

      .

      .

128: Tetramino class

130: Tetramino 클래스

      this.coords  : 최초 생성 좌표

 

136: Tetramino 회전 함수

      form 배열 좌표 : 적색은 회전하는 좌표

      (0,0) (0,1) (0,2) (0,3) (0,4)

      (1,0) (1,1) (1,2) (1,3) (1,4)

      (2,0) (2,1) (2,2) (2,3) (2,4)

      (3,0) (3,1) (3,2) (3,3) (3,4)

      예제 

      TetraminoForms = [

       [

        [ 'i', 'i', 'i', 'i' ]

       ],

       를 선택했을 경우 

      temp.length = 4

      temp[0].length = 1

      form.length = 1

      form[0].length = 4

 

146: 회전 시 블록 충돌 확인

163: if (coords[0] === 0 && coords[1] === -1) // ↑ 키가 눌러졌다면

168: 좌우벽(폭) 충돌 검사

169: filedArray[0].length = 1

172: 좌우 값 더함

176: 하강 검사, 

177: filedArray.length = 7

178: 하강 좌표 증가 

 

184: 보드 그리기

       fieldArray.length = 20

       filedArray[0].length = 10

193: drawNextTetramino

207: 키 입력 

                      [0, -1] 38 ↑

       37 ←[-1, 0]               [1, 0] 39 →

                       [0, 1] 40 ↓

216: runTetris()

// tetramino 생성

226: moveTetramino() // 자동으로 떨어지기

         233: 전단계 piece 지우기 위해서 보드 배열 값 세팅

243: piece 떨어지는 것(이동) 그리기, 블록 배열 값 세팅

248: 입력이 없다로 세팅

257: fallTetramino()

267: 바닥 충돌 검사

277: 블록 충돌 검사

287: side 충돌 검사

 

315: 채움 검사

339: 맨 위에 검사

345: resetGame()

 

356: 최초 시작

 

356

357

358

359 : 216

220 : 193

222: 226