Advertisement
  1. Web Design
  2. HTML/CSS
  3. HTML

20 лучших шаблонов игр HTML5 - 2017

Scroll to top
Read Time: 7 min

() translation by (you can also view the original English article)

За последние несколько лет в HTML5 создано множество отличных онлайн-решений. Которые доставляют нам огромное удовольствие! С исчезновением Flash, HTML5 быстро стал универсальной платформой для создания игр на основе браузера для настольных и мобильных устройств.

Если у вас есть концепция игры для развития или нужен способ узнать об ошибках HTML5, вот 20 лучших шаблонов игр HTML5 от 2017 года для потрясающего творчества:

1. Leaves Boy

Вы не сможете бросить играть, а друзья будут завидовать вашим высоким баллам.

Leaves Boy - это игра, сделанная для мобильных устройств.

Leaves BoyLeaves BoyLeaves Boy
«Leaves Boy - захватывающая игра одним касанием ...»

Особенности игры:

  • Высокий рейтинг Facebook и Twitter 
  • документация
  • HTML5 файлы
  • и многое другое

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

Используйте Leaves Boy в качестве основы для создания собственной игры в Construct 2.

2. Indiara and the Skull Gold

Indiara и Skull Gold - это мобильный платформер в духе Индианы Джонса.

Соберите восемь золотых черепов, но будьте начеку - в пещерах полно ловушек!

Indiara and the Skull GoldIndiara and the Skull GoldIndiara and the Skull Gold
«Встречайтесь и играйте с Indiara, девушкой, которая любит собирать древние артефакты».

Особенности игры:

  • настольная и мобильная версии
  • включает слои PSD и файлы AI  
  • 860x480 графика
  • и прочее

Шаблон легко reskin HTML5, редактируя и заменяя изображения.

Восемь уровней Indiara and the Skull Gold легко перестроить в Construct 2.

3. Dont Crash

Не разбвать, когда играете в Dont Crash!

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

Dont CrashDont CrashDont Crash
“Не разбей - единственное правило игры.”

Характеристики игры:

  • настольная и мобильная версии
  • контроль одним касанием
  • графика 1280x720  
  • и прочее

Смена облика игры HTML5 с помощью включенных AI-файлов или полная замена элементов в Construct 2.

Dont Crash это просто, быстро и захватывающе.

4. Game FlapCat Steampunk

Игра FlapCat Steampunk - симпатичная и простая игра HTML5, идеальная для мобильных устройств.

Сколько вы наберёте?

Game FlapCat SteampunkGame FlapCat SteampunkGame FlapCat Steampunk
«Помогите кошке FlapCat преодолеть сложные препятствия».

Характеристики:

  • PSD и AI файлы
  • размер 1280x720 
  • бесконечный уровень
  • и много чего ещё

Для игры в веб-браузере или мобильном телефоне, вам нужно всего лишь одно нажатие или щелчок мышью. Легко играть, трудно освоить.

Game FlapCat Steampunk легко сменить оболочку или перестроить в Construct 2.

5. Panda Love

Panda Love легко полюбить.

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

Panda LovePanda LovePanda Love
«Panda Love - приключенческий платформер с пиксельным рисунком».

Характеристики:

  • автосохранение в Webstorage
  • поддержка Ludei и рекламы
  • больше 20 уровней
  • и прочее

Эта игра HTML5 поддерживает все платформы и включает файл Construct 2 для полной настройки.

Вы полюбите вид и сенсорный контроль Panda Love.

6. Jumper Frog - HTML5 Game

Frogger - классическая аркадная игра, которая отлично адаптируется к мобильным устройствам.

Скачите и прыгайте на Jumper Frog - HTML5 Game для забавы.

Jumper Frog - HTML5 GameJumper Frog - HTML5 GameJumper Frog - HTML5 Game

«Наслаждайтесь цветной версией известной игры Frogger».

Характеристики:

  • файлы PSD и AI для настроек
  • полностью в HTML5 и CreateJS
  • полноценная настройка
  • и много другого

совместимо с CTL Arcade.

Jumper Frog - HTML5 Game переносит эту аркадную классику на любой экран.

7. Bubble Shooter - HTML5 Games

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

The Bubble Shooter - HTML5 Games - классическая головоломка, которую легко понять, но трудно освоить.

Bubble Shooter - HTML5 GamesBubble Shooter - HTML5 GamesBubble Shooter - HTML5 Games
«Цель игры - очистить все пузырьки уровня, избегая любого, пересекающего нижнюю линию».

Характеристики:

  • файлы PSD и AI для настроек
  • разработка в HTML5 и CreateJS
  • полная настройка
  • и прочее

Если вам эта игра HTML5 нравится, обязательно возьмите 50 Levels Pack.

Bubble Shooter - HTML5 Games совместима с CTL Arcade.

8. HTML5 Tetris

Вряд ли есть что-то более увлекательное, чем Тетрис, и с бесконечными уровнями HTML5 Tetris, вы буквально не сможете оторваться.

HTML5 TetrisHTML5 TetrisHTML5 Tetris
“Работает во всех HTML5 браузерах.”

Характеристики:

  • персональные настройки
  • сенсорная поддержка
  • семь тем
  • и прочее

Настраивайте виды и звуки, но, прежде всего, получайте удовольствие от HTML5 Tetris.

9. Katana Fruits - HTML5 Game

Если вы знакомы с Fruit Ninja, то узнаете Katana Fruits - HTML5 Game.

Katana Fruits - HTML5 GameKatana Fruits - HTML5 GameKatana Fruits - HTML5 Game
«Цель в том, чтобы разрезать все плоды, которые появляются на экране, избегая бомб».

Характеристики:

  • файлы PSD и AI для замены
  • разработка в HTML5 и CreateJS
  • продвижение с помощью социальных кнопок
  • полная настройка
  • и прочее

Эта HTML5 игра совместима с CTL Arcade WordPress и полностью настраивается.

Наточи свой катана, время рубить фрукты в Katana Fruits - HTML5 Game.

10. The Sorcerer - HTML5 Puzzle Game

В момент загрузки экрана вы уже знаете, что делать. Вдохновленный Zuma, The Sorcerer - HTML5 Puzzle Game - настоящий хит.

The Sorcerer - HTML5 Puzzle GameThe Sorcerer - HTML5 Puzzle GameThe Sorcerer - HTML5 Puzzle Game
«The Sorcerer был награжден как лучшая игра-головоломка в конкурсе HTML5 Most Wanted»,

Характеристики:

  • разработка в HTML5 и CreateJS
  • исходный код
  • полная настройка
  • и прочее

Настольное и мобильное разрешение 960x540 полностью оптимизировано.

The Sorcerer - HTML5 Puzzle Game трудно отложить, так что берите сразу extra levels.

11. Rearrange Letters - HTML5 Game

Вам дана подсказка и беспорядочная куча букв. Пользуясь ключом, переставьте буквы на время, пока не получите правильное слово.

Так работает Rearrange Letters - HTML5 Game.

Rearrange Letters - HTML5 GameRearrange Letters - HTML5 GameRearrange Letters - HTML5 Game
“Rearrange Letters это игра HTML5 где надо собрать по подсказке правильное слово из хаоса букв.”

Характеристики:

  • настройки текста, режима игры и таймера
  • показ счёта в социальных сетях
  • контроль мышкой и касанием
  • разрешение 1024x768 
  • и прочее

С помощью настроек CreateJS, вы можете как угодно переиначивать игру Rearrange Letters - HTML5 Game.

12. Word Search Game

Если вы любите поиск слов, вам нужна эта игра HTML5: Word Search Game.

Word Search GameWord Search GameWord Search Game
«Очень затягивает».

Характеристики:

  • управление параметрами игры в админ интерфейсе
  • работает на всём, от iPad до IE6
  • поддержка Unicode - использование любых символов
  • и прочее

лёгкая и простая в установке Word Search Game  - отличная находка.

13. Coloring Book - HTML5 Game

Простая. Творческая. Хороша для детей.

Coloring Book - HTML5 Game - это виртуальная сенсорная книжка-раскраска для любого экрана любого устройства.

Coloring Book - HTML5 GameColoring Book - HTML5 GameColoring Book - HTML5 Game
«Это игра-раскраска и может быть очень интересна детям».

Характеристики:

  • мягкая расцветка
  • система печати
  • 24 цвета
  • и прочее

В своей третьей версии Coloring Book - HTML5 Game превратилась в ведущую книгу-раскраску HTML5.

14. Canvas Puzzle

Используя любое изображение по вашему выбору, соберите пазл HTML5 с Canvas Puzzle.

Canvas PuzzleCanvas PuzzleCanvas Puzzle
«... полностью настраиваемая и простая в действии HTML5 головоломка ...»

Характеристики:

  • перетаскивайте картинки, чтобы собрать пазл
  • из любого количества фрагментов
  • без вращения частей
  • и прочее

Простая, легкая и настраиваемая, Canvas Puzzle - эта игра HTML5 понравится каждому.

15. Sliding Puzzle

Еще одна крутая головоломка, Sliding Puzzle, собирается из скользящих фрагментов.

Sliding PuzzleSliding PuzzleSliding Puzzle
«Три режима игры!»

Характеристики:

  • три режима: классика, вызов и веселье
  • полное окно или заданный размер холста
  • настраиваемые пакеты изображений
  • настройки и прочее

Sliding Puzzle сочетает различные режимы игры и возможность добавлять собственные изображения.

16. Sweety Memory - HTML5 Game

У вас работает память?

Sweety Memory - HTML5 Game работает так же. Переверните карты, сделайте ходы и победите!

Sweety Memory - HTML5 GameSweety Memory - HTML5 GameSweety Memory - HTML5 Game
«Откройте одинаковые карты до истечения времени!»

Характеристики:

  • настройка с PSD и AI файлами
  • разработка в HTML5 и CreateJS
  • исходный код
  • и прочее

Размер 960x1200, подходит для экрана практически любого мобильного или настольного устройства.

Sweety Memory - HTML5 Game совместим с CTL Arcade.

17. HTML5 3D BlackJack - HTML5 Casino Game

HTML5 3D BlackJack - HTML5 Casino Game для игры не на деньги, а ради удовольствия.

HTML5 3D BlackJack - HTML5 Casino GameHTML5 3D BlackJack - HTML5 Casino GameHTML5 3D BlackJack - HTML5 Casino Game
«Наслаждайтесь игрой в блэкджек в 3D-графике с высоким разрешением!»

Характеристики:

  • все настройки файлов HTML5 и CreateJS  
  • функция страхования, двойная ставка и раздельная рука
  • PSD и AI файлы для настроек
  • и прочее

Эта игра HTML5 совместима с CTL Arcade для WordPress.

Монетизация баннерной рекламой и продвижение с помощью социальных кнопок в HTML5 3D BlackJack - HTML5 Casino Game.

18. 3D Roulette - HTML5 Casino Game

Еще одна классная игра в казино для удовольствия. 3D Roulette - HTML5 Casino Game содержит множество отличных функций хорошей разработки.

3D Roulette - HTML5 Casino Game3D Roulette - HTML5 Casino Game3D Roulette - HTML5 Casino Game
«В игре есть все основные функции игры в рулетку, такие как Voisins zero, tier, orphelins, neighbour, final bets».

Характеристики:

  • настройки файлов HTML5 и CreateJS 
  • PSD и AI файлы настройки
  • разрешение 750x600 
  • и прочее

Эта игра HTML5 совместима с CTL Arcade для WordPress, но если вы ищете мобильную версию, я рекомендую Roulette Royale.

3D Roulette - HTML5 Casino Game - идеальная настольная рулетка HTML5 в браузере.

19. Missiles Again - HTML5 game (Construct 2 Capx) + Admob

Missiles Again - HTML5 game (Construct 2 Capx) + Admob забавный убийца времени для любой платформы

Missiles Again - HTML5 game Construct 2 Capx AdmobvvvvvvvvvvvvvvvvvvvvvvvvMissiles Again - HTML5 game Construct 2 Capx AdmobvvvvvvvvvvvvvvvvvvvvvvvvMissiles Again - HTML5 game Construct 2 Capx Admobvvvvvvvvvvvvvvvvvvvvvvvv
«Управляй самолетом, чтобы собрать все звезды и избежать всех ракет!»

Характеристики:

  • простой код с настройками в Construct 2
  • PNG и PSD файлы на замену
  • поддержка AdMob Ads
  • и прочее

Весёлая, хорошо продуманная игра HTML5, Missiles Again - HTML5 game (Construct 2 Capx) + Admob - то, что вы не сможете пропустить.

20. Пакеты игр HTML5

Иногда лучше покупать оптом.

Если вы желаете несколько игр HTML5, просмотрите эти комплекты HTML5, чтобы узнать, сможете ли вы сэкономить.

HTML5 Game BundlesHTML5 Game BundlesHTML5 Game Bundles

Несколько наименований комплектов:

  • Fruit Slasher
  • Brick Out
  • Ninja Run
  • Tank Defender
  • Billiards
  • Cars
  • Monster Match-3
  • Bubble Shooter
  • Space Purge
  • Duck Shooter
  • Girl Dress Up
  • и много ещё!

Ещё несколько HTML5 Game Bundles из лучших Super Bundle No 1 (50 игр), 24-Games in 1 Bundle и HTML5 Games Bundle No. 2 (9 игр).

Заключение

Перелистывание этого списка может вдохновить вас на переустановку, настройку или создание чего-то нового - с одной из этих игр HTML5, как шага к успеху. Публикуете ли вы аркаду на своем веб-сайте, зарабатываете на рекламе или хотите углубиться в HTML5, используя игровые шаблоны, вы всё найдёте на Envato Market.

Полезные уроки на Envato Tuts+ code tutorials по game design или game mechanics, как и HTML5 tutorials для начала.

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.