테트리스 구조를 만들고 맵을 만들었으니 이제 테트리스 다운 동작을 만들어야 할 것같습니다.
이번엔 index.js에 action()이라는 함수를 추가해서 일정 시간마다 자연스럽게 내려가는 동작을 추가해보겠습니다.
여기서 일정시간마다 동작한다. 라는 부분에서 떠오르는 함수가 있으신가요? setInterval 또는 setTimeout, animationFrame등이 생각 날 것 같습니다. 저는 setInterval을 활용해서 처음에 정의한 gamespeed의 변수값마다 동작하도록 작성했습니다.
2. 일정시간마다 블럭이 떨어지는 효과 만들기
index.js - action()
window.onload = function(){
drawMap();
drawNextTetris(Ntype);
myFunction();
action(); //action 함수 추가
}
/**
* 동작 메소드
* interval 함수로 입력시간마다 동작
* (gameSpeed에 따라 떨어지는 속도가 변경)
*/
function action(){
var intervalID = setInterval(function(){
console.log("action!")
GX++;
drawTetris(GX, TYPE, TURN);
}, GAME_SPEED);
}
window.onload 맨 끝에 action함수를 추가하여 페이지가 로드되면 action함수가 실행되도록 처리하였습니다.
action 함수 내부를 보니 Interval함수에 의해 GAME_SPEED값마다 콘솔로그값을 출력 후 GX전역 변수값을 증가시킨 후에 drawTetris 함수를 호출하는 것을 볼 수 있습니다.
drawTetris함수는 현재 선택된 테트리스의 값을 특정 위치에 그려주는 함수 입니다.
특정 위치를 그려주므로 일정 시간마다 우리는 위에서 아래로 떨어지는 모습을 위해 GX변수값을 증가시켜주면 자연스럽게 밑으로 계속해서 그려줄 것입니다.
하지만 계속 그려주게되면 이전 모습이 남아있어 이러한 형태로 잔상이 있겠죠?
이제 잔상을 지워주는 함수를 만들겠습니다.
erase 함수
한줄씩 내리면서 특정위치를 지우기전에 현재 위치의 테트리스 블럭값을 확인하고 지우는 erase 함수를 만들어보겠습니다.
웹 개발을 해보겠다고 예전에 학원을 다니면서 강사님과 같이 만들어봤던, 테트리스 예제가 있어서 약간의 소스 정리 후 포스팅을 하면 좋을 것 같아 테트리스 만들기 예제를 시작합니다.
테트리스 만들기 예제들을 찾아보면 캔버스값으로 처리하는 예제들이 많던데, 아직 캔버스 사용이 쉽지는 않은터라 게임치고는 UI가 엄청 화려하게 변화는 없는 테트리스정도는 html의 간단한 요소들로 충분히 표현이 가능하고 jquery나 다른 화려한 플러그인 없이 순수 javascript만으로 로직을 구성해서 표현할 수 있는 테트리스를 선택하게 되었습니다.
크게 구분하자면 배열데이터를 조작하고 매번 배열의 데이터를 검사하여 table요소를 통해 UI를 표현하는 형태로 진행할 예정입니다.
1. 작성을 위해 페이지 구성 & 배열 데이터 만들기 맵 그리기
페이지별 구성도
이러한 형태로 페이지들을 구성할 예정입니다.
메인이될 index.html 페이지
css를 꾸며줄 index.css
동작처리를 위한 index.js
전체 맵데이터, 테트리스 모양데이터를 담아놓을 tetris_data.js 로 구성하여 소스를 작성하겠습니다.
구글차트는 단순하게 입력하는 데이터의 배열값이 바뀌면 알아서 바뀌어서 처음에 구현할때는 chart의 data부분값을 배열로 따로 처리하여 넣고 빼고를 하였는데, 추가되는 데이터가 애니메이션 효과처럼 추가되는걸 표현하고 싶었고, 구글 차트 중 animation파트를 확인하면서 관련 예제를 기준으로 테스트버전을 만들었습니다.
