정보실

웹학교

정보실

javascript 테트리스 턴 35 (1)

본문

2019 년 6 월 6 일 테트리스는 35 세가 되었습니다. 축하하기 위해, 나는 내 자신의 버전을 작성하고 내 GitHub 저장소에 게시했습니다. 라이브러리가 없습니다. 프레임 워크가 없습니다. JavaScript 만. JavaScript를 배우는 사람들은 여기서 몇 가지 교훈을 얻을 수 있습니다!


https://medium.com/@js_tut/tetris-turns-35-cfcf04c4f2bb 


1*_VTs4Kih4hn9GwCYCXGmIw.gif 


테트리스는 Alexey Pajitnov에 의해 만들어졌으며 1984 년 6 월 6 일에 릴리스되었습니다.


0*74DpOmQGc2sgrfWg.jpg 

새로운 Tetris 로고는 최근 게임의 35 주년 인 2019 년 6 월 6 일에 발표되었습니다. 이 이미지는 깔끔한 게임 사이트 인 Twin Galaxies 기사에서 빌린 것입니다. Tetris 로고는 본사가 하와이 호놀룰루에 있는 Tetris Company, LLC의 저작권입니다.


그렇다면 어떻게 테트리스를 바닐라 JavaScript로 처음부터 만들 수 있습니까?


라이브러리가 없습니다. 프레임 워크가 없습니다. JavaScript와 코딩 손가락만 있으면 됩니다.


그러나 왜 시각적 설탕을 넣지 않습니까? 


나는 약간의 창의력을 얻었고 Tetris In The Dark 효과를 추가했습니다. 이 튜토리얼이 좀 지루하지 않게 되기를 바랍니다. 이 외에도 JavaScript로 Tetris를 구성하는 데 필요한 모든 것을 다룰 것입니다.


1*YyQeBavIG2nyIckcVrv25g.gif 


테트리스는 만드는 것보다 연주하기가 더 쉽습니다. 테트리스를 만들기 시작했을 때 몇 가지 작업을 따로 완료 해야 한다는 것을 알게 되었습니다. 즉, 애니메이션, 충돌 감지 및 행 지우기 알고리즘입니다.


이것이 내 첫 번째 시도에서 내 게임 버전이 어떻게 생겼는지 입니다.


1*w2LjHtw7cyz5BL75P4UnYw.png 


또한 동적 크기의 우물을 만들고 싶었습니다. 재생 영역의 크기를 조정할 수 있음을 의미합니다. 웰 및 테트로 미노 블록은 어레이로 나타낼 수 있습니다. 키보드 이벤트를 사용하여 사용자 입력을 받을 수 있습니다.


전역 변수 색상으로 저장하여 색상을 쉽게 변경할 수 있었습니다. 전역 변수 사용은 종종 회피됩니다. 그러나 우리는 여기서 바닐라 JavaScript로 간단한 테트리스 데모를 만들고 있습니다. 전체 색상은 다음과 같이 저장할 수 있습니다.


let color = { background: "#5c2a3b", // 배경
wall: "#d83c66", //
solid: "#49b5ab", // 고체 테트로 미노
tetromino: "#e97539" }; // 떨어지는 테트로 미노 


색상 테마를 변경하려면 해당 색상을 수정하십시오. 이 데모에서는 모든 테트로 미노가 동일한 색상을 공유합니다. 그러나 이것은 나중에 조정할 수 있습니다. 핵심 원칙을 명확하게 유지하기 위해 코드를 지나치게 복잡하게 만들고 싶지 않습니다.


완전한 테트리스 소스 코드 


이 튜토리얼은 일주일 전에 작성한 기존의 테트리스 코드를 기반으로 합니다. 내 GutHub 프로 파일에서 Complete Tetris 소스 코드를 포크 할 수 있습니다. *이 자습서에서는 중복을 피하기 위해 전체 소스 코드를 나열하지 않습니다. 그러나 모든 중요한 기능이 여기에 나열됩니다.


프로젝트 배경. 아니요, 이것은 JavaScript로 작성된 가장 최적화 된 테트리스 게임이 아닙니다. JavaScript로 프로그래밍하는 유일한 방법도 아닙니다. 간단한 구성 (배열 및 for 루프)을 사용하여 모든 구성 요소를 쉽게 파악할 수 있었습니다. 최적화는 나중에 적용 할 수 있습니다. 가장 효율적인 테트리스 게임을 작성하는 방법에 대한 자습서는 아닙니다. 오히려 그 배후의 원칙에 따라.


동적 DIV 요소를 사용하여 컬러 사각형으로 구성된 상대적으로 작은 격자에서 게임 애니메이션을 얻을 수 있습니다. 캔버스를 사용할 필요조차 없습니다. 그러나 캔버스에서 구현하지 못하게 하는 것은 없습니다.


많은 게임이 그리드 기반입니다. 이 설정에서 분기하여 체스, 캔디 크러쉬 또는 Stardew Valley와 같은 농업 시뮬레이터와 같은 2D 그리드에서 발생하는 간단한 게임을 만들 수 있습니다.


Well 


10 x 20은 테트리스의 기본 크기입니다. 그러나 모든 크기가 될 수 있습니다. 이 데모에는 우물 배열의 일부인 벽도 있습니다. 따라서 우물의 너비는 10 제곱이지만 벽은 실제로 12입니다.


1*VJHNdt0qK9YP7DDIvvS45Q.png 

12 x 17


얼마나 얇거나 넓은 지에 관계없이 우물의 크기를 지정할 수 있는 방식으로 코드를 작성하겠습니다.


1*K6R5NdYi-RFXNaCY3gxZzA.png 

50 x 36

예를 들어 폭이 50 제곱이고 웰이 36 제곱 인 테트리스 버전을 만들 수 있습니다 (때로는 실험하기 만 해도 재미 있습니다).


let width = 50; // well width
let height = 36; // well height
let square_size = 16; // square size in pixels 


우물 배열을 만들어 봅시다 :


let well = new Array(height); // array holding the entire well 


이 배열은 배열 목록을 보유합니다. (다음 섹션에서 작성)


우물 생성 


우물의 각 사각형에는 자체 코드가 있습니다.


기본 아이디어는 0이 빈 공간이라는 것입니다.


다른 모든 것 (1, 2, 3 등)은 솔리드 (충돌 가능)로 간주됩니다.


빈 공간 (0), 왼쪽 및 오른쪽 벽 (1) 및 아래쪽 (2)을 생성하려면 해당 값을 적절한 위치의 벽 배열에 지정하면 됩니다.


// Reset entire well to all 0's
for (let y = 0; y < width; y++)
well[y] = new Array( height ).fill(0);

// Mark bottom
for (let x = 0; x < width; x++)
well[x][height - 1] = 2;

// Mark walls
for (let y = 0; y < height; y++) {
well[0][y] = 1;
well[width - 1][y] = 1;
} 


HTML 요소를 작성하는 코드는 다음과 같습니다. 그런 다음 <body> 요소에 삽입됩니다. 그렇기 때문에 시작 HTML 문서가 거의 비어 있습니다. 모든 블록이 생성되어 DOM에 동적으로 삽입됩니다.


// Generate well on the screen by creating HTML elements dynamically
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) { // Create a DIV element dynamically
let square = document.createElement("div");
// Create an intuitive easy to access ID, eg: "square_x5y13"
square.setAttribute("id", "square_x" + x + "y" + y);
// Set some CSS properties for the square
square.style.position = "absolute";
square.style.left = x * square_size + "px";
square.style.top = y * square_size + "px";
square.style.width = square_size + "px";
square.style.height = square_size + "px";
square.style.zIndex = 0;
let block_type = well[x][y];

// Empty space color:
if (block_type == 0) square.style.background = "#082b7f";
// Wall color:
if (block_type == 1) square.style.background = "#841550";
// Bottom wall color:
if (block_type == 2) square.style.background = "#c20c98";
// Add created square to the <BODY> dynamically
document.body.appendChild( square );
}
}


이 기능은 well [x] [y]의 값을 확인하고 각 사각형에 대한 DIV 요소를 개별적으로 생성하여 전체 well을 통과합니다. 그런 다음 block_type 변수에 저장된 값을 기반으로 해당 정사각형에 색상을 할당합니다. 이는 단순히 well [x] [y]의 값을 가리킵니다.





페이지 정보

조회 58회 ]  작성일19-08-09 22:12

웹학교