Комментарий: В предыдущей статье я представил, как использовать HTML5 для реализации мобильного небольшого танка. В этой статье я приведу вас в танковую войну. Друзья, которые любят HTML5, не должны пропустить это.
<pre> tank.html </pre> <pre> <! Doctype html>
<html>
<голова>
<meta charset = "utf-8"/>
</head>
<body onkeydown = "getCommand ();">
<h1> hmtl5-classic tank War </h1>
<!-поле битвы танковой войны->
<Canvas> </canvas>
<pran> data </span>
<!-Представьте tankgames.js на эту страницу->
<script type = "text/javascript" src = "tank.js"> </script>
<script type = "text/javascript">
// Получить холст
var canvas1 = document.getElementbyId ("tankmap");
// Получить контекст рисования (вы можете понять его как кисть)
var cxt = canvas1.getContext ("2d");
// мой герой танка
//направление
var hero = new Hero (140,140,0, Herocolor);
// определить пустую пулю
var herobullet = null;
// Определите вражеский танк (сколько танков противника? Это единственное определение или положить в массив?)
var eginttanks = new Array ();
// Сначала умереть, а затем жить, установить 3, а затем мы сделаем переменные для количества вражеских танков.
// 0-> Верхний, 1-> справа, 2-> вниз 3-> слева
для (var i = 0; i <3; i ++) {
// Создать танк
var egintnk = new EngerTank ((i+1)*50,0,2, enmeycolor);
// Поместите этот бак в массив
EnegyTanks [i] = engeTNANK;
}
// звоните это один раз
flashtankmap ();
// написание специальной функции, чтобы регулярно обновлять нашу зону боя и включать элементы, чтобы появиться в зоне боя (собственные танки, вражеские танки, пули, бомбы,
//obstructions...)-> подумал
функция FlashTankMap () {
// Очистка холста
cxt.clearrect (0,0,400 300);
// мой танк
Drawtank (герой);
// Нарисуйте свою собственную пулю
// Как появляется эффект полета пули? [Ответ: Во -первых, мы должны обновлять зону боя каждый раз (SetInterval). Если координаты пули меняются при освежении, координаты пули дают людям ощущение, что пуля летит!]
DrawheroBullet ();
// вражеский танк
// нарисовать все вражеские танки
для (var i = 0; i <3; i ++) {
Drawtank (EngerTanks [i]);
}
}
// это функция, которая принимает пользовательские клавиши
функция getCommand () {
// Как я узнаю, какую клавишу нажимает игрок
// Инструкции: объект события -------> Функция обработчика событий ()
var code = event.keycode; // код ASCII для соответствующих букв-> давайте посмотрим на таблицу кода
Switch (код) {
Случай 87: // on
hero.moveup ();
перерыв;
Случай 68:
Hero.moveright ();
перерыв;
Случай 83:
hero.modyown ();
перерыв;
Случай 65:
hero.moveleft ();
перерыв;
Случай 74:
Hero.shotenemy ();
перерыв;
}
// запустить эту функцию flashtankmap ();
flashtankmap ();
// Перекрасить все вражеские танки. Вы можете написать код здесь (подумайте, давайте просто сделаем функцию, посвященную регулярному обновлению нашего холста [зона военных действий])
}
// Обновление зоны боя каждые 100 миллисекунд
window.setInterval ("flashtankmap ()", 100);
</script>
</body>
</html> </pre>
Tank.js
<pre> </pre>
<pre> <pre> // Для удобства программирования мы определяем два цветовых массива
var herocolor = new Array ("#ba9658", "#fef26e");
var enmeycolor = new Array ("#00a2b5", "#00fefe");
// Расширение других вражеских танков здесь довольно хорошо.
// пули
Функциональная пуля (x, y, direct, speed) {
this.x = x;
this.y = y;
this.direct = direct;
this.speed = speed;
this.timer = null;
this.islive = true;
this.run = function run () {
// Когда показаны координаты этой пули, мы сначала определяем, достигла ли пуля достигнутой границы
if (this.x <= 0 || this.x> = 400 || this.y <= 0 || this.y> = 300) {
// Пули должны остановиться.
window.clearinterval (this.timer);
// пуля умерла
this.islive = false;
}еще{
// это можно использовать для изменения координат
Switch (this.direct) {
Случай 0:
this.y- = this.speed;
перерыв;
Случай 1:
this.x+= this.speed;
перерыв;
Случай 2:
this.y+= this.speed;
перерыв;
Случай 3:
this.x- = this.speed;
перерыв;
}
}
document.getElementById ("aa"). innerText = "bullet x ="+this.x+"bullet y ="+this.y;
}
}
// это класс танков
Функциональный бак (x, y, direct, color) {
this.x = x;
this.y = y;
this.speed = 1;
this.direct = direct;
// Танк требует двух цветов.
this.color = color;
// двигаться вверх
this.moveup = function () {
this.y- = this.speed;
this.direct = 0;
}
//Направо
this.moveright = function () {
this.x+= this.speed;
this.direct = 1;
}
// двигаться вниз
this.modyown = function () {
this.y+= this.speed;
this.direct = 2;
}
//Левый
this.moveleft = function () {
this.x- = this.speed;
this.direct = 3;
}
}
// определить класс героя
// x представляет горизонтальную координату резервуара, Y представляет вертикальную координату, прямое направление
Функция героя (x, y, direct, color) {
// Цель следующих двух предложений состоит в том, чтобы достичь влияния наследования посредством олицетворения объектов
this.tank = танк;
this.tank (x, y, direct, color);
// Добавить функцию, чтобы стрелять в вражеские танки.
this.shotenemy = function () {
// Создать пулю, позиция пули должна быть связана с героем и направлением героя ... !!!
//this.x - горизонтальная координата нынешнего героя. Здесь мы просто обработаем (уточнить)
Switch (this.direct) {
Случай 0:
herobullet = новая пуля (this.x+9, this.y, this.direct, 1);
перерыв;
Случай 1:
herobullet = новая пуля (this.x+30, this.y+9, this.direct, 1);
перерыв;
Случай 2:
herobullet = новая пуля (this.x+9, this.y+30, this.direct, 1);
перерыв;
Случай 3: // Правильно
herobullet = новая пуля (this.x, this.y+9, this.direct, 1);
перерыв;
}
// Вызывая нашу пулю, 50 - это вывод, полученный в результате нескольких тестов учителя.
var timer = window.setInterval ("herobullet.run ()", 50);
// назначить этот таймер этой пуле (объект JS является ссылкой!)
herobullet.timer = таймер;
}
}
// Определите класс EneryTank
Функция engeTank (x, y, direct, color) {
// наследует танк, выдавая себя за объект
this.tank = танк;
this.tank (x, y, direct, color);
}
// Нарисуйте свою собственную пулю и скажите еще одну вещь, вы также можете инкапсулировать функцию в класс героев
функция drawherobullet () {
// Здесь мы добавили предложение, но вам нужно знать, что добавление здесь требует, чтобы вы были уверены во всей программе
if (herobullet! = null && herobullet.islive) {
cxt.fillstyle = "#fef26e";
cxt.fillrect (herobullet.x, herobullet.y, 2,2);
}
}
// Нарисуйте танк
Функция Drawtank (танк) {
// рассмотрим направление
Switch (tank.direct) {
случай 0: // on
Случай 2: // вниз
// Нарисуйте свой собственный бак и используйте предыдущую технику рисования
// Установить цвет
cxt.fillstyle = tank.color [0];
// Сначала учитель Хан использует смерть --->, а затем вживую (лучше всего для начинающих) это лучше)
// сначала нарисуйте прямоугольник слева
cxt.fillrect (tank.x, tank.y, 5,30);
// Нарисуйте прямоугольник справа (пожалуйста, подумайте об этом в настоящее время -> Обязательно имейте эталонную точку)
cxt.fillRect (tank.x+15, tank.y, 5,30);
// Нарисуйте средний прямоугольник
cxt.fillRect (tank.x+6, tank.y+5,8,20);
// Нарисуйте крышку бака
cxt.fillstyle = tank.color [1];
cxt.arc (tank.x+10, tank.y+15,4,0,360, true);
cxt.fill ();
// Нарисуйте пушку (прямая линия)
cxt.strokestyle = tank.color [1];
// Установить ширину линии
cxt.linewidth = 1,5;
cxt.beginpath ();
cxt.moveto (tank.x+10, tank.y+15);
if (tank.direct == 0) {
cxt.lineto (tank.x+10, tank.y);
} else if (tank.direct == 2) {
cxt.lineto (tank.x+10, tank.y+30);
}
cxt.closepath ();
cxt.Stroke ();
перерыв;
Случай 1: // Право и влево
Случай 3:
// Нарисуйте свой собственный бак и используйте предыдущую технику рисования
// Установить цвет
cxt.fillstyle = tank.color [0];
// Сначала учитель Хан использует смерть --->, а затем вживую (лучше всего для начинающих) это лучше)
// сначала нарисуйте прямоугольник слева
cxt.FillRect (Tank.x, Tank.Y, 30,5);
// Нарисуйте прямоугольник справа (пожалуйста, подумайте об этом в настоящее время -> Обязательно имейте эталонную точку)
cxt.fillRect (tank.x, tank.y+15,30,5);
// Нарисуйте средний прямоугольник
cxt.fillRect (tank.x+5, tank.y+6,20,8);
// Нарисуйте крышку бака
cxt.fillstyle = tank.color [1];
cxt.arc (nack.x+15, tank.y+10,4,0,360, true);
cxt.fill ();
// Нарисуйте пушку (прямая линия)
cxt.strokestyle = tank.color [1];
// Установить ширину линии
cxt.linewidth = 1,5;
cxt.beginpath ();
cxt.moveto (tank.x+15, tank.y+10);
//Направо
if (tank.direct == 1) {
cxt.lineto (tank.x+30, tank.y+10);
} else if (tank.direct == 3) {// слева
cxt.lineto (tank.x, tank.y+10);
}
cxt.closepath ();
cxt.Stroke ();
перерыв;
}
}
</pre>
<pre> </pre>
</pre>