요즘 개발 트렌드는 javaScript를 편하게 사용하도록 도와주는 라이브러리를 활용한 개발이 아닌 순수(바닐라) javaScript를 이용한 개발이라고 어디에선가 들은 적이 있다. javaScript의 꾸준히 업데이트, 라이브러리 이용 시 다소 느려지는 로딩시간 등의 이유로 실제로 프런트엔드 개발에 필수였던 jQuery의 사용량은 급감 중이고(물론 React, vue.js 등의 프레임워크 등장의 영향도 있음) 개발 구인 시 필요 기술에서도 jQuery는 점점 빠지는 추세다.
그.래.서
javaScript의 능력을 키움과 동시에 뽐내기 위해 순수 JS만을 이용한 테트리스 만들기를 해보려 한다.
1. 기본세팅
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
text-align: center;
}
.wrapper {
display: flex;
justify-content: center;
}
.play-board {
margin-top: 100px;
border: 3px solid black;
}
.play-board>div>div {
border: 1px solid white;
}
.board {
margin-top: 100px;
margin-left: 50px;
width: 200px;
height: 400px;
text-align: left;
}
.rows {
display: flex;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="play-board" id="playBoard"></div>
<div class="board">
<p>테 트 리 스</p>
<button id="start" onclick="play()">게임시작</button>
<p>LEVEL : <span id="level">0</span></p>
<p>SCORE : <span id="score">0</span></p>
</div>
</div>
<script>
</script>
</body>
</html>모든 작업은 vs code에서 진행했고 index.html 파일을 하나 만들어준 뒤 다음과 같이 코드를 작성해 보자.
테트리스 게임이 진행될 playBoard와 게임시작, 레벨, 점수를 확인할 board 두 개로 나눴으며, 다른 사람들은 canvas를 이용해 테트리스 게임을 구현했으나, canvas는 배운 적이 없어 그냥 div로 만들어 보려고 한다.
vs code에 live preview를 켜보면 다음과 같은 화면이 나온다. 테트리스는 세로로 긴 직사각형의 보드에서 게임이 진행되지만 지금은 게임판을 채우지 않았기 때문에 세로 막대기만 나올 것이다.
이제 보드판을 javaScript를 통해 만들어주자.
const rows = 20;
const cols = 10;
const blockSize = 20;
const playBoard = document.getElementById("playBoard");
let color = "";
// 보드판 만들기
for (let i = 0; i < 20; i++) {
let r = document.createElement("div");
r.classList.add('rows');
r.classList.add('rows' + i);
for (let j = 0; j < 10; j++) {
let c = document.createElement("div");
c.classList.add('col' + j);
c.classList.add('row' + i);
c.style.width = blockSize + 'px';
c.style.height = blockSize + 'px';
r.append(c);
}
playBoard.append(r);
}rows는 보드판의 세로 칸 수, cols는 보드판의 가로 칸 수, blockSize는 각 칸의 크기를 의미한다.
반복문을 이용해 rows div를 만들어 주고 만든 rows안에 row와 col의 정보를 클래스에 담은 div를 10개씩 생성해 준다.
그렇게 20개의 rows를 만들어주고, 만들어진 rows를 playBoard에 담아주면
다음과 같이 무언가 가득 찬 보드판이 만들어진 것을 확인할 수 있다.
'javaScript' 카테고리의 다른 글
| JavaScript 테트리스 만들기 - 4 (0) | 2024.04.08 |
|---|---|
| JavaScript 테트리스 만들기 - 3 (1) | 2024.04.04 |
| JavaScript 테트리스 만들기 - 2 (0) | 2024.04.02 |
