2.지도를 개선하십시오
우리의지도에는 열린 공간, 벽, 강철, 잔디, 물, 본사 등과 같은 장애물이 있습니다. 우리는이 모든 것을 물체로 설계 할 수 있습니다.
2.1 장애물 객체 그룹 만들기
객체 그룹은 다양한 맵에 객체를 저장합니다. 우리는 객체의 속성을 사용하여 객체를 통과 할 수 있는지 또는 공격 할 수 있는지 확인합니다.
Barrier.js :
코드 사본은 다음과 같습니다.
// tankObject에서 상속 된 장애물 기본 클래스 객체
배리어 = function () {
this.defenval = 1; // 방어
this.canbeattacked = true; // 공격을받을 수 있습니까?
}
Barrier.prototype = New TankObject ();
// 벽
wallb = function () {}
wallb.prototype = new Barrier ();
// 빈 땅
emptyb = function () {
this.canacross = true; // 교차 할 수 있습니다
}
emptyb.prototype = new Barrier ();
// 강
Riverb = function () {
this.defenval = 0;
this.canbeattacked = false; // 객체의 구성원이 선호되고 부모 클래스에서 상속 된 것들이 덮어 씁니다.
}
Riverb.prototype = New Barrier ();
// 스틸
steelb = function () {
this.defenval = 3;
}
steelb.prototype = new Barrier ();
// 잔디 물체
todb = function () {
this.canbeattacked = false;
this.defenval = 0;
this.canacross = true;
}
todb.prototype = new Barrier ();
// 본사
podiumb = function () {
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 += ', 120033331011';
str += ', 0000444400001';
str += ', 3313300001011';
str += ', 3011331022011';
str += ', 3311031011011';
str += ', 0101011102010';
str += ', 0101011010010';
str += ', 010000000110';
str += ', 0100012101101';
str += ', 0010015100000';
// 스토리지 레벨 맵 0, 1, 2, 3 ... 각각 1-N입니다.
var top_maplevel = [str];
2.3지도를 그립니다
준비 작업이 완료되면 요리를 제공하고지도를 그리겠습니다. 위에서 언급 한 우리지도는 13 * 13 표입니다. 따라서 게임 로딩 객체에 두 가지 속성을 추가하고 초기 맵 방법을 추가합니다.
frame.js :
코드 사본은 다음과 같습니다.
// 게임은 전체 게임의 핵심 객체의 객체를로드합니다.
gameloader = function () {
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 차원 배열을 저장합니다
}
// 맵을로드하는 메소드
로드 : function () {
// 레벨에 따라 맵을 초기화합니다
var map = top_maplevel [this._level -1] .split ( ",");
var Mapborder = utilityClass.createe ( "div", "", "Mapborder", this._mapcontainer);
//지도 테이블에서 각 셀을 통과합니다
for (var i = 0; i <this._rowcount; i ++) {
// div를 만들고 각 행의지도 가이 div에 저장됩니다.
var didrow = utilityClass.createe ( "div", "", "", Mapborder);
// 1 차원 배열로 다른 배열을 만듭니다
this._battlefield [i] = [];
for (var j = 0; j <this._colcount; j ++) {
// 맵 데이터 읽기, 기본값 : 0
var v = (지도 [i] && map [i] .charat (j)) || 0;
// 스팬 요소 삽입, 스팬 요소는 맵 장치입니다.
var spancol = utilityClass.createe ( "span", "", ", didrow);
spancol.classname = arraycss [v];
// 충돌 감지를 쉽게하기 위해 맵 객체를 2 차원 배열에 넣습니다.
var to = null;
스위치 (v) {
CASE enumMAPCELLTYPE.EMPTY :
to = new emptyb ();
부서지다;
CASE ENUMMAPCELLTYPE.WALL :
to = new Wallb ();
부서지다;
CASE ENUMMAPCELLTYPE.STEEL :
to = New SteelB ();
부서지다;
Case enumMapCellType.tod :
to = new Todb ();
부서지다;
CASE ENUMMAPCELLTYPE.RIVER :
to = New Riverb ();
부서지다;
CASE ENUMMAPCELLTYPE.PODIIM :
to = 새로운 podiumb ();
부서지다;
기본:
새 오류를 던지십시오 ( "지도 번호는 경계를 가로 지릅니다!");
부서지다;
}
to.ui = Spancol;
// 내부 루프는 수평이고 x는 수평 축이기 때문에 여기서 j는 x입니다.
to.xposition = j;
to.yposition = i;
// 현재 맵 객체를 2 차원 배열 OBJ에 장애물 개체로 저장하고 직업 개체로 점유자를 저장합니다.
this._battlefield [i] [j] = {obj : to, coseer : null, lock : false};
} // 끝
} // 끝
// Window 글로벌 변수에 넣습니다
Window.battlefield = this._battlefield;
}
좋아, 우리지도는 여기에 완료되었습니다. 여기의 의견은 이미 매우 상세합니다. 여전히 이해가 안되는 경우 소스 코드를 다운로드하여 직접 디버깅하십시오. 이해하기 쉽습니다.
여기서 우리는 주로 맵 데이터를로드하고 각 맵을 HTML 문서에 스팬 요소로 삽입합니다. 지도의 객체를 2 차원 배열에 보관하십시오. 앞으로 충돌 감지를 할 때 객체의 좌표를 통해 해당 배열 객체를 직접 검색 할 수 있습니다.
첨부 된 소스 코드 : http://xiazai.vevb.com/201411/yuanma/jstankedazhan (vevb.com).rar