Тестовая

Материал из Warcastle-wiki

(Различия между версиями)
Перейти к: навигация, поиск
(Новая страница: «<div> <h1 style="color: #000000; font-family: Tahoma; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: ...»)
 
(2 промежуточные версии не показаны)
Строка 1: Строка 1:
<div>
<div>
-
<h1 style="color: #000000; font-family: Tahoma; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">Своя игра с JavaScript и Canvas<span>&nbsp;</span><a title="Перейти в песочницу" href="http://habrahabr.ru/sandbox/">из песочницы</a></h1>
+
<h1 style="color: #000000; font-family: Tahoma; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">Своя игра с JavaScript и Canvas</h1>
-
<div style="color: #000000; font-family: Tahoma; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><a title="Вы не подписаны на этот хаб" href="http://habrahabr.ru/hub/javascript/">JavaScript</a><span title="Профильный хаб">*</span>,<span>&nbsp;</span><a title="Вы не подписаны на этот хаб" href="http://habrahabr.ru/hub/gdev/">Game Development</a><span title="Профильный хаб">*</span>,<span>&nbsp;</span><a title="Вы не подписаны на этот хаб" href="http://habrahabr.ru/hub/canvas/">Canvas</a><span title="Профильный хаб">*</span></div>
+
<br />
-
<div style="color: #000000; font-family: Tahoma; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;">Не так давно мне стало любопытно, насколько сносно современные браузеры поддерживают HTML5 и я не нашел лучшего<br /> способа, чем написать простейший 2D платформер. Помимо удовольствия от разработки игрушки и улучшения навыков в использовании JavaScript, в ходе<span>&nbsp;</span>развлечения<span>&nbsp;</span>кропотливой работы был накоплен определенный опыт и эмпирическим путем были найдены основные грабли, на многие из которых мне пришлось наступить. В этой статье я попробую кратко и с примерами резюмировать то, что вынес для себя из проделанной работы. Желающих создать свое высокопроизводительное JavaScript приложение, эффективно работающее с графикой, прошу под кат.<br /><a name="habracut"></a><br />
+
<div style="color: #000000; font-family: Tahoma; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;">Не так давно мне стало любопытно, насколько сносно современные браузеры поддерживают HTML5 и я не нашел лучшего<br /> способа, чем написать простейший 2D платформер. Помимо удовольствия от разработки игрушки и улучшения навыков в использовании JavaScript, в ходе<span>&nbsp;</span>развлечения<span>&nbsp;</span>кропотливой работы был накоплен определенный опыт и эмпирическим путем были найдены основные грабли, на многие из которых мне пришлось наступить. В этой статье я попробую кратко и с примерами резюмировать то, что вынес для себя из проделанной работы. Желающих создать свое высокопроизводительное JavaScript приложение, эффективно работающее с графикой, прошу под кат.<br /><br />
<h4>Общие замечания</h4>
<h4>Общие замечания</h4>
-
<br /> Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости &laquo;родного&raquo; кода. Между тем, даже простейшая игра &mdash; это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS &mdash; язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро<span>&nbsp;</span><a href="http://habrahabr.ru/post/151337/">принесет разочарование</a>. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.<br /><br />
+
<br /> Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости &laquo;родного&raquo; кода. Между тем, даже простейшая игра &mdash; это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS &mdash; язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро<span>&nbsp;</span> [http://habrahabr.ru/post/151337/ принесет разочарование]. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.<br /><br />
<h5>1. Совместимость</h5>
<h5>1. Совместимость</h5>
Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами &ndash; под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят<span>&nbsp;</span>фигу<span>&nbsp;</span>серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций<br /><br />
Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами &ndash; под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят<span>&nbsp;</span>фигу<span>&nbsp;</span>серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций<br /><br />
Строка 17: Строка 17:
<br /> Все бы хорошо, да вот беда &ndash; проблемы кроссбраузерной совместимости до конца не исчерпаны. Среди современных браузеров нет единого мнения насчет названий стандартных функций. Выход &ndash; либо вообще отказаться от их использования, либо делать дорогостоящие адаптеры. Например, я не смог отказать себе в использовании описателей свойств и это дало свои негативные последствия. О том, как их использовать кроссбраузерно, хорошо описано<span>&nbsp;</span><a href="http://habrahabr.ru/post/117803/">здесь</a>, и<span>&nbsp;</span><a href="http://habrahabr.ru/post/108295/">здесь</a>. А вот как их заставить работать быстро &mdash; осталось загадкой.<br /><br />
<br /> Все бы хорошо, да вот беда &ndash; проблемы кроссбраузерной совместимости до конца не исчерпаны. Среди современных браузеров нет единого мнения насчет названий стандартных функций. Выход &ndash; либо вообще отказаться от их использования, либо делать дорогостоящие адаптеры. Например, я не смог отказать себе в использовании описателей свойств и это дало свои негативные последствия. О том, как их использовать кроссбраузерно, хорошо описано<span>&nbsp;</span><a href="http://habrahabr.ru/post/117803/">здесь</a>, и<span>&nbsp;</span><a href="http://habrahabr.ru/post/108295/">здесь</a>. А вот как их заставить работать быстро &mdash; осталось загадкой.<br /><br />
<h5>2. Оптимизацию кода легко сломать</h5>
<h5>2. Оптимизацию кода легко сломать</h5>
-
Не так давно на Хабре проскакивала очень полезная статья про<span>&nbsp;</span><a href="http://habrahabr.ru/post/154537/">движок V8 для Chromium</a>. Самое главное, что я сумел почерпнуть для себя &ndash; это скрытые классы и оптимизация кода для работы с ними. Действительно, JS зачастую провоцирует менять структуру объекта после его конструирования. Не стоит этого делать, если цель &ndash; создать быстрый и легко поддерживаемый код. Как только я это осознал, работа над игрой пошла веселее, а код стал чище и быстрее.<br /><br />
+
Не так давно на Хабре проскакивала очень полезная статья про<span>&nbsp;</span><a href="http://habrahabr.ru/post/154537/">движок V8 для Chromium</a>. Самое главное, что я сумел почерпнуть для себя &ndash; это скрытые [[классы]] и оптимизация кода для работы с ними. Действительно, JS зачастую провоцирует менять структуру объекта после его конструирования. Не стоит этого делать, если цель &ndash; создать быстрый и легко поддерживаемый код. Как только я это осознал, работа над игрой пошла веселее, а код стал чище и быстрее.<br /><br />
<pre><code>function myObject() { };
<pre><code>function myObject() { };
var mo = new myObject();
var mo = new myObject();

Текущая версия на 20:56, 4 сентября 2014

Содержание

Своя игра с JavaScript и Canvas


Не так давно мне стало любопытно, насколько сносно современные браузеры поддерживают HTML5 и я не нашел лучшего
способа, чем написать простейший 2D платформер. Помимо удовольствия от разработки игрушки и улучшения навыков в использовании JavaScript, в ходе развлечения кропотливой работы был накоплен определенный опыт и эмпирическим путем были найдены основные грабли, на многие из которых мне пришлось наступить. В этой статье я попробую кратко и с примерами резюмировать то, что вынес для себя из проделанной работы. Желающих создать свое высокопроизводительное JavaScript приложение, эффективно работающее с графикой, прошу под кат.

Общие замечания


Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости «родного» кода. Между тем, даже простейшая игра — это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS — язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро  принесет разочарование. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.

1. Совместимость

Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами – под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят фигу серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций

<code><canvas id="gameArea">
  <span style="color:red">Your browser doesn't supported HTML5 Canvas</span></canvas>

<script type="text/javascript">
(function(){
if(typeof ({}.__defineGetter__) != "function" && typeof (Object.defineProperty) != "function")
  alert("Your browser doesn't supported latest JavaScript version");})()
</script></code>


Все бы хорошо, да вот беда – проблемы кроссбраузерной совместимости до конца не исчерпаны. Среди современных браузеров нет единого мнения насчет названий стандартных функций. Выход – либо вообще отказаться от их использования, либо делать дорогостоящие адаптеры. Например, я не смог отказать себе в использовании описателей свойств и это дало свои негативные последствия. О том, как их использовать кроссбраузерно, хорошо описано <a href="http://habrahabr.ru/post/117803/">здесь</a>, и <a href="http://habrahabr.ru/post/108295/">здесь</a>. А вот как их заставить работать быстро — осталось загадкой.

2. Оптимизацию кода легко сломать

Не так давно на Хабре проскакивала очень полезная статья про <a href="http://habrahabr.ru/post/154537/">движок V8 для Chromium</a>. Самое главное, что я сумел почерпнуть для себя – это скрытые классы и оптимизация кода для работы с ними. Действительно, JS зачастую провоцирует менять структуру объекта после его конструирования. Не стоит этого делать, если цель – создать быстрый и легко поддерживаемый код. Как только я это осознал, работа над игрой пошла веселее, а код стал чище и быстрее.

<code>function myObject() { };
var mo = new myObject();
mo.id = 12; //лучше так не делать//Аккуратнее надо быть и с переменными.var v;
v = 12; //плохо, лучше var v = 12;
v = “12”; //так не надо, для нового типа лучше использовать новую переменнуюvar v = 15; //я искренне верю, что так никто не поступает</code>

Так же нужно стремиться сокращать область видимости переменной до минимума – это увеличивает вероятность оптимизации кода.
Личные инструменты
Пространства имён
Варианты
Действия
Навигация
Инструменты
Категории
Ссылки