Здравствуйте, Хабражители!
В этом топике я хочу рассказать о том, как я создал браузерную игру «DoodleJump» на HTML5 без использования каких либо то фреймворков. Для тех кто не знает, DoodleJump — это популярная мобильная игра где главный герой «doodler» бесконечно прыгает вверх по платформам, преодолевая различные препятствия, и собирая бонусы. Эта игра широко распространена почти на всех мобильных платформах, но приличной браузерной версии этой игры нет, поэтому я и решили написать браузерную версию этой игры, пусть даже управляемую клавишами а не гироскопом.

Итак, начнем. Для начало обозначим сцену, где и будет все происходить:
<div id="stage"></div>

и применяем к ней стили:
    #stage{
    position:absolute;
    top:0px; left:0px;
    background-color:#fff3f7;
    background-image:url(grid.gif);
    width:320px;
    height:480px;
    }

где мы заливаем сцену клетчатым фоном (grid.gif), и делаем разрешение 320 на 480 пикселей. В эту сцену мы помещаем ещё несколько div'ов: верхняя панель (tray), где будут писаться набранные очки и распологатся кнопка паузы(pause), основной персонаж игры (doodler) и пулька (bullet), которой будет стрелять наш персонаж. Для таких объектов как платформы и бонусы мы создаем div'ы — контейнеры в которые, с помощью ява-цикла, мы поместим отдельно по диву для каждого объекта.
    <div id="stage">
    <div id="header">
        <div id="tray"></div>
        <div id="tray-border"></div>
        <div id="pause" onClick="gotoPause();"></div>
    </div>
    <div id="doodler"></div>
    <div id="bullet"></div>
    <div id="footer"></div>
    <div id="obstacle"></div>
    <div id="platforms">
        <!--несколько дивов-->
    </div>
    <div id="objects">
        <!--несколько дивов-->
    </div>
    <div id="doodler"></div>
    <div id="ammunition"></div>
    <div id="bullet"></div>
    <div id="records"></div>
    </div>

Теперь надо применить стили к нашим объектам, залить их спрайтами, задать ширину и высоту объектам, а также сделать им абсолютное позиционирование, для того чтобы мы смогли размещать каждый объект не зависимо от других объектов на сцене.
Я подготовил несколько спрайтов и картинок для раскраски нашей игры:

Вот пример стилей к элементу doodler:
    #doodler{
    position:absolute;
    background:url(sprite.png);
    width:62px;
    height:59px;
    }

Зная координаты расположения элементов на спрайте, мы можем залить все объекты по образцу выше.
А вот стили к пружинками и платформам будут немного отличаться, так как они лежат в контейнере, и остальные параметры к ним будут задаваться из java-скрипта:
    #objects div{
    position:absolute;
    background:url(sprite.png);
    }

После того как мы создали все объекты на сцене и придал им стили, мы можем приступать к написанию java скрипта. Сначала для удобства написания кода игры, мы запихнем селекторы объектов в переменные:
    var d = document.getElementById('doodler');
    var tray = document.getElementById('tray');
    var header = document.getElementById('header');
    var ammun = document.getElementById('ammunition');
    // и другие...

Как я и говорил ранее, div'ы — контейнеры такие как: platforms и objects мы заполняем ява циклом:
    for(i=0;i'<numPlatform;i++){
    document.getElementById('platforms').innerHTML+='<div class="platform" id="p'+i+'"></div>';
    }

где numPlatform — это количество платформ в контейнере (максимальное количество платформ, умещаемых на сцене, в нашем случае их 16). Для удобства можно создать функцию для перемещения платформ:
    function setPlatform(n,x,y,t){
    p = document.getElementById('p'+n);
    p.style.top = y+"px";
    p.style.left = x+"px";
    if(t==-1){p.style.backgroundPosition = "100px 100px";}
    if(t>=0&&t<8){
       p.style.height=16+"px";
       p.style.backgroundPosition = "-399px -"+(16*t)+"px";
    }
    if(t==8){p.style.height=24+"px"; p.style.backgroundPosition = "-399px -128px";}
    if(t==9){p.style.height=16+"px"; p.style.backgroundPosition = "-399px -151px";}
    if(t==10){p.style.height=34+"px"; p.style.backgroundPosition = "-399px -168px";}
    }

Теперь можно легко переместить любую платформу на желаемое место на сцене, и изменять её тип:
setPlatform([номер платформы],[координаты платформы по иксу],[координаты по игрику],[тип платформы]);
setPlatform(9,50,100,0);

создадим еще несколько подобных функций:
    setBullet(x,y);//перемещает пульку
    setObstacle(x,y,t);//перемещает монстров и дырки
    setObject(n,x,y,t);//перемещает пружинки и бонусы
    doodle(x,y,t,a,alpha);//перемещает Дудлера.

Создадим несколько глобальных переменных и массивов, которые нам понадобятся в дальнейшем.
Вот некоторые из них:
    var life = true;//жив ли дудлер
    var stageSpeed = 0;//скорость движения сцены
    var gravitation = 0.08;гравитация
    var ySpeed = 5;//начальная скорость дудлера
    var numPlatform = 16;//количество платформ
    var numObjects = numPlatform;//количество объектов
    var xObject = new Array;//X объекта
    var yObject = new Array;//Y объекта
    var tObject = new Array;//тип объекта
    var yFooter = 1000;//обрыв бумаги (footer.png)
    var tAmmunition = 0;//начальная амуниция на дудлере
    var xPlatform = new Array;//X платформы
    var yPlatform = new Array;//Y платформы
    var tPlatform = new Array;//тип платформы
    var xDoodler = 136;//начальный X дудлера
    var yDoodler = 136;//начальный Y дудлера
    var tDoodler = 136;//начальное направление дудлера
    var record = 0;//текущее количество очков
    var xBullet;//X пульки
    var yBullet;//Y пульки
    var xSpeedBullet;//горизонтальная скорость пули
    var ySpeedBullet;//вертикальная скорость пули
    var pause = false;//пауза
    ...

Теперь рассмотрим основную часть ява-скрипта самой игры, бóльшая часть кода будет находится в функции frame(), и запускается 100 раз в секунду. Внутри этой функции дудлер будет постоянно проверятся на столкновение с монстрами и бонусами, а так же там будет находится цикл, внутри которого мы будим проверять дудлера на столкновение с каждой платформой по отдельности:
    function frame(){//функция фрейма запускаемая 100 раз в секунду
       ySpeed -= gravitation;//уменьшаем скорость дудлера
       yDoodler -= ySpeed;//перемещаем дудлера
       if(xDoodler+46>=xObstacle&&xDoodler+16<=xObstacle+65&&yDoodler+59>=yObstacle&&
           yDoodler+59<=yObstacle+60&&tObstacle != 0){//проверяем на столкновение с припядствием
          if(tObstacle != 6){//если это не дырка
             if(tAmmunition>=1){//и на дудлере есть амуниция
                tObstacle = 0;//то убираем монстра
             }else if(ySpeed<0){//в противном случае, если дудлер падает на монстра
                tObstacle = 0;//монстр исчезает
                ySpeed = 10;//дудлер отпрыгивает
             }else{//если на монстре нет амуниции
                tAmmunition = 8;//даем дудлеру амуницию звездочек
                stageSpeed = 7;//смещаем все элементы сцены вверх
                ySpeed = 0;//дудлера вниз
                life = false;//обозначаем что он мертв
             }
          }else{//если это дырка
             if(tAmmunition == 0){//и на дудлере нет амуниции
                ySpeed = 0;//останавливаем дудлера
                gravitation = 0;//останавливаем падение дудлера
                yDoodler -= (yDoodler - yObstacle)/6;//засасываем дудллера в дыру по X
                xDoodler -= (xDoodler - (xObstacle+10))/6;//засасываем дудллера в дыру по Y
                alphaDoodler -= 3;//уменьшаем прозрачность дудлера
                life = false;//убиваем дудлера
             }
          }
       }
       yObstacle -= stageSpeed;//в случае падения монстры сместятся вверх
       setObstacle(parseInt(xObstacle), parseInt(yObstacle+obstacleYPosition), tObstacle);//перемещаем монстра
       doodle(parseInt(xDoodler), parseInt(yDoodler), tDoodler, tAmmunition, alphaDoodler);//перемещаем дудлера
       ...
       for(i=0;i < numPlatform;i++){   
          yPlatform[i]-=stageSpeed;//в случае падения все блоки смещаются вверх
          if(xDoodler+46>=xPlatform[i]&&xDoodler+16<=xPlatform[i]+65&& 
              yDoodler+59>=yPlatform[i]&&yDoodler+59<=yPlatform[i]+16&&tPlatform[i]!=-1&&life&& 
              tAmmunition == 0||tAmmunition == 7){//если живой дудлер столкнулся с активной платформой
             if(tPlatform[i]==2){//если платформа белая
                if(ySpeed<0){//и дудлер падает на нею
                   ySpeed = 5;//дудлер отпрыгивает от платформы
                   tPlatform[i]=-1;//платформа исчезает
                }
             }else if(tPlatform[i]==9){//если это не белая а коричневая платформа
                if(ySpeed<0){ //и дудлер падает на неё
                   tPlatform[i]=10;//коричневая платформа ломается
                }
             }else{//если это не коричневая и не белая
                if(ySpeed<=0){//и дудлер падает на неё
                   ySpeed = 5;//дудлер отпрыгивает от этой платформы
                }
             }
          } 
          ...//проверяем на столкновение с пружинами и бонусами (см. далее)   
       } 
       if(tAmmunition>0&&tAmmunition<7&&ySpeed<2){ //если дудлер падает с амуницией
          gravitation = 0.08;
          ySpeed -= 2;
          tAmmunition=0;//убираем амуницию
       }
       if(yFooter > 434){//если обрыв бумаги не на сцене
          yFooter -= stageSpeed;//смещаем его
       }else{//как только он встал на нужное место
          death();//вызываеи меню с результатами
       }
       footer.style.top = yFooter+"px"; 
       if(xDoodler>296){lDoodler = xDoodler = -24;} //делаем сцену «безграничной»
       if(xDoodler<-24){lDoodler = xDoodler = 296;}
    }
    fr = setInterval("frame()", 10);//интервал запуска функции frame() (100раз в секунду)

Что бы обеспечить падение сломанных платформ пишем:
    if(tPlatform[i]==10){//если это сломанная платформа
       yPlatform[i]+=4;//смещаем ее вниз на 4 пикселя
    }

Все платформы которые уезжают за нижний край сцены должны появляется сверху, то есть если yPlatform[i] > 480 то yPlatform[i] = -30, но так как у нас есть коричневые платформы, которые могут падать вниз не в зависимости от других, нарушая порядок исчезновения — этот вариант приведет к произвольному расстоянию между платформ:

Поэтому все платформы которые вышли за область видимости мы ставим на 30 пикселей выше предыдущей скрываемой платформы:
    if(yPlatform[i] > 480){
       xPlatform[i] = parseInt(Math.random()*260);
       yPlatform[i] = yPlatform[lastPlatform]-30;
       lastPlatform = i;
       ...
    }

В зависимости от того, на какой бонус натыкается дудлер — выполняется одно из следующих условий: например если дудлер падает на пружинку:
    if(tObject[i] == 0&&ySpeed<0){ //если дудлер падает на пружинку
       ySpeed = 10;//его скорость становится равна 10 (начальная скорость обычного прыжка = 5)
       tObject[i] = 1;//и пружинка меняет свой тип на раскрытый
    }

Вот что происходит когда дудлер натыкается на другие бонусы:
    if(tObject[i] == 2){//шапка
       gravitation = 0.01;
       ySpeed = 10;
       tObject[i] = -1;//скрываем шапку
       tAmmunition = 1;
    }
    if(tObject[i] == 3){//ранец
       gravitation = 0.008;
       ySpeed = 15;
       tObject[i] = -1;
       tAmmunition = 5;
    }
    if(tObject[i] == 4){//сфера
       tObject[i] = -1;
       tAmmunition = 7;
       setTimeout('stopBonus()',5000);//запускает функцию отключения бонуса через 5 секунд
    }

Конечно это не все, осталось много всего необъясненного, но ведь мы рассматривали основную часть нашей работы. Думаю принцип понятен, далее нам оставалось сделать так чтобы сложность игры увеличивалась в зависимости от набранных очков:

далее мы добавили заставку (с возможностью пропуска), меню, рекорды, справку, меню паузы, звуковое сопровождение, и информацию о достижениях после падения дудлера:

При запуске игры, она обращается к серверу и получает список результатов, который доступен по кнопке «Рекорды». Если пользователь преодолевает минимальный рекорд, (расположенный в списе на 16-ой строчке), то игра спрашивает его никнэйм, далее в зависимости от набранных очков располагает его на определенной позиции, смещая меньшие рекорды вниз.