https://www.wiki.war-castle.ru/index.php?action=history&feed=atom&title=%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%B0%D1%8FТестовая - История изменений2026-04-16T10:34:09ZИстория изменений этой страницы в викиMediaWiki 1.16.0https://www.wiki.war-castle.ru/index.php?title=%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%B0%D1%8F&diff=3158&oldid=prevWikiSysop в 20:56, 4 сентября 20142014-09-04T20:56:49Z<p></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Предыдущая</td>
<td colspan='2' style="background-color: white; color:black;">Версия 20:56, 4 сентября 2014</td>
</tr><tr><td colspan="2" class="diff-lineno">Строка 4:</td>
<td colspan="2" class="diff-lineno">Строка 4:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><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 /></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><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 /></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h4>Общие замечания</h4></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h4>Общие замечания</h4></div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><br /> Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости &laquo;родного&raquo; кода. Между тем, даже простейшая игра &mdash; это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS &mdash; язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро<span>&nbsp;</span> [http://habrahabr.ru/post/151337/<del class="diffchange diffchange-inline">|</del>принесет разочарование]. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.<br /><br /></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><br /> Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости &laquo;родного&raquo; кода. Между тем, даже простейшая игра &mdash; это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS &mdash; язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро<span>&nbsp;</span> [http://habrahabr.ru/post/151337/ принесет разочарование]. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.<br /><br /></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h5>1. Совместимость</h5></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h5>1. Совместимость</h5></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами &ndash; под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят<span>&nbsp;</span>фигу<span>&nbsp;</span>серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций<br /><br /></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами &ndash; под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят<span>&nbsp;</span>фигу<span>&nbsp;</span>серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций<br /><br /></div></td></tr>
</table>WikiSysophttps://www.wiki.war-castle.ru/index.php?title=%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%B0%D1%8F&diff=3157&oldid=prevWikiSysop в 20:50, 4 сентября 20142014-09-04T20:50:19Z<p></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Предыдущая</td>
<td colspan='2' style="background-color: white; color:black;">Версия 20:50, 4 сентября 2014</td>
</tr><tr><td colspan="2" class="diff-lineno">Строка 4:</td>
<td colspan="2" class="diff-lineno">Строка 4:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><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 /></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><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 /></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h4>Общие замечания</h4></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h4>Общие замечания</h4></div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><br /> Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости &laquo;родного&raquo; кода. Между тем, даже простейшая игра &mdash; это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS &mdash; язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро<span>&nbsp;</span>http://habrahabr.ru/post/151337/ принесет разочарование. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.<br /><br /></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><br /> Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости &laquo;родного&raquo; кода. Между тем, даже простейшая игра &mdash; это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS &mdash; язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро<span>&nbsp;</span> <ins class="diffchange diffchange-inline">[</ins>http://habrahabr.ru/post/151337/<ins class="diffchange diffchange-inline">|</ins>принесет разочарование<ins class="diffchange diffchange-inline">]</ins>. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.<br /><br /></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h5>1. Совместимость</h5></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h5>1. Совместимость</h5></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами &ndash; под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят<span>&nbsp;</span>фигу<span>&nbsp;</span>серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций<br /><br /></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами &ndash; под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят<span>&nbsp;</span>фигу<span>&nbsp;</span>серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций<br /><br /></div></td></tr>
</table>WikiSysophttps://www.wiki.war-castle.ru/index.php?title=%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%B0%D1%8F&diff=3156&oldid=prevWikiSysop в 20:49, 4 сентября 20142014-09-04T20:49:16Z<p></p>
<table style="background-color: white; color:black;">
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr valign='top'>
<td colspan='2' style="background-color: white; color:black;">← Предыдущая</td>
<td colspan='2' style="background-color: white; color:black;">Версия 20:49, 4 сентября 2014</td>
</tr><tr><td colspan="2" class="diff-lineno">Строка 1:</td>
<td colspan="2" class="diff-lineno">Строка 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><div></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><div></div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><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<del class="diffchange diffchange-inline"><span>&nbsp;</span><a title="Перейти в песочницу" href="http://habrahabr.ru/sandbox/">из песочницы</a></del></h1></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><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</h1></div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><<del class="diffchange diffchange-inline">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:</del>/<del class="diffchange diffchange-inline">/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</del>></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><<ins class="diffchange diffchange-inline">br </ins>/></div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><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 /<del class="diffchange diffchange-inline">><a name="habracut"></a</del>><br /></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><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 /></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h4>Общие замечания</h4></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h4>Общие замечания</h4></div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div><br /> Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости &laquo;родного&raquo; кода. Между тем, даже простейшая игра &mdash; это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS &mdash; язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро<span>&nbsp;</span><del class="diffchange diffchange-inline"><a href="</del>http://habrahabr.ru/post/151337/<del class="diffchange diffchange-inline">"></del>принесет разочарование<del class="diffchange diffchange-inline"></a></del>. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.<br /><br /></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div><br /> Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости &laquo;родного&raquo; кода. Между тем, даже простейшая игра &mdash; это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS &mdash; язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро<span>&nbsp;</span>http://habrahabr.ru/post/151337/ принесет разочарование. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.<br /><br /></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h5>1. Совместимость</h5></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h5>1. Совместимость</h5></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами &ndash; под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят<span>&nbsp;</span>фигу<span>&nbsp;</span>серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций<br /><br /></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами &ndash; под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят<span>&nbsp;</span>фигу<span>&nbsp;</span>серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций<br /><br /></div></td></tr>
<tr><td colspan="2" class="diff-lineno">Строка 17:</td>
<td colspan="2" class="diff-lineno">Строка 17:</td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><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 /></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><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 /></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h5>2. Оптимизацию кода легко сломать</h5></div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><h5>2. Оптимизацию кода легко сломать</h5></div></td></tr>
<tr><td class='diff-marker'>-</td><td style="background: #ffa; color:black; font-size: smaller;"><div>Не так давно на Хабре проскакивала очень полезная статья про<span>&nbsp;</span><a href="http://habrahabr.ru/post/154537/">движок V8 для Chromium</a>. Самое главное, что я сумел почерпнуть для себя &ndash; это скрытые классы и оптимизация кода для работы с ними. Действительно, JS зачастую провоцирует менять структуру объекта после его конструирования. Не стоит этого делать, если цель &ndash; создать быстрый и легко поддерживаемый код. Как только я это осознал, работа над игрой пошла веселее, а код стал чище и быстрее.<br /><br /></div></td><td class='diff-marker'>+</td><td style="background: #cfc; color:black; font-size: smaller;"><div>Не так давно на Хабре проскакивала очень полезная статья про<span>&nbsp;</span><a href="http://habrahabr.ru/post/154537/">движок V8 для Chromium</a>. Самое главное, что я сумел почерпнуть для себя &ndash; это скрытые <ins class="diffchange diffchange-inline">[[</ins>классы<ins class="diffchange diffchange-inline">]] </ins>и оптимизация кода для работы с ними. Действительно, JS зачастую провоцирует менять структуру объекта после его конструирования. Не стоит этого делать, если цель &ndash; создать быстрый и легко поддерживаемый код. Как только я это осознал, работа над игрой пошла веселее, а код стал чище и быстрее.<br /><br /></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><pre><code>function myObject() { };</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div><pre><code>function myObject() { };</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>var mo = new myObject();</div></td><td class='diff-marker'> </td><td style="background: #eee; color:black; font-size: smaller;"><div>var mo = new myObject();</div></td></tr>
</table>WikiSysophttps://www.wiki.war-castle.ru/index.php?title=%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%B0%D1%8F&diff=3155&oldid=prevWikiSysop: Новая страница: «<div> <h1 style="color: #000000; font-family: Tahoma; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: ...»2014-09-04T20:44:34Z<p>Новая страница: «<div> <h1 style="color: #000000; font-family: Tahoma; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: ...»</p>
<p><b>Новая страница</b></p><div><div><br />
<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><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;"><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 /><br />
<h4>Общие замечания</h4><br />
<br /> Код на JavaScript очень критичен к ресурсам платформы. Несмотря, что почти все современные движки перестали тупо интерпретировать JS код, скорость его выполнения по-прежнему очень сильно уступает скорости &laquo;родного&raquo; кода. Между тем, даже простейшая игра &mdash; это много кода, который должен успевать выполниться между отрисовками двух соседних кадров анимации. Кроме того, JS &mdash; язык весьма специфический и написание объемного кода на нем сопряжено с рядом трудностей. Все вместе может стать причиной того, что приложение на JS перестанет удовлетворять ожиданиям и быстро<span>&nbsp;</span><a href="http://habrahabr.ru/post/151337/">принесет разочарование</a>. Попробую немного систематизировать выводы, к которым я пришел путем экспериментов.<br /><br /><br />
<h5>1. Совместимость</h5><br />
Если мы решили использовать HTML5 и Canvas в частности, то пусть нас больше не беспокоят вопросы совместимости со старыми браузерами &ndash; под ними все равно ничего не заработает. Таким образом, можно смело использовать основные нововведения ECMAScript 5. С другой стороны, не стоит обижать презрением пользователей старого доброго ПО, наподобие IE6. Желательно их уведомить, о причинах, почему они видят<span>&nbsp;</span>фигу<span>&nbsp;</span>серый квадрат, вместо нашей замечательной анимации. Сделать это элементарно, достаточно диагностировать поддержку Canvas и используемых языковых конструкций<br /><br /><br />
<pre><code>&lt;canvas id="gameArea"&gt;<br />
&lt;span style="color:red"&gt;Your browser doesn't supported HTML5 Canvas&lt;/span&gt;&lt;/canvas&gt;<br />
<br />
&lt;script type="text/javascript"&gt;<br />
(function(){<br />
if(typeof ({}.__defineGetter__) != "function" &amp;&amp; typeof (Object.defineProperty) != "function")<br />
alert("Your browser doesn't supported latest JavaScript version");})()<br />
&lt;/script&gt;</code></pre><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 /><br />
<h5>2. Оптимизацию кода легко сломать</h5><br />
Не так давно на Хабре проскакивала очень полезная статья про<span>&nbsp;</span><a href="http://habrahabr.ru/post/154537/">движок V8 для Chromium</a>. Самое главное, что я сумел почерпнуть для себя &ndash; это скрытые классы и оптимизация кода для работы с ними. Действительно, JS зачастую провоцирует менять структуру объекта после его конструирования. Не стоит этого делать, если цель &ndash; создать быстрый и легко поддерживаемый код. Как только я это осознал, работа над игрой пошла веселее, а код стал чище и быстрее.<br /><br /><br />
<pre><code>function myObject() { };<br />
var mo = new myObject();<br />
mo.id = 12; //лучше так не делать//Аккуратнее надо быть и с переменными.var v;<br />
v = 12; //плохо, лучше var v = 12;<br />
v = &ldquo;12&rdquo;; //так не надо, для нового типа лучше использовать новую переменнуюvar v = 15; //я искренне верю, что так никто не поступает</code></pre><br />
<br /> Так же нужно стремиться сокращать область видимости переменной до минимума &ndash; это увеличивает вероятность оптимизации кода.</div><br />
</div></div>WikiSysop