А как делать игры?

Из чего состоит игра?

  • 1. Предзагрузчик ресурсов
  • 2. Игровая среда
  • 3. Звук
  • 4. Движок
  • 5. Локализация

Предзагрузчик ресурсов

  • 1. JavaScript
  • 2. Картинки
  • 3. Звуки
  • 4. Видео

require.js

<script
  data-main="scripts/main"
  src="scripts/require.js">
</script>
requirejs.config({
    shim: {
        'PXLoaderImage': ['PXLoader'],
        'jquery-ui.min': ['jquery.min'],
        'renjuController': [
          'PXLoaderImage',
          'handlebars',
          'jquery-ui.min',
          'modernizr'
          ]}});
require(
['modernizr','PXLoaderImage','jquery-ui.min','handlebars'],
function(){
  console.log('Загрузи лося');
});
vcard

requirejs.org

PXLoader

Images, Sound, Video

var loader = new PxLoader();
loader.addImage("../image/url.png");
loader.addImage("../image/anotherurl.png");
loader.addProgressListener(progressCallback);
loader.addCompletionListener(completeCallback);
loader.start();
vcard

goo.gl/8w7y3

Трюки
создания среды

2.5D модели

<div class="mountain m50">
  <div class="m49">
    <div class="m48">
      <div class="m47">
      …
      </div>
    </div>
  </div>
</div>

.mountain div{
  transform-style: preserve-3d;
  transform: translateZ(3.75px);
  ...
  }
.m50{
  background-image:
    url('../img/mountine0050.png');
  }
.m49{
  background-image:
    url('../img/mountine0049.png');
  }

Низкополигональные модели

<div class="church">
  <div class="floor"></div>
  <div class="wall-1"></div>
  <div class="wall-2"></div>
  <div class="wall-3"></div>
  <div class="wall-4"></div>
  <div class="wall-5"></div>
  <div class="wall-6"></div>
  <div class="roof"></div>
</div>

.church{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  }
.church .wall-1{
  width: 250px;
  height: 863px;
  position: absolute;
  top: -863px;
  left: -125px;
  transform-origin: 50% 100% 0;
  transform: rotateX(-90deg) translateZ(217px);
  background:
    url('../img/wall-1.png') 50% 0 no-repeat;
  background-size: 250px auto;
  }
vcard

https://github.com/SilentImp/models

vcard

http://tridiv.com/

Комбинированные модели

Спрайты

.walk-right{
  overflow: hidden;
  width: 160px;
  height: 320px;
  animation: walk-right .75s steps(4) infinite;
  background-color:     tranparent;
  background-image:     url("../img/sprites_map.png");
  background-position:  -320px -960px;
  background-size:      960px 1280px;
  }

@keyframes walk-right {
  0% {
    background-position: -320px -960px;
    }
  100% {
    background-position: -960px -960px;
    }
  }

Живой фон

В чем подвох?

  • 1. Применить ко всем элементам position:static;
  • 2. Уменьшить количество элементов, к которым применены трансформации
  • 3. Применить z-index.

Я люблю тебя, FireFox, жирная ты панда!

IE 10 поддерживает только transform-style: flat;

Звук?

SoundManager 2

vcard

http://goo.gl/CKkmp

soundManager.setup({
  url: './script/swf/',
  onready: callbackFunction
});
var bgsound =
soundManager.createSound({
  url: 'bgsound.mp3',
  autoLoad: true,
  onload: function() {
    this.sound.play();
  }.bind(this)
});

howler.js

vcard

http://goo.gl/JDC5c

var sound = new Howl({
  urls: [
    'sound.mp3',
    'sound.ogg'
    ]}).play();

Трюки создания игровой логики

hover для контроля коллизий 

this.widget
  .find('.hell')
  .on(
    "hover",
    $.proxy(this.fail,this)
  );

hover для изменения лабиринта

<div class="path road piece-1">
  <div class="teleport teleport-1">
    <div class="path force piece-2"></div>
  </div>
</div>
<div class="path road piece-3"></div>
.teleport:hover>.teleport,
.teleport:hover>.path{
  display:block;
  }
.teleport>.teleport,
.teleport>.path{
  display:none;
  }

hover и бесконечные transition для cоздания триггеров

<div class="teleport teleport-2">
  <div class="path force piece-12"></div>
</div>
<div class="path road piece-5"></div>
<div class="path road piece-6 cracked"></div>
<div class="path road piece-7 cracked"></div>
<div class="path road piece-8 cracked"></div>
<div class="path road piece-9 cracked"></div>
<div class="path road piece-10"></div>
<div class="path road piece-11"></div>
.cracked{
  transition:
    transform 999999s linear,
    opacity 999999s ease-out;
  transform:
    translateZ(0) rotateX(0)
    rotateY(0) scale(1);
  opacity: 1;
  }
.teleport-2:hover~.path.cracked{
  transition:
    transform .6s ease-out,
    opacity .6s ease-out;
  transform:
    translateZ(-1000px) rotateX(40deg)
    rotateY(10deg) scale(.75);
  opacity: 0;
  }

animation для cоздания платформ

<div class="path
            road
            piece-20"></div>
<div class="path
            road
            horizontal-bridge-2piece
            piece-21"></div>
<div class="path
            road
            piece-22"></div>
.horizontal-bridge-2piece{
  transform: translateZ(1px);
  animation:
    horizontal-bridge-2piece
    2.5s ease-in-out
    infinite both;
  }
@keyframes horizontal-bridge-2piece {
  0%{margin:0 0 0 -1px;}
  7%{margin:0 0 0 -1px;}
  43%{margin:0 0 0 76px;}
  57%{margin:0 0 0 76px;}
  93%{margin:0 0 0 -1px;}
  100%{margin:0 0 0 -1px;}
}

Контролируем события с помощью pointer-event

  pointer-events:
  auto | none | visiblePainted |
  visibleFill | visibleStroke |
  visible | painted | fill |
  stroke | all | inherit