Здравствуйте, Хабражители!
В этом топике я хочу рассказать о том, как я создал браузерную игру «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-ой строчке), то игра спрашивает его никнэйм, далее в зависимости от набранных очков располагает его на определенной позиции, смещая меньшие рекорды вниз.
Простой рабочий пример: тут
