테트리스 웹 게임 만들기 (2) - 테트리스 게임 판
1. html
코드가 길지 않아서 죄다 div태그를 썼다
전체 컨테이너 안에 popup, spped, 게임 화면, 다음 블록을 만들어 줬다.
게임 화면 안에는 score, 메인 게임이 표시될 table이 있다.
추가로 main.js와 style.css를 연결해줬다
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>테트리스</title>
<link rel="stylesheet" href="style.css" />
<script type="module" src="./js/main.js" defer></script>
</head>
<body>
<div class="container">
<div class="popup">
게임종료
<button class="restart">다시시작</button>
</div>
<di class="level_container">
<p>SPEED</p>
<div class="level"></div>
</di>
<div class="board">
<div class="header">
<p>score</p>
<p class="score">0</p>
</div>
<table class="stage_container">
<tbody class="stage"></tbody>
</table>
</div>
<div class="next"></div>
</div>
</body>
</html>
2. css 설정
우선 게임 종료 시 나올 popup창은 display:none을 해주고 보기 좋게 정렬만 해주었다.
/* style.css */
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
height: 100%;
background-color: white;
}
.container {
background-color: bisque;
width: 700px;
height: 700px;
margin: 3em;
display: flex;
flex-direction: row;
justify-content: center;
}
.header {
text-align: center;
font-size: 28px;
margin-bottom: 1rem;
}
.popup {
display: none;
}
3. main.js
mian에서는 tetris클래스를 생성해서 시작 함수 하나만을 실행하도록 했다.
// js/main.js
import Tetris from './tetris.js'
const tetris = new Tetris()
tetris.init()4. 테트리스 판 만들기
tetris.js에서 init함수 정의를 하고 게임판을 그렸다.
20x10의 테이블을 문자열과 innerHTML로 그려줬다.
// js/tetris.js
'use strict'
export default class Tetris {
constructor() {
//setting
this.N = 20
this.M = 10
//dom
this.stage = document.querySelector('.stage')
}
init() {
this.makeGround()
}
makeGround() {
this.ground = []
for (let i = 0; i < this.N; i++) {
this.ground.push('<tr>')
for (let j = 0; j < this.M; j++) {
this.ground.push('<td></td>')
}
this.ground.push('</tr>')
}
this.stage.innerHTML = this.ground.join('')
}
}추가로 테이블의 테두리에 색을 주고 꾸며주었다.
/* style.css */
.stage {
margin: 0 auto;
outline: 2px solid white;
background-color: rgba(134, 134, 134, 0.5);
}
.stage > tr {
width: 100%;
height: 25px;
}
.stage > tr > td {
width: 25px;
height: 25px;
outline: 1px solid white;
}
'Project > 테트리스 (javascript)' 카테고리의 다른 글
| [JavaScript] 테트리스 웹 게임 만들기 (6) 블록 부수기 (0) | 2022.02.20 |
|---|---|
| [JavaScript] 테트리스 웹 게임 만들기 (5) 블록 체크 (0) | 2022.02.18 |
| [JavaScript] 테트리스 웹 게임 만들기 (4) 블록 이동 및 전환 (0) | 2022.02.15 |
| [JavaScript] 테트리스 웹 게임 만들기 (3) 블록 정의 및 렌더링 (0) | 2022.02.11 |
| [JavaScript] 테트리스 웹 게임 만들기 (1) 개요 (0) | 2022.02.07 |
