자바스크립트로 테트리스 게임을 구현하기 위한 아이디어와 방법

'프로그래밍의 아름다움' 보기: "프로그램은 작성하기 어렵지만 아름답습니다. 프로그램을 잘 작성하려면 프로그래밍 언어, 데이터 구조, 알고리즘을 포함한 특정 기본 지식이 필요합니다. 프로그램을 잘 작성한다면 , 엄격한 논리적 사고 능력과 프로그래밍에 대한 탄탄한 기초는 물론 프로그래밍 환경과 프로그래밍 도구에 대한 친숙도가 필요합니다.”

몇 년 동안 컴퓨터를 공부한 후 프로그래밍과 사랑에 빠진 적이 있나요? 즉, 게임을 직접 작성해 본 적이 없다면 프로그래밍을 별로 좋아하지 않는 것입니다.

테트리스가 불러일으킨 센세이션과 경제적 가치는 게임 역사상 중요한 사건이라고 할 수 있습니다. 단순해 보이지만 끝없이 다양하고 중독성이 있습니다. 나는 대부분의 반 친구들이 한때 그것에 너무 집착하여 음식과 차에 대해 생각하지 않았다고 믿습니다.

게임 규칙

1. 작은 사각형을 배치하기 위한 평면 가상 장소의 표준 크기: 행 너비는 10, 열 높이는 20이며 각 작은 사각형은 다음과 같습니다. 단위.

2. 4개의 작은 정사각형으로 구성된 정사각형의 집합입니다. 영어로는 테트로미노(Tetromino)라고 하며, 중국어로는 정사각형(Square)이라고 하는데 S, Z, L, J, I의 7가지 종류가 있습니다. , O 및 T. 문자 모양에 따라 이름이 지정됩니다.

I: 한 번에 최대 4개 레이어 제거

J(왼쪽 및 오른쪽): 최대 3개 레이어 제거 또는 2개 레이어 제거

L: 최대 4개 레이어 제거 3겹, 아니면 2겹 없애기

O : 1~2겹 없애기

S(좌우) : 2겹까지, 구멍내기 쉬움

Z ( 왼쪽 및 오른쪽): 최대 2개 층, 구멍이 생기기 쉽습니다

T: 최대 2개 층

블록은 해당 영역의 상단부터 천천히 떨어지기 시작합니다. 플레이어는 블록을 90도 단위로 회전시킬 수 있으며, 그리드 단위로 블록을 좌우로 움직여 블록이 빠르게 떨어질 수 있습니다. 블록이 해당 영역의 맨 아래로 이동하거나 다른 블록에 착지하여 이동할 수 없는 경우 해당 블록은 해당 영역에 고정되고 해당 영역 위에 새로운 블록이 나타나 떨어지기 시작합니다. 해당 지역의 수평 격자 열이 사각형으로 완전히 채워지면 해당 열이 사라지고 플레이어의 점수가 됩니다. 동시에 삭제되는 열이 많을수록 점수 지수가 높아집니다.

분석 및 솔루션

각 블록이 떨어질 때 다음을 수행할 수 있습니다.

1) 적절한 방향으로 회전

2 ) 특정 열로 가로로 이동

3) 아래로 세로로 드롭

먼저 2차원 배열을 사용해야 하는데, Area[18][10]은 18*10을 나타냅니다. 게임 영역 . 그 중 배열의 값이 0이면 비어 있음을 의미하고, 값이 1이면 블록이 있음을 의미합니다.

총 7가지 종류의 블록이 있으며 각 블록마다 4방향이 있습니다. activeBlock[4]을 정의합니다. 이 배열의 값은 컴파일 전에 미리 계산되어 프로그램에서 직접 사용됩니다.

어려움

1) 경계 확인.

//检查左边界,尝试着朝左边移动一个,看是否合法。
function checkLeftBorder(){ 
  for(var i=0; i<activeBlock.length; i++){ 
    if(activeBlock[i].y==0){ 
      return false; 
    } 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y-1)){ 
      return false; 
    } 
  } 
  return true; 
} //同理，需要检测右边界和底边界

2) 회전에는 수학적 논리가 필요합니다. 한 점을 다른 점을 기준으로 90도 회전시키는 문제입니다.
3) 타이밍 및 키보드 이벤트 모니터링 메커니즘을 통해 게임이 자동으로 실행될 수 있습니다.

//开始 
function begin(e){ 
  e.disabled = true; 
  status = 1; 
  tbl = document.getElementById("area"); 
  if(!generateBlock()){ 
    alert("Game over!"); 
    status = 2; 
    return; 
  } 
  paint(); 
  timer = setInterval(moveDown,1000); 
} 
document.onkeydown=keyControl;

프로그램 프로세스

1) 사용자가 시작->활성 그래픽을 구성하고 타이머를 설정합니다.

//当前活动的方块, 它可以左右下移动, 变型。当它触底后, 将会更新area; 
var activeBlock; 
//生产方块形状, 有7种基本形状。 
function generateBlock(){ 
  activeBlock = null; 
  activeBlock = new Array(4); 
  //随机产生0-6数组，代表7种形态。
  var t = (Math.floor(Math.random()*20)+1)%7; 
  switch(t){ 
    case 0:{ 
      activeBlock[0] = {x:0, y:4}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:0, y:5}; 
      activeBlock[3] = {x:1, y:5}; 

      break; 
    } 
    //省略部分代码..............................
    case 6:{ 
      activeBlock[0] = {x:0, y:5}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:1, y:5}; 
      activeBlock[3] = {x:1, y:6}; 
      break; 
    } 
  } 
  //检查刚生产的四个小方格是否可以放在初始化的位置. 
  for(var i=0; i<4; i++){ 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y)){ 
        return false; 
      } 
    } 
  return true; 
}

2) 하향 이동을 할 때마다 바닥에 닿았는지 확인합니다. 바닥에 닿았다면 행을 제거해 보세요.

//消行 
function deleteLine(){ 
  var lines = 0; 
  for(var i=0; i<18; i++){ 
    var j=0; 
    for(; j=0; k--){ 
        area[k+1] = area[k]; 
      } 
    } 
    area[0] = generateBlankLine(); 
    } 
  } 
  return lines; 
}

3) 완료 후 활성 그래픽을 구성하고 타이머를 설정합니다.

최적화 예정

1) 다양한 모양의 블록 색상을 설정합니다.

아이디어: 블록 생성 기능에서 activeBlockColor 색상을 설정하세요. 7개의 서로 다른 모양의 블록은 서로 다른 색상을 갖습니다. (generateBlock 메서드를 수정하는 것 외에도 Paintarea 메서드도 수정해야 합니다. 그렇지 않았기 때문입니다.) 처음부터 잘 생각하여 행을 제거합니다. 마지막으로 색상을 통일하면서 사각형을 다시 그리므로 테이블의 n 행을 제거한 다음 상단에 n 행을 추가하여 사각형의 무결성을 보장할 수 있습니다.

2) 현재 블록이 떨어지면 다음 블록을 미리 확인할 수 있습니다.

아이디어: generateBlock 메서드를 두 부분으로 분할합니다. 한 부분은 다음 블록을 무작위로 시도하는 데 사용되고 다른 부분은 그려질 현재 블록을 캐시하는 데 사용됩니다. 현재 블록이 바닥에 닿아 고정되면 다음 블록이 그려지기 시작하고, 새로운 블록이 무작위로 다시 생성됩니다. 자꾸.

위 내용은 이 글에서 공유한 모든 내용입니다.

【관련 추천 튜토리얼】

1. JavaScript 동영상 튜토리얼
2. JavaScript 온라인 매뉴얼
3. 부트스트랩 튜토리얼