FE/javascript

자바스크립트로 테트리스 만들기 (JS)

ㅈㅣ니 2023. 9. 6. 23:29

오늘은 심심해서 무엇을 해볼까 하다가 테트리스 게임 만들기를 해보려고 한다.

물론,,, 다른 분의 블로그를 보면서 만들어볼 것이다.!

https://ui.toast.com/weekly-pick/ko_20191216

 

모던 자바스크립트로 테트리스 만들기

오늘은 고전 게임인 테트리스로 게임 개발 여행을 해보려고 한다. 그래픽, 게임 루프 및 충돌 감지 등을 다루고, 마지막에는 점수와 난이도가 완벽하게 작동하는 게임을 갖게 될 것이다.

ui.toast.com

참고한 블로그 

블로그를 보면서 만들 때 조금씩 다른 점을 여기에 적어보려고 한다.

프로젝트 구조

파일은 이렇게 형성했다.

참고로 css 랑 js 연결하려면 index.html에 링크로 연결해야한다..

확실히 파일을 나눠서 관리하니까 관리하기 좋은 것 같다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid">
        <canvas id="board" class="game-board"></canvas>
        <div class="right-column">
            <div>
                <h1>TETRIS</h1>
                <p>Score: <span id="socre">0</span></p>
                <p>Lines: <span id="lines">0</span></p>
                <p>Level: <span id="level">0</span></p>
                <canvas id="next" class="next"></canvas>
            </div>
            <button onclick="play()" class="play-button">Play</button>
        </div>
    </div>

   
    <script type="text/javascript" src="constants.js"></script>
    <script type="text/javascript" src="board.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="piece.js"></script>
</body>
</html>

index.html

이렇게 UI 가 형성된 걸 볼 수 있다.

폰트는 

https://fonts.google.com/specimen/Press+Start+2P 

 

Press Start 2P - Google Fonts

Press Start 2P is a bitmap font based on the font design from 1980s Namco arcade games. It works best at sizes of 8px, 16px and other multiples of 8. Although t

fonts.google.com

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

이렇게 head에 추가해줬다.

(나중에 다른 거 만들때 이렇게 api 이용하면 될것 같다. ( 이렇게 또 하나 배워감 )

 

나머진 거의 다 비슷.

function play(){
    board.reset();
    console.table(board.grid);
   
    board.getEmptyBoard();
    let piece = new Piece(ctx);
    piece.draw();

    board.piece = piece;
   

}

main.js 보면 블로그에서 board = getEmptyBoard();

이렇게 하래서 했다가 계속 오류나서 왜 그러지... 찾아보다가

board.getEmptyBoard(); 이렇게 하니까 됐음

드디어 테트로미노가 생겼음!!

 

 

여기 이후로
계속 오류발생해서,,, 원인 좀 찾고 뒷 내용은 조만간 올릴 예정!!

반응형