PS: Эта битва танка была переписыванием после куска исходного кода в Интернете и в автономном режиме. Нет ничего слишком сложно сама. В этом случае используется объектно-ориентированный JS, который может использоваться в качестве вступительного учебника для объектно-ориентированного JS.
1. Создайте основные объекты, чтобы реализовать простое движение танков
1.1 Как нарисовать холст на карте ?
Учитывая проблему совместимости браузера, мы используем DOM для рисования и обновления игровых объектов. Как мы храним наши карты? Мы должны сохранить карту как двухмерный массив. В JS нет двумерного массива, но он может быть достигнут путем хранения массива в одномерном массиве.
1.2 Реализация кода
Мы разрабатываем холст как двумерный массив 13 * 13. Каждый элемент имеет соответствующую длину и ширину на карте. Мы можем рассматривать всю карту как таблицу, состоящую из ячеек размером 40 % * 40px, поэтому размер всего нашего холста составляет 520px * 520px;
Перед входом в код я дам вам диаграмму отношений с объектом:
1.2.1 Создание объекта верхнего уровня
HTML -код:
Кода -копия выглядит следующим образом:
<! Doctype html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<голова>
<Title> Tank War </title>
<link rel = styleSheet href = "css /main.css" />
<script src = "js/common.js"> </script>
<script src = "js/tankobject.js"> </script>
<script src = "js/mover.js"> </script>
<script src = "js/tank.js"> </script>
<script src = "js/frame.js"> </script>
<Скрипт>
window.onload = function () {
// вызвать объект загрузки игры
var Loader = new GameloAder ();
Loader.begin ();
}
</script>
</head>
<тело>
<!-Карта-контейнер->
<div id = "divmap">
</div>
<div id = "debuginfo">
</div>
</body>
</html>
Файл tankobject.js:
Кода -копия выглядит следующим образом:
// объект верхнего уровня
Tankobject = function () {
this.xposition = 0; // положение объекта в x на карте (13*13)
this.yposition = 0;
this.ui = null; // элемент DOM
}
// Изменить статический метод пользовательского интерфейса
Tankobject.prototype.updateui = function (battlfiled) {}
// Установить позицию, параметры следующие: 1*40, 6*40
Tankobject.prototype.setposition = function (LeftPosition, Topposition) {
// круглый в карте местоположение Math.round
this.xposition = math.round (LeftPosition / 40);
this.yposition = math.round (topposition / 40);
// Установить позицию в форме
if (this.ui! = null && this.ui.style! = null) {
this.ui.style.left = LeftPosition + "px";
this.ui.style.top = topposition + "px";
}
}
Здесь мы используем координаты X и Y, чтобы представить положение объекта на карте. Позже мы поместим каждый объект в карту в двухмерный массив, и в настоящее время мы сможем получить соответствующий объект через координаты x и y.
Затем используйте левую и верхнюю в CSS, чтобы управлять положением нашего объекта в форме. (Типичные объекты: танки, пули)
1.2.2 Создание публичного объекта
Нам также необходимо создать публичный объект, чтобы написать некоторые из наших обще используемых методов.
Common.js:
Кода -копия выглядит следующим образом:
// четыре направления движения танка
var EnumDirection = {
Вверх: "0",
Справа: "1",
Вниз: "2",
Слева: "3"
};
// Общий объект метода
var utilityClass = {
// Создать элемент DOM в ParentNode, укажите идентификатор и имя класса
Createe: function (type, id, classname, parentnode) {
var j = document.createElement (type);
if (id) {j.id = id};
if (classname) {j.classname = classname};
return parentnode.appendchild (j);
}, // Удалить элементы
RemoveE: function (obj, parentNode) {
parentnode.removechild (obj);
},
GetFunctionName: function (контекст, аргумент
для (var i в контексте) {
if (context [i] == argircallee) {return i};
}
возвращаться "";
}, // Связывать событие, вернуть метод фанк, это прошедший OBJ
BindFunction: function (obj, func) {
return function () {
func.apply (obj, аргументы);
};
}
};
1.2.3 Создание движущегося объекта
Mover.js
Кода -копия выглядит следующим образом:
// переместить объект, наследуя от объекта верхнего уровня
Mover = function () {
this.Direction = enumDirection.Up;
this.speed = 1;
}
Mover.Prototype = new TankObject ();
Mover.prototype.move = function () {
if (this.lock) {
возврат;/* деактивирован или все еще продолжается, операция недействительна*/
}
// Установите фоновое изображение бака в соответствии с направлением
this.ui.style.backgroundposition = "0 -" + this.direction * 40 + "px";
// Если направление вверх и вниз, вице -президент является сверху; Если направление вверх и влево, VAL --1
var vp = ["top", "Left"] [((this.direction == enumDirection.up) || (this.direction == enumDirection.down))? 0: 1];
var val = ((this.direction == enumdirection.up) || (this.direction == enumdirection.left))? -1: 1;
this.lock = true;/* lock*/
// Сохранить текущий объект в этом
var this = this;
// Записать начало начала позиции движения объекта
var startMovep = parseint (this.ui.style [vp]);
var xp = this.xposition, yp = this.yposition;
var sumove = setInterval (function () {
// начинать двигаться, 5px каждый раз
This.ui.style [vp] = parseint (this.ui.style [vp]) + 5 * val + "px";
// 40px на ячейку
if (math.abs ((parseint (this.ui.style [vp]) - startmovep))> = 40) {
ClearInterval (SUMOVE);
This.lock = false;/* разблокировать, позволяя снова стучать*/
// Записать положение объекта в таблице после его перемещения
This.xposition = math.round (this.ui.offsetleft / 40);
This.yposition = math.round (this.ui.offsettop / 40);
}
}, 80 - this.speed* 10);
}
Движущийся объект здесь наследует от нашего объекта верхнего уровня, и это представляет объект, который вызывает метод перемещения.
Функция объекта перемещения перемещается в соответствии с направлением и скоростью объекта. Каждый раз, когда вы перемещаете 5px, перемещайте в общей сложности 40 пикселей одной ячейки. Объект будет расширен позже, а обнаружение столкновений и другие функции будут добавлены.
1.2.4 Создание объекта танка
Файл tank.js:
Кода -копия выглядит следующим образом:
// Объект танка наследует от двигателя
Tank = function () {}
Tank.prototype = new Mover ();
// Создать танк игрока, наследуя с объекта танка
Selftank = function () {
this.ui = utilityclass.createe ("div", "", "itank", document.getElementById ("divMap"));
this.movingstate = false;
this.speed = 4;
}
Selftank.prototype = new Tank ();
// Установить положение бака
Selftank.prototype.updateui = function () {
this.ui.classname = "itank";
// Метод верхнего объекта, установите положение бака
this.SetPosition (this.xposition * 40, this.yposition * 40);
}
Теперь были созданы только танки игроков, и мы добавим к ним вражеские танки позже.
1.2.5 Создайте объект загрузки игры (ядро)
Кода -копия выглядит следующим образом:
// игра загружает объект основного объекта всей игры
GameLoader = function () {
this.mapcontainer = document.getElementByid ("divmap"); // Div, который хранит игровой карту
this._selftank = null; // Игрок Танк
this._gamelistener = null; // Основной идентификатор таймера петли в игре
}
Gameloader.prototype = {
Begin: function () {
// Инициализировать танк игрока
var selft = new Selftank ();
Selft.xposition = 4;
selft.yposition = 12;
selft.updateui ();
this._selftank = selft;
// Добавить ключевое событие
var warpper = utilityclass.bindfunction (this, this.onkeydown);
window.onkeydown = document.body.onkeydown = warpper;
warpper = utilityclass.bindfunction (this, this.onkeyup);
window.onkeyup = document.body.onkeyup = warpper;
// основная петля игры
warpper = utilityclass.bindfunction (this, this.run);
/*Ключ контроля мониторинга длинного таймера*/
this._gamelistener = setInterval (Warpper, 20);
}
// нажимайте бак игрока на клавиатуре, чтобы начать двигаться
, OnkeyDown: function (e) {
Switch ((window.event || e) .keycode) {
Случай 37:
это.
this._selftank.movingstate = true;
перерыв; //левый
Случай 38:
this._selftank.direction = enumdirection.up;
this._selftank.movingstate = true;
перерыв; //На
Случай 39:
this._selftank.direction = enumdirection.right;
this._selftank.movingstate = true;
перерыв; //Верно
Случай 40:
this._selftank.direction = enumdirection.down;
this._selftank.movingstate = true;
перерыв; //Следующий
}
}
// появляются кнопки и перестают двигаться
, OnKeyUp: function (e) {
Switch ((window.event || e) .keycode) {
Случай 37:
Случай 38:
Случай 39:
Случай 40:
this._selftank.movingstate = false;
перерыв;
}
}
/*Основная функция игры в игре, Сердце игры, Хаб*/
, Run: function () {
if (this._selftank.movingstate) {
this._selftank.move ();
}
}
};
Код объекта загрузки игры выглядит много, но на самом деле это только две вещи:
1. Создайте объект игрока.
2. Добавьте событие мониторинга ключа. Когда игрок нажимает мобильную клавишу, вызовите метод перемещения бака, чтобы перемещать бак.
Резюме: На данный момент наш танк может свободно двигаться, нажимая кнопки. Следующий шаг нам необходимо улучшить карту и обнаружение столкновений.