javascript 탱크 대전 신기록 만 들 기 (2)

2.   완벽 한 지도
    우리 지도 에는 공 터, 벽, 강철, 풀숲, 물, 본부 등 장애물 이 있다.우 리 는 이 모든 것 을 대상 으로 설계 할 수 있다.
2.1  장애물 개체 군 만 들 기
    대상 군 은 각종 지도 상의 대상 을 저장 합 니 다. 우 리 는 대상 의 속성 을 통 해 대상 이 통과 되 거나 공격 당 할 수 있 는 지 여 부 를 판단 합 니 다.  Barrier.js:  

 
  
  //        ，   TankObject 
  
  Barrier = 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 = { 
  
      Empty: "0" 
  
      , Wall: "1" 
  
      , Steel: "2" 
  
      , Tod: "3" 
  
      , River: "4" 
  
      , Podium: "5" 
  
  }; 
  
  //             
  
  var ArrayCss = ['empty', 'wall', 'steel', 'tod', 'river', 'podium']; 
  
  //      
  
  /*  */ 
  
  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 = 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 = []; //            
  
  } 
  
  //        
  
     Load: 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 divRow = UtilityClass.CreateE("div", "", "", mapBorder); 
  
              //               
  
              this._battleField[i] = []; 
  
              for (var j = 0; j < this._colCount; j++) { 
  
                  //       ，   ：0 
  
                  var v = (map[i] && map[i].charAt(j)) || 0; 
  
                  //   span  ，  span           
  
                  var spanCol = UtilityClass.CreateE("span", "", "", divRow); 
  
                  spanCol.className = ArrayCss[v]; 
  
                  //             ，        。 
  
                  var to = null; 
  
                  switch (v) { 
  
                      case EnumMapCellType.Empty: 
  
                          to = new EmptyB(); 
  
                          break; 
  
                      case EnumMapCellType.Wall: 
  
                          to = new WallB(); 
  
                          break; 
  
                      case EnumMapCellType.Steel: 
  
                          to = new SteelB(); 
  
                          break; 
  
                      case EnumMapCellType.Tod: 
  
                          to = new TodB(); 
  
                          break; 
  
                      case EnumMapCellType.River: 
  
                          to = new RiverB(); 
  
                          break; 
  
                      case EnumMapCellType.Podium: 
  
                          to = new PodiumB(); 
  
                          break; 
  
                      default: 
  
                          throw new Error("      ！"); 
  
                          break; 
  
                  } 
  
                  to.UI = spanCol; 
  
                  //   j  X，          ，x     
  
                  to.XPosition = j; 
  
                  to.YPosition = i; 
  
                  //                obj      ，occupier      
  
                  this._battleField[i][j] = { obj: to, occupier: null, lock: false }; 
  
              }   //end for 
  
          }   // end for 
  
          //   window     
  
          window.BattleField = this._battleField; 
  
      } 
  
 
 

    ok, 여기까지 우리 의 지 도 는 큰 성 과 를 거 두 었 습 니 다.이곳 의 주석 은 이미 매우 상세 하 다. 만약 여러분 이 이해 하지 못 하 는 부분 이 있다 면 스스로 원본 코드 를 다운로드 하여 디 버 깅 하면 이해 하기 쉽다.
지도 데 이 터 를 불 러 오고 모든 지 도 를 span 요소 로 html 문서 에 삽입 합 니 다.또한 지도의 대상 을 2 차원 배열 에 저장 합 니 다.앞으로 우리 가 충돌 검 사 를 할 때 대상 의 좌 표를 통 해 해당 하 는 배열 대상 을 직접 찾 을 수 있어 서 매우 편리 하 다.
원본 코드 첨부:http://xiazai.jb51.net/201411/yuanma/jstankedazhan(jb51.net).rar