Движки

BOX 2D

vcard

http://box2d.org/

JigLibJS

vcard

http://jiglibjs.org/

PolyK

vcard

http://goo.gl/VEVQa

Cocos2d

vcard

http://goo.gl/nmkKX

Локализация

Handlebars

vcard

http://handlebarsjs.com/

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

L20N

vcard

http://l20n.org/

<link
  rel="localization"
  href="language/l20n.json">
<script
  src="scripts/l20n.js"></script>
{
  "locales": [
    "en",
    "ru"
  ],
  "default_locale": "ru",
  "resources": [
    "./{{locale}}/data.l20n"
  ]
}
<title "Renju">
<hello """
Hello, {{ $user.name }}.
Let's play!
""">
<h1
  data-l10n-id="title"
  ></h1>
<script
  type="application/l10n-data+json">
  {
    "user": {
      "name": "Jane",
      "gender": "feminine"
    }
  }
</script>
<h1 data-l10n-id="title"></h1>
<p data-l10n-id="hello"></p>
var node = document.querySelector(
  '[data-l10n-id="hello"]');
node.textContent = document.l10n.get(
  'title',
  {"user": {
    "name": "Jane",
    "gender": "feminine"
  }});

Адаптивность в играх

Feature Detection

vcard

modernizr.com

<html lang="ru-RU" class="js
  canvas
  canvastext
  webgl
  no-touch
  geolocation
  postmessage
  websqldatabase
  ...
  inlinesvg
  svgclippaths">

Как определять поддержку preserve-3d

(function getPerspective(){
  var element = document.createElement('p'),
      html = document.getElementsByTagName('HTML')[0],
      body = document.getElementsByTagName('BODY')[0],
      propertys = {
        'webkitTransformStyle':'-webkit-transform-style',
        'MozTransformStyle':'-moz-transform-style',
        'msTransformStyle':'-ms-transform-style',
        'transformStyle':'transform-style'
      };
  //…
})();
(function getPerspective(){
  //…
  body.insertBefore(element, null);
  for (var i in propertys) {
      if (element.style[i] !== undefined) {
          element.style[i] = "preserve-3d";
      }
  }
  //…
})();

(function getPerspective(){
  //…
  var st = window.getComputedStyle(element, null),
      transform = st.getPropertyValue("-webkit-transform-style") ||
                  st.getPropertyValue("-moz-transform-style") ||
                  st.getPropertyValue("-ms-transform-style") ||
                  st.getPropertyValue("transform-style");
  if(transform!=='preserve-3d'){html.className += ' no-preserve-3d ';}
  document.body.removeChild(element);
})();
define(['Modernizr', 'testAllProps'],
  function (Modernizr, testAllProps) {
  Modernizr.addTest(
    'preserve3d',
    testAllProps(
      'transformStyle',
      'preserve-3d'));
});

Graceful degradation Progressive enhancement 

.no-preserve-3d .rotation{
  display: none;
  }
.no-preserve-3d .zoom{
  top: 84px;
  }
.no-preserve-3d .church{
    background:
      url("../img/curch.png")
      50% 50% no-repeat;
    background-size: contain;
    }
.no-preserve-3d .church *{
  display: none;
  }

Cобытия мыши и мобильные устройства

FT Labs FastClick

vcard

http://goo.gl/SPOlX

Как определить
есть ли проблемы с производительностью?

Chrome FPS counter

chrome://flags/

stats.js

vcard

goo.gl/hXoib

vcard

goo.gl/fIMYP

vcard

jsperf.com

Developer tools profiler

Developer tools timeline

Полезные ссылки

Spriter

vcard

http://brashmonkey.com/

Spine

vcard

http://esotericsoftware.com/

ShoeBox

vcard

http://goo.gl/VQhu8

TexturePacker

vcard

http://goo.gl/K7D4f

HTML5 Game Dev

vcard

http://html5gamedevs.com/

Поиграем?

vcard

Anton Nemtsev

http://frontender.info/

thesilentimp@gmail.com

@silentimp

skype: ravencry