Lecaw

Учимся создавать Web-сайты

Разработка уникальной игры-портфолио на CSS/JS

May 29, 2012
CSS
282hits

Портфолио необходимо для каждого дизайнера и разработчика, который хочет работать в интернете. Оно должно быть уникальным, насколько это возможно, разработать его можно при помощи HTML, CSS и JavaScript. В этой статье я покажу вам, как я создал 2-D веб-игру для своего портфолио.

ИГРА

 

 

 

Перед тем, как приступить к делу, давайте поговорим о самом портфолио.

Портфолио представляет собой прекрасный инструмент для веб-дизайнеров и разработчиков, чтобы показать свое мастерство. Как и любой проект, необходимо потратить некоторое время на его изучение, чтобы сформировать портфолио и иметь небольшое представление о том, что происходит в индустрии веб-дизайна, так что портфолио представляет вас как инновационного и вдохновляющего человека. Все это время, имейте в виду, что плыть по течению, не лучший способ выделиться из толпы.

Прежде чем мы углубимся в тайны моей веб-игры, разберем ещё одну деталь. Я использую JQuery, который сделал мою жизнь намного проще, ускоряя развитие и поддержание моего кода, он становится простым и понятным.

HTML

Давайте устроим краткий обзор основного кода HTML. Это немного долго, я знаю, но давайте пройдем шаг за шагом.

<div id="wrapper">
  <!-- Main Text -->
<hgroup id="myInfo">
<h1>DANIEL STERNLICHT</h1>
<h2>Web Designer, Front-End Developer</h2>
</hgroup> <!-- Start Cave -->
<div id="startCave" class="cave"></div>
<div id="startCaveHole" class="caveHole"></div> <!-- Main Road -->
<div id="mainRoad" class="road"></div>
<div id="leftFence"></div>
<div id="rightFence"></div>   <!-- Me -->
<div id="daniel"></div>   <!-- Stop Station 1 -->
<div id="aboutRoad" class="road side"></div>
<div id="aboutHouse" class="house">
<div class="door"></div>
<div class=”lightbox”>…</div>
</div>
<div id="aboutSign" class="sign">
<span>About Me</span>
</div>   <!-- Stop Station 2 -->
…   <!-- Stop Station 3 -->
…   <!-- View -->
<div id="rightTrees" class="trees"></div>
<div id="leftGrass" class="grass"></div>   <!-- Sea -->
<div id="endSea" class="sea"></div>
<div id="endBridge" class="bridge"></div>   <div id="boat" class="isMoored">
<div class="meSail"></div>
</div> </div>

HTML не очень сложен, и я мог бы использовать элемент canvas для этой игры, но я чувствовал себя более комфортно, используя простой HTML DOM элементов.

В принципе, у нас есть основная #wrapper div, в которой содержатся элементы игры, большинство из которых представлены в виде элементов div (я выбрал дивы, потому что ими легко манипулировать).

Вы можете увидеть, что находится в этой игре.

У нас есть дороги, деревья, заборы, вода, пещеры, дома и так далее.

Вернемся к нашему HTML. Вы найдете элемент для каждого из этих пунктов, с соответствующим классом и ID. Что приводит нас к CSS.

CSS

Прежде всего, обратите внимание, что я подготовил HTML по принципам объектно-ориентированного CSS, путем определения глобальных классов для стиля, а не с помощью идентификаторов. Например, я использовал класс .road для каждого элемента дороги. CSS для класса .road  будет выглядеть так:

.road {
   position: absolute;
   background: url(images/road.png) repeat;
}

А вот деревья:

.trees {
   position: absolute;
   background: url(images/tree.png) repeat 0 0;
}

Обратите внимание, что почти все элементы в точности размещены на нужных местах. Относительное размещение элементов для нас было бы невозможно, потому, что мы хотим, чтобы игра была настолько быстрой, насколько это возможно (в пределах, конечно - минимальной ширины, которую я задал в 640 пикселей). Мы можем написать общее правило позиционирования всех элементов DOM в игре:

#wrapper * {
   position: absolute;
}

Этот фрагмент будет обрабатывать все дочерние элементы внутри DIV #wrapper, и это освобождает нас от необходимости повторять код.

Еще одно слово о CSS. Анимации в игре сделаны на переходах и анимации CSS3, за исключением некоторых функций, таких как лайтбоксы и "телепортация" игрока. Есть две причины для этого.

Во-первых, одна из целей этого портфолио является демонстрация инноваций, а что может быть более инновационным, как использование силы CSS3?

Вторая причина заключается в производительности. При чтении очень интересной статьи Richard Bradshaw’s “Using CSS3 Transitions, Transforms and Animation,” Я сделал вывод: используйте CSS3, при любой возможности.

Прекрасным примером силы анимации CSS3 в моем портфолио, это модель движения воды. CSS выглядит следующим образом:

.sea {
   left: 0;
   width: 100%;
   height: 800px;
   background: url(images/sea.png) repeat 0 0;
   -webkit-animation: seamove 6s linear infinite;   /* Webkit support */
   -moz-animation: seamove 6s linear infinite;      /* Firefox support */
   animation: seamove 6s linear infinite;          /* Future browsers support */
}

А вот код её анимации:

/* Webkit support */
@-webkit-keyframes seamove {
   0% {
      background-position: 0 0;
   }
   100% {
      background-position: 65px 0;
   }
}
@-moz-keyframes seamove {…}   /* Firefox support */
@-keyframes seamove {…}       /* Future browsers support */

Повторяющееся изображение sea.png размером 65 пикселей в ширину, сделано так что бы возник эффект волн, мы должны перенести его на то же число пикселей. Поскольку фон повторяется, это дает нам тот эффект который мы хотим.

Еще один крутой пример CSS3 анимации  происходит, когда игрок заходит в лодку и плывет.

Если игрок вернется обратно на дорогу, вы заметите, что лодка начнет двигаться в «обратном» направлении и возвращается в исходное положение. Звучит сложно, но вы не знаете, как легко это сделать с переходами CSS3. Все, что я делал, было получено событиями с JavaScript, чтобы определить, находится ли там пользователь, если пользователь зашел на лодку, то мы добавляем класс .sail на лодке. В противном случае мы не можем предоставить этот класс. В то же время, мы добавим .show к классу #contact, который плавно раскрывает контактную форму в воде. CSS лодки выглядит следующим образом:

#boat {
   position: absolute;
   bottom: 500px;
   left: 50%;
   margin-left: -210px;
   width: 420px;
   height: 194px;
   background: url(images/boat.png) no-repeat center;
   -webkit-transition: all 5s linear 1.5s;
   -moz-transition: all 5s linear 1.5s;
   transition: all 5s linear 1.5s;
}

Когда мы добавляем класс  .sail к нему, все, что я делаю, это изменяю его с левой стороны.

#boat.sail {
   left: -20%;
}

То же самое касается класса #contact с .show. За исключением , непрозрачности:

#contact.show {
   opacity: 1;
}

CSS3 переходы делают остальную работу.

JavaScript

Так как мы имеем дело с 2-D игрой, для движка игры мы могли бы использовать JavaScript, возможно, на frameworks. Но только frameworks (за исключением JQuery, который я использую в качестве основы), как правило, хороши для старта, но они, вероятно, не будут соответствовать вашим потребностям в долгосрочной перспективе.

Хорошим примером является лайтбоксы, которые предоставляют информацию обо мне и активируются, когда пользователь входит в дом.

Такой функциональности обычно нету в игровых движках на JavaScript. Вы всегда можете улучшить существующие framework с вашим собственным кодом, но погружение в чужой код иногда занимает больше времени, чем писать свой ​​собственный. Более того, если переписать чужой код, он может стать проблемой, когда появятся новые версии.

После просмотра библиотек, таких как CraftyLimeJS и Impact, которые на самом деле это большие frameworks для игрового движка, я понял, что не было другого выбора, кроме как построить свой собственный движок, чтобы он соответствовал моим требованиям.

Давайте быстро рассмотрим основные методы, которые я использую в игре.

Для обработки событий со стрелками на клавиатуре, я использую следующий код:

$(window).unbind('keydown').bind('keydown', function(event) {
    switch (event.keyCode) {
        event.preventDefault();
        case 37: // Move Left
            me.moveX(me.leftPos - 5, 'left');
        break;
        case 39: // Move Right
            me.moveX(me.leftPos + 5, 'right');
        break;
        case 38: // Move Up
            me.moveY(me.topPos - 5, 'up');
        break;
        case 40: // Move Down
            me.moveY(me.topPos + 5, 'down');
        break;
    }
});

Как видите, код очень прост. Когда пользователь нажимает стрелку вверх или вниз, я вызываю функцию moveY(), и когда он нажимает правую или левую, я вызываю Movex().

moveX: function(x, dir) {
    var player = this.player;
    var canMove = this.canImove(x, null);
    if(canMove){
        this.leftPos = x;
        player.animate({'left': x + 'px'}, 10);
    }
    if(dir == 'left') {
        this.startMoving('left', 2);
    }
    else {
        this.startMoving('right', 3);
    }
}

Перед каждым шагом игрока, я выполняю проверку при помощи специального метода canImove() (например, "я могу двигаться?"), Чтобы определить, может ли персонаж перемещаться. В этом методе заключены границы экрана, позиции домов, ограничения на дороге и так далее, так же он получает две переменные, в том числе координаты х и у, где игрок не может пройти. 

Отметим, что в методе Movex(),  также происходит проверка направления, в котором движеться пользователь, и тогда я вызываю метод startMoving():

if(dir == 'left') {
   this.startMoving('left', 2);
}
else {
   this.startMoving('right', 3);
}

Вам, наверное, интересно, как ходьба влияет на характер выполнения. Вы могли заметить, что я с помощью CSS спрайты. Но как их активировать? На самом деле это довольно просто, с помощью JQuery, плагин называется Spritely. Этот удивительный плагин позволяет анимировать CSS спрайты, просто вызвав метод соответствующего элемента.

startMoving: function(dir, state) {
   player.addClass(dir);
   player.sprite({fps: 9, no_of_frames: 3}).spState(state);
}

Так как мы имеем дело с веб, я понял, что, создать точное передвижение игрока в соответствии с клавишами, не получится. Вы всегда должны думать о пользователе, это ваш клиент, у которого возможно нету времени, чтобы гулять в вашем мире. Именно поэтому я добавил возможность «телепортироваться» в заданную точку в игре - опять же, используя canImove() для проверки может ли игрок переместиться в заданную точку.

Далее у нас идут лайтбоксы. Напомним, как выглядит HTML для каждого дома:

<div id="aboutHouse" class="house">
<div class="door"></div>
<div class="lightbox">
<div class="inner about">
Lightbox content goes here…
</div>
</div>
</div>

Вы заметили класс .lightbox в доме div? Мы будем использовать его позже. Сейчас я сделал только определенную точку для нашего дома. Когда игрок получает по одной из этих точек, JavaScript активизирует lightboxInit, который также получает идентификатор соответствующего дома. Этот метод очень прост:

lightboxInit:  function(elm) {
// Get the relevant content
var content = $(elm).find('.lightbox').html(); // Create the lightbox
$('<div id="dark"></div>').appendTo('body').fadeIn();
$('<div id="lightbox">' + content + '<span id="closeLB">x</span></div>').insertAfter("#dark").delay(1000).fadeIn();
}

Во-первых, я получаю соответствующее содержание, находя div.lightbox из элемента дома. Затем, я создал еще один div, заполнил его с содержанием которое я уже хранится в переменной, и вставил его сразу после темного фона. Нажав на кнопку "х" будет вызван другой метод, который закрывает лайтбокс и удаляет его из DOM.

ИГРА

Дополнительная информация

RATTING:
(0 голосов)

Медиа