2. Улучшить карту
Наша карта имеет препятствия, такие как открытое пространство, стены, сталь, трава, вода, штаб -квартира и т. Д. Мы можем спроектировать все это как объекты.
2.1 Создание группы объектов препятствий
Группа объектов сохраняет объекты на различных картах. Мы используем свойства объекта, чтобы определить, можно ли пройти или атаковать объект.
Barrier.js:
Кода -копия выглядит следующим образом:
// Объект базового класса препятствий, унаследованный от танкового
Barrier = function () {
this.defenval = 1; // защита
this.canbeattacked = true; // можно ли атаковать
}
Barrier.prototype = new tankobject ();
// Стена
Wallb = function () {}
Wallb.prototype = new Barrier ();
// пустая земля
EMPEDB = function () {
this.canacross = true; // можно пересечь
}
EmptyB.Prototype = new Barrier ();
// Река
Riverb = function () {
this.defenval = 0;
this.canbeattacked = false; // члены объекта являются предпочтительными, и те, кто унаследован от родительского класса, будут перезаписаны.
}
Riverb.Prototype = новый барьер ();
// Сталь
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 Записать данные на карту.
Добавьте следующий код.
Кода -копия выглядит следующим образом:
// перечисление типов элементов карты
/*
0: пустая земля
1: стена
2: сталь
3: рощи
4: Река
5: штаб -квартира
*/
var enummapcelltype = {
Пусто: "0"
, Стена: "1"
, Сталь: "2"
, Тод: "3"
, Река: "4"
, Подиум: "5"
};
// соответствующее название стиля каждой местности
var arraycss = [«пусто», «стена», «сталь», «tod», «река», «подиум»];
// карта уровня
/*Уровень*/
var str = '0000000000000';
str += ', 0011100111010';
str += ', 1000010000200';
str += ', 12003333101011';
str += ', 00004444400001';
str += ', 331330000001011';
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; // Основной идентификатор таймера петли в игре
/*v2.0 недавно добавленные свойства*/
this._level = 1;
this._rowcount = 13;
this._colcount = 13;
this._battlefield = []; // хранить двухмерный массив объектов карты
}
// метод загрузки карты
Нагрузка: 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 Umidgeb ();
перерыв;
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.podium:
to = new Podiumb ();
перерыв;
по умолчанию:
бросить новую ошибку («номера карт пересекают границу!»);
перерыв;
}
to.ui = spancol;
// j Здесь x, потому что внутренняя петля является горизонтальной, а x - горизонтальная ось.
to.xposition = j;
to.yposition = i;
// Сохранить текущий объект MAP в двумерный массив OBJ в качестве объекта препятствия, а оккупантный-как занятый объект
this._battlefield [i] [j] = {obj: to, Emereer: null, lock: false};
} // конец для
} // конец для
// Поместите в Window Global переменные
window.battlefield = this._battlefield;
}
Хорошо, наша карта сделана здесь. Комментарии здесь уже очень подробно. Если вы все еще не понимаете, загрузите исходный код и отлаживайте его самостоятельно. Это будет легко понять.
Здесь мы в основном загружаем данные карты и вставляем каждую карту в качестве элемента SPAN в документ HTML. И хранить объекты карты в двухмерном массиве. В будущем, когда мы выполняем обнаружение столкновений, мы можем напрямую извлечь соответствующий объект массива через координаты объекта, что очень удобно.
Прилагаемый исходный код: http://xiazai.vevb.com/201411/yuanma/jstankedazhan(vevb.com).rar