출처: https://codepen.io/kudchikarsk/pen/GYKmdd
<HTML>Pug
3: 배너
7: 블록 그리기
8: 블록 160개
<CSS>
# : id
. : class
111: color picker
117: opacity // 투명도 조정
<JavaScript>
1: Position class
8: Block class
21: init()
25: render()
32: fall()
52: getPosition
62: destroy()
63: $().remove() // HTML에서 ()요소 제거
88: fallingPosiotions()
90: .map (52)
67: Shape class
72: getBlocks()
76: init()
78: block.init 21
82:
84: 25
94: fall()
96: 32
114: 40
142: Square class
153: LShape
160: super // 부모 클래스와 연동하기 위해 사용한다.
164: rotate()
171: rotatePosition()
389: Board class
396: parseInt() // 정수로 변환
401: setScore()
406: getScore()
410: init()
411: $().each // 바탕화면 블록 그리기를 반복한다.
412: parseInt()
426: newGame()
427: this.shapes // 606 에서 배열 값 만듬
428: 614
429: 618 (72)
432: 62
436: 441
441: initGameLoop()
447: 451
451: gameLoop()
452: 483 // shape 그리기, 충돌검사
453: 509 // 블록 그리기, 채움 검사, 채움지우기
454: 572 // 새 shape 생성
455: 460 // 게임 끝나면 다시 그리기
460: gameUpdate()
464: clearinterval() // setinterval 작동 해제
473: isGameOver()
483: renderShapes()
484: 610
486: 624 (88) // 벽 검사
487: 633 // 블록 유무 검사
489: 94
490: 82
502: dropShape
509: renderBlocks()
531: flashBlocks()
539: fallBlocks()
551: removeBlocks()
557: destroyBlocks()
563: getBlock()
572: spawnShapes() // Shape 생성
576: 689
604: shape.init 76
610: getShape()
614: removeShape()
615: .splice ( indexof )
618: addBlocks() // 블록 생성
624: arePositionWithinBoard()
633: areBlockEmpty()
645: leftKeyPress()
651: 114
652: shape.render() // 옆으로 이동 그리기
657: rotate()
669: rightKeyPress()
689: getRandomRange() // 난수 생성, 블록 선택
1. 보드 그리기 : <Html>pug <CSS>
2. 블록 생성 :
메모리 생성 : 572
화면 생성
3. 블록 가로 이동 :
좌표 변경: 114
화면 표시
4. 블록 회전 :
좌표 변경 : 171
화면 표시
5. 블록 낙하 :
좌표 값 변경 : shape.fall()
화면 표시: shape.render()
6. 블록 충돌 검사 벽 : 624
7. 블록 충돌 검사 블록 : 633
8. 블록 채워지면 지우기 : renderBlocks()
메모리 값 삭제 destroyBlocks(), removeBlocks()
메모리 값 이동 fallBlocks
화면 삭제
9. 점수 계산
'소프트웨어 > website' 카테고리의 다른 글
| 티스토리에 mathjax 작동 (0) | 2022.10.19 |
|---|---|
| [자바스크립트] 테트리스 분석 (0) | 2022.10.01 |
| SVG 애니메이션 직선, 회전 이동 (0) | 2020.07.14 |