Java, UX, HTML, CSS, WEB-design

Разработка единственного в своем роде портфолио игр на основе CSS/JS

[ad_1]

  • Даниэль Стернлихт

  • 0 Комментарии

Разработка единственного в своем роде портфолио игр на основе CSS/JS

  • 11 минут чтения

  • Кодирование, CSS, JavaScript, HTML

Краткое резюме ↬

Портфолио является обязательным для любого дизайнера или разработчика, который хочет заявить о себе в Интернете. Он должен быть как можно более уникальным, а с небольшим количеством HTML, CSS и JavaScript у вас может быть единственное в своем роде портфолио, которое умело представляет вас потенциальным клиентам.

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

Портфолио Даниэля Штернлихта.
Портфолио двухмерных веб-игр Даниэля Штернлихта.

Прежде чем перейти к делу, давайте поговорим о портфелях.

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

  • Создаем интерактивную веб-викторину «Опрокинуть Трампа»
  • Чему веб-дизайнеры могут научиться у видеоигр
  • Электронный маркетинг для создателей мобильных приложений
  • Как создать игру SpriteKit в Swift 3

Еще после прыжка! Продолжить чтение ниже ↓

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

Теперь давайте запачкаем руки кодом.

HTML

Давайте разогреемся с кратким обзором очень простого HTML-кода. Я знаю, что это немного долго, но давайте пошагово.

<div id="wrapper">

    <hgroup id="myInfo">
        <h1>DANIEL STERNLICHT</h1>
        <h2>Web Designer, Front-End Developer</h2>
    </hgroup>

    <div id="startCave" class="cave"></div>
    <div id="startCaveHole" class="caveHole"></div>

    <div id="mainRoad" class="road"></div>
    <div id="leftFence"></div>
    <div id="rightFence"></div>

    <div id="daniel"></div>

    <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>

    …

    …

    <div id="rightTrees" class="trees"></div>
    <div id="leftGrass" class="grass"></div>

    <div id="endSea" class="sea"></div>
    <div id="endBridge" class="bridge"></div>

    <div id="boat" class="isMoored">
        <div class="meSail"></div>
    </div>

</div>

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

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

Взгляните на мою игру. Можете ли вы определить, что составляет вид игры?

Вид игры
Вид игры

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

Вернемся к нашему HTML. Вы найдете элемент для каждого из этих элементов с соответствующим классом и идентификатором. Что подводит нас к 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;
}

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

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

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

Вторая причина — производительность. Прочитав очень интересную статью Ричарда Брэдшоу «Использование переходов, преобразований и анимации CSS3», я пришел к ошеломляющему выводу: используйте 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 */

Море.png
Море PNG выделено.

повторяющийся 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 к нему, все, что я делаю, это меняю его left имущество.

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

То же самое касается #contact обертка с классом .show. Только здесь я играю с opacity имущество:

#contact.show {
   opacity: 1;
}

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

JavaScript

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

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

Пример лайтбокса в игре
Пример лайтбокса в игре. (большое изображение)

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

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

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

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

$(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() (например, «Могу ли я двигаться?»), чтобы определить, может ли персонаж перемещаться по полотну игры. Этот метод включает в себя границы экрана, позиции домов, ограничения дорог и так далее, и он получает две переменные, включая координаты x и y, куда я хочу, чтобы игрок переместился. В нашем примере, если бы я хотел, чтобы игрок двигался влево, я бы передал методу его текущую левую позицию плюс 5 пикселей. Если бы я хотел, чтобы они двигались вправо, я бы передал их текущую позицию минус 5 пикселей.

Если персонаж «может двигаться», я возвращаюсь true, а персонаж продолжает двигаться; иначе я вернусь falseи персонаж остается в своей текущей позиции.

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

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

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

Вернуться к нашему startMoving() метод:

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

Я просто добавляю класс направления к элементу игрока (который устанавливает соответствующее изображение спрайта), а затем вызываю метод sprite() метод из API Spritely.

Поскольку мы имеем дело с Интернетом, я решил, что возможности перемещаться с помощью стрелок на клавиатуре будет недостаточно. Вы всегда должны думать о пользователе, своем клиенте, у которого может не быть времени зависать в вашем мире. Именно поэтому я добавил и панель навигации, и возможность «телепортировать» персонажа в заданную точку в игре — опять же, с помощью 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 класс в house див? Мы будем использовать его позже. Что я в основном сделал, так это определил «горячую точку» для каждого дома. Когда игрок попадает в одну из этих горячих точек, JavaScript активирует lightboxInit(elm) метод, который также получает идентификатор соответствующего дома. Этот метод очень прост:

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 с именем dark, что дает мне темный фон. Наконец, я создаю еще один div, заполняю его содержимым (которое я уже сохранил в переменной) и вставляю сразу после темного фона. Нажатие «x» вызовет другой метод, который затемняет лайтбокс и удаляет его из DOM.

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

Заключение

Как видите, разработка двухмерной веб-игры — увлекательная и совсем не сложная задача. Но прежде чем бросаться разрабатывать собственное портфолио игр, учтите, что оно подходит не всем. Если ваши пользователи не имеют ни малейшего представления о том, что такое HTML5 или почему IE 5.5 не является «лучшим браузером всех времен», ваши усилия будут пустой тратой времени, и, возможно, такое портфолио оттолкнет их. Что плохо.

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

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Разработка единственного в своем роде портфолио игр на основе CSS/JS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Разработка единственного в своем роде портфолио игр на основе CSS/JS

Название: Разработка единственного в своем роде портфолио игр на основе CSS/JS . Краткое описание: [ad_1] ⭐ Даниэль . Дата публикации: 18.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»