javascript (2)_javascript 기술로 탱크 전투 전체 기록 만들기

2. 지도를 개선하세요

우리 지도에는 열린 공간, 벽, 강철, 잔디, 물, 본부와 같은 장애물이 있습니다. 우리는 이 모든 것을 객체로 디자인할 수 있습니다.

2.1 장애물 개체 그룹 생성

개체 그룹은 개체의 속성을 사용하여 개체가 통과할 수 있는지 또는 공격할 수 있는지를 결정합니다.

Barrier.js:

코드 복사 코드는 다음과 같습니다.

// TankObject
에서 상속된 장애물 기본 클래스 객체 장벽 = 함수() {
This.DefenVal = 1; // 방어력
This.CanBeAttacked = true; // 공격 가능 여부
}
Barrier.prototype = new TankObject();
// 벽
WallB = 함수 () { }
WallB.prototype = new Barrier();
// 열린 공간
비어있음B = 함수 () {
This.CanAcross = true; // 통과 가능
}
EmptyB.prototype = new Barrier();
// 강
RiverB = 함수() {
This.DefenVal = 0;
This.CanBeAttacked = false; // 객체의 멤버를 먼저 가져오고 상위 클래스에서 상속된 멤버를 덮어씁니다.
}
RiverB.prototype = new Barrier();
// 강철
SteelB = 함수 () {
This.DefenVal = 3;
}
SteelB.prototype = new Barrier();
// 잔디 개체
TodB = 함수 () {
This.CanBeAttacked = false;
This.DefenVal = 0;
This.CanAcross = true;
}
TodB.prototype = 새로운 장벽();
//본사
PodiumB = 함수() {
This.DefenVal = 5;
}
PodiumB.prototype = new Barrier();

2.2 지도에 데이터가 기록됩니다.

Common.js에 다음 코드를 추가하세요.

코드 복사 코드는 다음과 같습니다.

//맵 요소 유형 열거
/*
0: 열린 공간
1: 벽
2: 강철
3: 덤불
4：강
5: 본사
*/
var EnumMapCellType = {
비어 있음: "0"
, 벽: "1"
, 강철: "2"
, 토드: "3"
, 강: "4"
, 연단: "5"
};
//각 지형에 해당하는 스타일 이름
var ArrayCss = ['빈', '벽', '강철', '토드', '강', '연단'];
// 레벨 맵
/*레벨*/
var str = '0000000000000';
str = ',0011100111010';
str = ',1000010000200';
str = ',1200333310101';
str = ',0000444400001';
str = ',3313300001011';
str = ',3011331022011';
str = ',3311031011011';
str = ',0101011102010';
str = ',0101011010010';
str = ',0100000000110';
str = ',0100012101101';
str = ',0010015100000';
//스토리지 레벨 맵 0,1,2,3...은 각각 1-n입니다...레벨
var Top_MapLevel = [str];

2.3 지도 그리기

이제 준비가 끝났으니, 음식을 서빙하고 지도를 그려봅시다. 앞서 언급했듯이 우리 맵은 13 * 13 테이블입니다. 그래서 게임 로딩 객체에 행과 열 속성을 추가하고 초기화 맵 메소드를 추가합니다.

Frame.js:

코드 복사 코드는 다음과 같습니다.

// 게임 로딩 객체 전체 게임의 핵심 객체
GameLoader = 함수 () {
This._mapContainer = document.getElementById("divMap"); // 게임 맵을 저장하는 div
This._selfTank = null; // 플레이어 탱크
This._gameListener = null; // 게임 메인 루프 타이머 ID
/*v2.0에 새로운 속성이 추가되었습니다*/
This._level = 1;
This._rowCount = 13;
This._colCount = 13;
This._battleField = []; // 지도 객체의 2차원 배열을 저장합니다
}
//지도 메소드 로드
로드: 함수() {
                // 레벨에 따라 지도 초기화
        var map = Top_MapLevel[this._level - 1].split(",");
        var mapBorder = UtilityClass.CreateE("div", "", "mapBorder", this._mapContainer);
// 맵 테이블의 각 셀을 탐색합니다
for (var i = 0; i                                  // div를 생성하고 각 행의 지도가 이 div에 저장됩니다.
            var divRow = UtilityClass.CreateE("div", "", "", mapBorder);
//1차원 배열에 또 다른 배열 생성
This._battleField[i] = [];
for (var j = 0; j // 지도 데이터 읽기, 기본값: 0
              var v = (map[i] && map[i].charAt(j)) || // 스팬 요소를 삽입합니다. 스팬 요소는 맵 단위입니다
              varspanCol = UtilityClass.CreateE("span", "", "", divRow);
                    spanCol.className = ArrayCss[v];
                             // 후속 충돌 감지를 용이하게 하기 위해 지도 객체를 2차원 배열에 넣습니다.
              var to = null;
스위치 (동사) {
사례 EnumMapCellType.Empty:
                              to = new 빈B();
휴식;
사례 EnumMapCellType.Wall:
                                to = new WallB();
휴식;
사례 EnumMapCellType.Steel:
                                 to = new SteelB();
                             휴식;
사례 EnumMapCellType.Tod:
                                to = new TodB();
                             휴식;
사례 EnumMapCellType.River:
                             to = new RiverB();
                             휴식;
사례 EnumMapCellType.Podium:
                              to = new PodiumB();
                             휴식;
~ ~                기본값:
throw new Error("지도 번호가 범위를 벗어났습니다!");
                             휴식;
                 }
                     to.UI =spanCol;
                        // 여기서 j는 X입니다. 내부 루프가 수평이므로 x는 가로좌표입니다.
                         to.XPosition = j;
                       to.YPosition = i;
                                         // 현재 지도 객체를 2차원 배열에 저장하고 obj는 장애물 객체이고 occupier는 점유 객체입니다
This._battleField[i][j] = { obj: to, occupier: null, lock: false };
                                          //종료
                                  // 종료
                                         // 창 전역 변수에 넣기
            window.BattleField = this._battleField;
}

좋습니다. 여기서 지도가 완성되었습니다. 여기에 있는 설명은 매우 자세합니다. 여전히 이해가 되지 않는 부분이 있으면 소스 코드를 다운로드하여 직접 디버그해 보세요.

여기서는 주로 지도 데이터를 로드하고 각 지도를 HTML 문서에 스팬 요소로 삽입합니다. 그리고 지도 객체를 2차원 배열에 저장합니다. 앞으로는 충돌 감지를 할 때 객체의 좌표를 통해 해당 배열 객체를 직접 얻을 수 있어 매우 편리합니다.

첨부된 소스코드는 http://xiazai.jb51.net/201411/yuanma/jstankedazhan(jb51.net).rar