주석 : 테트리스에는 7 개의 부분이 있으며 각 부분은 사각형의 다른 숫자와 위치를 차지하므로 구성 요소 클래스를 만들고 7 개의 부품을 저장할 배열을 만듭니다. 각 부분에는 구성 요소가 차지하는 사각형의 숫자와 위치를 저장하는 배열이 포함되어 있습니다. 다음은 자세한 소개입니다
이 게임 구현의 기본 원칙 :게임 영역은 제한된 크기 영역입니다. 이 게임의 게임 영역에는 21 × 25 사각형이 있으며 각 사각형 너비는 10 단위이며 높이는 6 단위입니다 (캔버스의 절대 단위는 고정되어 있지 않음).
해당 데이터와 동작을 포함하도록 Rusblock 클래스를 만들고 게임 영역에 표시된 사각형을 기록하기 위해 2 차원 배열 Astate [21] [25]를 만듭니다.
테트리스에는 7 개의 부분이 있으며 각 부분은 사각형의 다른 숫자와 위치를 차지하므로 구성 요소 클래스를 만들고 7 개의 부품을 저장할 배열을 만듭니다. 각 부분에는 구성 요소가 차지하는 사각형의 숫자와 위치를 저장하는 배열이 포함되어 있습니다. 떨어지는 부분이 끝나면 새로운 부분이 생성되고 부품의 표시된 사각형이 게임 영역의 배열에 할당됩니다.
게임 루프 기능에서는 떨어지는 부품이 인쇄되고 이미 고정 된 부품 및 떨어지는 부품이 인쇄됩니다.
기본 지식 :
HTML5 CSS JS
이 게임에는 세 가지 파일이 포함됩니다.
rusblock.html : 요소 설정
rusblock.css : 세트 스타일
rusblock.js : 스크립트 제어
1 단계 : 인터페이스 설정 및 재료 준비
rusblock.html
<! doctype html>
<html>
<헤드>
<title> rusblock </title>
<link rel = 스타일 시트 유형 = 텍스트/css href = rusblock.css>
<스크립트 유형 = 텍스트/JavaScript>
함수 shareGame () {
var url =? link = + document.url + & title = rusblock;
Window.showmodaldialog ([url]);
}
</스크립트>
</head>
<body onkeyup = action (이벤트)>
<Audio loop = loop id = background-audioplayer preload = auto>
<소스 src = 오디오/배경 .mp3 ″ type = audio/mp3 ″/>
</오디오>
<Audio ID = GameOver-AudioPlayer Preload = Auto>
<소스 src = audio/gameover.ogg type = audio/ogg>
</오디오>
<Audio ID = Score-AudioPlayer Preload = Auto>
<소스 src = 오디오/스코어 .mp3 ″ type = audio/mp3 ″/>
</오디오>
<div id = game-area>
<div id = button-area>
<h1 id = game-name> rusblock </h1>
<버튼 id = 버튼 게임-게임 시작 onclick = gamestart ()> 시작 </button>
<버튼 id = 버튼 게임 onclick = gameEnd ()> end </button>
<form id = 양식 게임 수준>
<선택 ID = 선택 게임 레벨>을 선택하십시오
<옵션 값 = 500 ″ selected = selected> Easy </옵션>
<옵션 값 = 300 ″> 정상 </옵션>
<옵션 값 = 200 ″> 하드 </옵션>
</선택>
</form>
<버튼 onclick = shareGame () id = button-game-share> 공유 Renren </button>
</div>
<canvas id = game-canvas> </canvas>
<div id = score-area>
<H2> 점수 </h2>
<p id = game-score> 0 </p>
</div>
</div>
<script type = text/javaScript src = rusblock.js> </script>
</body>
</html>
2 단계 : 스타일
Rosblock.css
몸 {
배경색 : 회색;
텍스트 정렬 : 센터;
Font-Family : 'Times New Roman';
배경 이미지 : url ();
}
h1#game-name {
배경색 : 흰색;
너비 : 100%;
글꼴 크기 : X-LARGE;
}
H2,#게임 스코어 {
글꼴 크기 : X-LARGE;
배경색 : 흰색;
}
#게임 영역 {
위치 : 절대;
왼쪽 : 10%;
너비 : 80%;
높이 : 99%;
}
캔버스#Game-Canvas {
배경색 : 흰색;
너비 : 80%;
높이 : 98%;
플로트 : 왼쪽;
}
#Button-Area,#score-area {
너비 : 10%;
높이 : 100%;
플로트 : 왼쪽;
}
#Button-Game-Game-Start,#Button-Game-End,#Button-Game-Share,#Select-Game-Gelevel {
너비 : 100%;
높이 : 10%;
글꼴 크기 : 더 큰;
국경 오른쪽 폭 : 3px;
배경색 : 흰색;
}
#선택 게임 레벨 {
너비 : 100%;
높이 : 100%;
글꼴 크기 : X-LARGE;
국경 색 : 회색;
}
3 단계 : JS 코드를 작성하십시오
rusblock.js
Rusblock 클래스에 포함 된 회원 구문 분석 :
데이터:
ncurrentcomid : 현재 드롭 구성 요소의 ID
Astate [21] [25] : 게임 영역 상태를 저장하는 배열
Currentcom : 현재 떨어지는 부분
Nextcom : 다음 부분
ptindex : 게임 영역에 비해 현재 떨어지는 부분의 인덱스
기능:
newNextcom () : 새로운 다음 구성 요소를 생성합니다
NextComtoCurrentCom () : 다음 구성 요소에서 현재 떨어지는 구성 요소로 데이터를 전송합니다.
Candown () : 현재 구성 요소가 여전히 떨어질 수 있는지 확인하십시오
Cannew () : 새 구성 요소를 생성 할 수 있는지 여부를 결정하십시오
왼쪽 () : 현재 구성 요소가 왼쪽으로 이동합니다
오른쪽 () : 현재 구성 요소가 오른쪽으로 이동합니다
회전 () : 현재 구성 요소가 시계 방향으로 회전합니다
acceleratet () : 현재 구성 요소가 아래쪽으로 가속됩니다
사라진 () : 선을 제거하십시오
CheckFail () : 게임이 실패하는지 여부를 결정하십시오
invalidaterect () : 현재 구성 요소의 영역을 새로 고치십시오
완료 : 데모를 다운로드하십시오