출처: 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
