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

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

Сложность
CSS Игра портфолио

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

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

Прежде чем мы углубимся в разработку моей веб-игры, разберем ещё одну деталь. Я использую 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 код очень простой, я мог бы использовать элемент HTML canvas, но я предпочитаю использовать простой DOM.

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

Обратите внимание, что находится в самой этой игре.

portfolio game

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

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

CSS

Прежде всего, обратите внимание, что я подготовил HTML разметку по принципам объектно-ориентированного CSS, путем определения глобальных классов для стиля, а не с помощью идентификаторов. Например, я использовал класс .road для каждого элемента дороги. Стиль класса .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;
}

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

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

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

Прекрасным примером возможностей CSS3 анимации в моем портфолио, это модель движения воды:

.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 */
html портфолио

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

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

css портфолио

Обратите внимание когда игрок возвращается на дорогу, лодка начнет двигаться в обратном направлении и возвращается в исходное положение. Звучит сложно, но легко в реализации, благодаря CSS3 transition. Если пользователь заходит в лодку, то мы добавляем класс .sail на лодке, при помощи JS. Также добавляем присваиваем класс .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;
}

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

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

#contact.show {
   opacity: 1;
}

Все остальную работу за нас делают CSS3 transition.

JavaScript

Так как мы имеем дело с 2D игрой, для движка игры мы могли бы использовать JavaScript с дополнительными фреймворками.

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

создание портфолио html css

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

После просмотра различных библиотек, таких как Crafty, LimeJS и Impact, которые на самом являются игровыми движками,  у меня не оставалось другого выбора, кроме как построить свой собственный движок, чтобы он соответствовал моим требованиям.

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

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

$(window).unbind('keydown').bind('keydown', function(event) {
    switch (event.keyCode) {
        event.preventDefault();
        case 37: // Движение влево
            me.moveX(me.leftPos - 5, 'left');
        break;

        case 39: // Движение вправо
            me.moveX(me.leftPos + 5, 'right');
        break;

        case 38: // Движение вверх
            me.moveY(me.topPos - 5, 'up');
        break;

        case 40: // Движение вниз
            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 в контейнере дома? Мы будем использовать его позже. Сейчас я сделал только определенную точку для дома. Когда игрок получает по одной из этих точек, JavaScript активизирует lightboxInit, который также получает идентификатор соответствующего дома. Этот метод очень прост:

lightboxInit:  function(elm) {
var content = $(elm).find('.lightbox').html(); // создание лайтбокса
$('<div id="dark"></div>').appendTo('body').fadeIn();
$('<div id="lightbox">' + content + '<span id="closeLB">x</span></div>').insertAfter("#dark").delay(1000).fadeIn();
}

Перевод статьи Develop A One-Of-A-Kind CSS / JS-Based Game Portfolio

Тэги: transitioncanvaslightboxgame

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.