Top-office11.ru

IT и мир ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Простая игра на javascript

Создаём простую игру на Vanilla JS

  • Переводы, 4 октября 2018 в 11:52
  • Никита Прияцелюк

В этой статье мы создадим простую игру с помощью HTML5, CSS3 и чистого JavaScript. Вам не понадобятся глубокие знания программирования. Если вы знаете, для чего нужны HTML, CSS и JS, то этого более чем достаточно. На работу игры вы можете посмотреть здесь.

Структура файлов

Начнём с создания нужных папок и файлов:

Начальный шаблон, соединяющий CSS- и JS-файлы:

В игре будет 12 карточек. Каждая карта состоит из контейнера div с классом .memory-card , внутри которого находится два элемента img . Первая отвечает за лицо ( front-face ) карточки, а вторая — за рубашку ( back-face ).

Необходимые изображения можно скачать из репозитория проекта.

Обернём набор карточек в контейнер section . В итоге получаем:

Мы используем простой, но очень полезный сброс стилей, который будет применён ко всем элементам:

Свойство box-sizing: border-box учитывает значения внутренних отступов и границ элемента при подсчёте общей высоты и ширины, поэтому нам не нужно заниматься математикой.

Если применить к body свойство display: flex и margin: auto к контейнеру .memory-game , то он будет выровнен вертикально и горизонтально.

.memory-game также будет flex-контейнером. По умолчанию ширина элементов уменьшается, чтобы они помещались в контейнер. Если присвоить свойству flex-wrap значение wrap , элементы будут располагаться на нескольких строках в соответствии с их размерами:

Ширина и высота каждой карточки подсчитывается с помощью CSS-функции calc() . Создадим три ряда по четыре карточки, установив значения ширины и высоты равными 25% и 33.333% соответственно минус 10px от внешнего отступа.

LATOKEN, Москва, от 4000 до 5000 $

Чтобы разместить наследников .memory-card , добавим position: relative . Так мы сможем абсолютно расположить наследников относительно родительского элемента.

Свойство position: absolute , установленное для .front-face и .back-face , уберёт элементы с их исходных позиций и разместит поверх друг друга:

Поле из карточек должно выглядеть примерно так:

Добавим ещё эффект при клике. Псевдокласс :active будет срабатывать при каждом нажатии на элемент. Он устанавливает длительность анимации равной 0.2 с:

Переворачиваем карточки

Чтобы перевернуть карточку после нажатия, добавим класс flip . Для этого давайте выберем все элементы memory-card с помощью document.querySelectorAll() . Затем пройдёмся по ним в forEach -цикле и добавим обработчики событий. При каждом нажатии на карточку будет вызываться функция flipCard() . this отвечает за нажатую карточку. Функция получает доступ к списку классов элемента и активирует класс flip :

CSS класс flip переворачивает карточку на 180 градусов:

Чтобы создать 3D-эффект переворота, добавим свойство perspective в .memory-game . Это свойство отвечает за расстояние между объектом и пользователем в z-плоскости. Чем ниже значение, тем сильнее эффект. Установим значение 1000px для едва уловимого эффекта:

Добавим к элементам .memory-card свойство transform-style: preserve-3d , чтобы поместить их в 3D-пространство, созданное в родителе, вместо того, чтобы ограничивать их плоскостью z = 0 (transform-style):

Теперь мы можем применить transition к свойству transform , чтобы создать эффект движения:

Отлично, теперь карточки переворачиваются в 3D! Но почему мы не видим лицо карточки? На данный момент .front-face и .back-face наложены друг на друга из-за абсолютного позиционирования. Рубашкой каждого элемента является зеркальное отражение его лица. По умолчанию значение свойства backface-visibility равно visible , поэтому вот что мы видим при перевороте карточки:

Чтобы исправить это, применим свойство backface-visibility: hidden для .front-face и .back-face :

Если перезагрузить страницу и снова перевернуть карточку, она пропадёт!

Так как мы скрыли заднюю сторону обеих картинок, на обратной стороне ничего нет. Поэтому сейчас нам нужно перевернуть .front-face на 180 градусов:

Наконец, мы получили желаемый эффект переворота!

Ищем пару

Мы научились переворачивать карточки, теперь нужно разобраться с проверкой на совпадение.

После нажатия на первую карточку она ожидает переворота другой. Переменные hasFlippedCard и flippedCard будут отвечать за состояние переворота. Если ни одна карточка не перевёрнута, значение hasFlippedCard устанавливается равным true , а нажатой карточке присваивается flippedCard . Ещё давайте сменим метод toggle() на add() :

Теперь при нажатии на вторую карточку мы попадаем в else-блок нашего условия. Чтобы проверить, совпадают ли карточки, нужно их всех идентифицировать.

Всякий раз, когда нам нужно добавить дополнительную информацию к HTML-элементам, мы можем использовать data-* атрибуты, где вместо «*» может быть любое слово. Добавим каждой карточке атрибут data-framework :

Теперь мы можем проверить, совпадают ли карточки, с помощью свойства dataset . Поместим логику сравнения в метод checkForMatch() и снова присвоим переменной hasFlippedCard значение false . В случае совпадения будет вызван метод disableCards() и обработчики событий будут откреплены от обеих карточек, чтобы предотвратить их переворот. В противном случае метод unflipCards() перевернёт обе карточки с помощью 1500 мс тайм-аута, который удалит класс .flip :

Складываем всё воедино:

Более элегантный способ написать условие совпадения — тернарный оператор. Он состоит из трёх частей. Первая часть — это условие, вторая часть выполняется, если условие возвращает true , в противном случае выполняется третья часть:

Блокируем поле

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

Объявим переменную lockBoard . Когда игрок нажмёт на вторую карточку, lockBoard будет присвоено значение true , а условие if (lockBoard) return; предотвратит переворот других карточек до того, как эти две будут спрятаны или совпадут:

Нажатие на ту же карточку

У нас всё ещё есть сценарий, при котором после нажатия на одну карточку дважды условие совпадения будет выполнено и обработчик событий будет удалён.

Чтобы избежать этого, добавим проверку на то, равняется ли нажатая карточка переменной firstCard , и вёрнемся из функции, если это так:

Переменные firstCard и secondCard нужно обнулять после каждого раунда. Реализуем эту логику в новом методе resetBoard() . Поместим в него hasFlippedCard = false и lockBoard = false . Деструктурирующее присваивание [var1, var2] = [‘value1’, ‘value2’] из ES6 позволяет писать код меньших размеров:

Новый метод будет вызываться из disableCards() и unflipCards() :

Перемешивание

Наша игра выглядит довольно неплохо, но играть в неё не очень весело, если карточки всегда на одном месте. Пора это исправить.

Когда у контейнера есть свойство display: flex , его элементы упорядочиваются сначала по номеру группы, а потом по порядку в исходном коде. Каждая группа определяется свойством order , которое содержит положительное или отрицательное целое число. По умолчанию свойство order каждого flex-элемента имеет значение 0 . Если групп больше одной, элементы сначала упорядочиваются по возрастанию порядка группы.

В игре есть 12 карточек, поэтому мы пройдёмся по ним в цикле, сгенерируем случайное число от 0 до 12 и присвоим его свойству order :

Чтобы вызвать функцию shuffle() , сделаем её IIFE (Immediately Invoked Function Expression). Это значит, что она будет выполнена сразу после объявления. Скрипт должен иметь примерно такой вид:

10 крутых игр на JavaScript до 13кб кода

В этой веселой статье мы познакомимся с удивительным игровым челленджем JS13K. Это ежегодный конкурс по программированию, в котором супер талантливые разработчики JavaScript демонстрируют игры, которые они создали с помощью JavaScript и использовали всего 13 КБ кода или даже еще меньше.

Мы решили показать наши любимые игры с прошлогоднего челленджа. С наслаждением поиграйте в них на перерыве или используйте как источник вдохновения для продуктивной работы!

OnOff

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

Everyone’s sky

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

Underrun

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

Konnekt

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

Super Chrono Portal Maker

Этот платформер, представляющий собой оригинальную игру Super Mario, предлагает 30 уровней, в которых нужно бегать и прыгать. Каждый уровень вводит все больше игровой механики, делая игру супер увлекательной. Существует также конструктор уровней, создавайте свои уровни и делитесь с ними с друзьями.

Offline Paradise

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

Raven

Raven — игра-головоломка, в которой вам нужно починить камеры безопасности секретного объекта. Есть загадочные существа, за которыми вам нужно следить, иначе они убьют вас в темноте.

Systems Offline

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

Re-wire

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

Off The Line

Off-line — одна из тех игр, которые имеют очень простую концепцию, и в то же время заставляют хорошо подумать перед прохождением уровня. Бросьте вызов 20 этапам с 3 уровнями сложности!

1024 Moves

Это удивительная трехмерная головоломка, в которой вам предстоит переместить куб через сетку плиток и достичь финиша. Избегайте дыр, перемещайте различные объекты и попробуйте пройти все уровни менее чем за 1024 хода.

Spacecraft

Spacecraft — интересная игра, в которой вам нужно собрать как можно больше жетонов с планет Солнечной системы. Вы должны оставаться на трассе, уклоняться от препятствий и астероидов и эффективно тратить жетоны, чтобы пройти все уровни.

Разработка игр на JavaScript: реально и безболезненно

Почему JavaScript?

Масса людей думает, что все крутые игры (God Of War, Assassin’s Creed, Skyrim, добавь по вкусу) созданы на C++. Это отчасти так. В проекте принимают участие сотни специалистов из разных отраслей, в том числе и разработчики, юзающие другой язык – обычная распространенная практика.

Некоторые классные игры написаны на “непопулярных” языках программирования, и это нормально. Если ты работаешь с JavaScript, то не нужно после этой статьи бросаться изучать “плюсы”, оставайся с JavaScript.

Существуют Unity, Unreal Engine, CryEngine и прочие классные решения для создания игрушек, и если тебе удобно развлекаться с ними – пожалуйста. Поэтому нет никакой разницы, на чем ты будешь кодить, но в нашем случае речь пойдет о JS-фреймворках.

Основы

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

Не нужно забывать о творении команды Khronos Group. WebGL – это веб-версия спецификации OpenGL ES, позволяющая разработчикам общаться с видеокартой через браузер (поверь, лучше не знать, как это работает).

Таким образом, можно создавать 2D и 3D сцены на GPU (что эффективнее, чем на CPU). Супер! Но если взглянуть на код JavaScript, использующий эти технологии, тебе поплохеет.

Поэтому давай разбираться с фреймворками, оберегающими нас от canvas и абстрагирующими от WebGL.

2D Frameworks

PixiJS

Этот инструмент можно назвать 2D-рендером WebGL. Это означает, что данная библиотека включает в себя множество функций, предназначенных для эффективной отрисовки 2D-сцен и объектов. Так проще сосредоточиться на создании программного кода, а хардкорные “низкоуровневые” вещи оставить разработчикам PixiJS.

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

Если ты планируешь создать что-то большее, чем анимация, то поищи дополнительные библиотеки для других частей игровой разработки (физика, масштабирование, tilemaps и т. д.).

ExcaliburJS

Здесь у нас полноценный игровой фреймворк, написанный на Typescript. Полная система сцен и камер, спрайты и анимации, звуки, физика и т. д. – все, что пожелаешь. Многим очень нравится API, предоставляемый ExcaliburJS, т. к. с ним уютнее.

Это связано с тем, что создатели продукта из мира веб (некоторые являются веб-разработчиками, другие — DevOps), поэтому большинство шаблонов и подходов – это штуки, которые уже популярны в веб-разработке. Если тебе близка веб-разработка, попробуй этот инструмент.

ImpactJS

ImpactJS начал свой путь со звания “Первый фреймворк для веб-игр”. Большинство фреймворков, рассмотренных ранее, были просто экспериментами, а не коммерческим продуктом. Этот опенсорсный претендент распространяется бесплатно и поставляется с хорошим редактором уровней.

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

CreateJS

CreateJS – это набор модульных библиотек и HTML5-инструментов, работающих асинхронно или параллельно в зависимости от ситуации.

Инструмент предоставляет все, что нужно для создания игры с нуля, с помощью отдельного модуля языка JavaScript. Например, для рендеринга можно взять PixiJS, а для работы со звуковыми материалами SoundJS и т. д.

PhaserJS

И напоследок самый популярный – PhaserJS. Это мощный набор инструментов для создания веб и мобильных игр. Этот фреймворк имеет огромное и активное сообщество – каждую неделю эти ребята выкладывают много новых статей, демо и туториалов, основанных на PhaserJS. Это обеспечивает отличное подспорье для людей, делающих свои первые шаги в геймдеве и нуждающихся в наставлениях. А еще, начиная с 3-й версии, это один из самых производительных игровых фреймворков.

3D Frameworks

ThreeJS

ThreeJs – самая популярная 3D-библиотека. Она предлагает наборы функций для выполнения общих операций, которые должны происходить в 3D-сцене. Все мероприятия происходят на более высоком уровне, чем raw WebGL, и не надо заморачиваться с горой низкоуровневых действий.

BabylonJS

Этот фреймворк похож на предыдущий, но имеются различия:

  • API меняется каждые 3 месяца, что помогает при поиске старых решений в интернете;
  • активное и полезное сообщество;
  • продуктивные и отзывчивые разработчики (у Three.js самый старый баг на GitHub датируется 2013 годом, в Babylon.js отмечен два дня назад);
  • The playground – это отличный инструмент для быстрого “опробования” кода, объяснения проблемы и оказания помощи.

Литература

Как в любом уважающем себя мануале, далее идет подборочка книг по теме.

Кстати, у нас есть очень крутая статья по книгам для геймдэва – рекомендуем!

Мы подобрали для тебя литературу по базовым вещам. Когда определишься, какая ветка игровой разработки тебе больше нравится, будет легче подбирать книги JavaScript.

H Простейшая игра на JavaScript в черновиках Из песочницы

Доброго всем времени суток.

Занялся изучением JavaScript и решил применить его для браузерной игры, естественно несложной – «Камень, ножницы, бумага». Игру эту, я полагаю, знают все, принцип объяснять не буду.

Перейдем к делу , начал я с того, что написал страничку, на которой этот код будет запускаться:

Выглядит это следубщим образом:

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

Перейдем к самому коду игры:

Принцип следующий, задаем функцию, назовем ее «game». Сразу определим несколько переменных:

в конце дописал .toLowerCase(), чтобы любой способ ввода распознавался одинаково и принимался функцией, далее это важно.

Обратите внимание, выбор компьютера — computerChoice мы определяем рандомно, задаем границы выбора для рандома:

Теперь немного информации по сабжу, Math.Random() — функция, которая рандомно выбирает число от 0 до 1, таким образом мы можем смело разбивать этот интервал на 3 части: от 0 до 0,34; от 0,34 до 0,68; от 0,68 до 1.
Расставим выбор компьютера следующим образом, первый интервал — камень, второй — бумага, третий — ножницы. (тут на ваше усмотрение, кому какой порядок больше нравится, разницы нет, рандом — он и в Африке рандом)

Далее у меня были большие проблемы с выводом результата, дело все в том, что первично при изучении JS рассказывают о console.log(), но при использовании console.log(), запись будет вестись в лог-файл, а я хотел, чтобы результаты выводились на странице. Решил эту проблему при помощи document.write():

Таким образом выводим на страницу выбор игрока и выбор компьютера.

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

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

В этих условиях нам необходимо рассмотреть абсолютно все возможные исходы, то есть, что будет, если игрок выберет камень, а компьютер ножницы или бумагу. Проще всего с одинаковым выбором, коротко и ясно, если выбор игрока соответствует выбору компьютера if (choice1 === choice2), то выдаем следующее сообщение document.write(«Ничья!»);

А как же нам быть со случаями, когда игрок оставляет поле ввода пустым или пишет слово, не соответствующее тому, которое нам подходит для игры (камень, ножницы или бумага)? Воспользуемся еще несколькими условиями:

Сначала мы определяем результат для случая, когда слово не ввели, затем определяем результат для случая, когда введенный текст не соответсвует ни одному из предложенных вариантов, напомню, что отрицание обозначается как «!==».

На завершающем этапе выдаем результат игры на страницу:

Результат выглядит так:

Вероятно вы заметили, что здесь я использовал не document.Write, а HTMLElement.Write. Это связано с тем, что в данной строке при использовании document.Write мы получим «undefined» в конце строки с результатом на странице. С чем это связано, я, к сожалению, ответить не готов.

Всем спасибо за внимание!
Не уверен, что на хабре можно спокойно размещать ссылки на собственные сайты, поэтому, если кому-то будет интересен этот код в действии, пишите мне на почту: orange.fox@icloud.com

Под спойлер спрячу код игры целиком, не жадный, можно заимствовать, не обижусь, если автора укажете. (:

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

Читать еще:  Javascript split подстроки с пробелами
Ссылка на основную публикацию
Adblock
detector