Игры для html сайта: 15 HTML5 игр с открытым исходным кодом

15 HTML5 игр с открытым исходным кодом

Самое замечательное то, что HTML5-игры работают во всех современных браузерах: Яндекс.Браузер, Chrome и Firefox, но Вы также можете играть в данные игры и на мобильных платформах: iPhone и Android (через Cordova – “cordova.apache.org/”). Взглянув на игры с открытым исходным кодом HTML5 – Вы можете научиться разрабатывать свои собственные.
Скачать исходники для статьи можно ниже

astrologer pro

Все эти игры построены на HTML5 и JavaScript. В подборку мы также включили несколько многопользовательских HTML5 игр.

1. Игра 2048

Играть в игру: “gabrielecirulli.github.io/2048/”
Посмотреть код игры: “github.com/gabrielecirulli/2048”

2. Clumsy Bird

Играть в игру: “ellisonleao.github.io/clumsy-bird/”
Посмотреть код игры:
“github.com/ellisonleao/clumsy-bird”

3. Hextris

Играть в игру:”hextris.github.io/hextris/”
Посмотреть код игры:

4. Pacman in HTML5 Canvas

Играть в игру:”pacman.platzh2rsch.ch/”
Посмотреть код игры: “github.com/platzhersh/pacman-canvas”

5. Astray

Играть в игру:”wwwtyro.github.io/Astray/”
Посмотреть код игры: “github.com/wwwtyro/Astray”

6. Canvas Tetris

Играть в игру:”dionyziz.logimus.com/tetris/”
Посмотреть код игры: “github.com/dionyziz/canvas-tetris”

7. Agent 8 ball

Играть в игру:”agent8ball.com/”
Посмотреть код игры: “github.com/thinkpixellab/agent8ball”

8. Tic Tac Toe

Играть в игру:”codepen.io/timrijkse/full/XjLGKv/”
Посмотреть код игры: “codepen.io/timrijkse/pen/XjLGKv”

9. 0hh2

Играть в игру:”0hh2.com/”
Посмотреть код игры: “github.com/Q42/0hh2”

10. Javascript Pseudo 3D Racer

Играть в игру:”codeincomplete.com/games/racer/v4-final/”
Посмотреть код игры: “github.com/jakesgordon/javascript-racer/”

Мультиплеер игры:

11. mk.js

Играть в игру:”mk.mgechev.com/”
Посмотреть код игры: “github.com/mgechev/mk.js”

12. Shootr

Играть в игру:”shootr.signalr.net/”
Посмотреть код игры: “github.com/NTaylorMullen/ShootR”

13. Browser Quest

Играть в игру:”browserquest.mozilla.org/”
Посмотреть код игры: “github.com/mozilla/BrowserQuest”

14. VueChess

Посмотреть код игры: “github.com/gustaYo/vue-chess”

15. Freeciv Web

Играть в игру:”play.freeciv.org/”
Посмотреть код игры: “github.com/freeciv/freeciv-web”

На этом всё! Красивых Вам сайтов!

Игры, чтобы попрактиковаться в вёрстке | GeekBrains

Специально для вас мы нашли инструменты, которые помогут практиковаться в HTML и CSS в игровой форме.  

https://d2xzmw6cctk25h.cloudfront.net/post/1878/og_cover_image/784f66c89293b73fc202f1a26db93f5c

Недавно мы публиковали материал «Где попрактиковаться в программировании: 30 ресурсов» с задачками, играми, тестами по популярным языкам программирования. Вы спрашивали об играх для прокачки навыков фронтендера — их есть у нас.

Grid critters — game-changer, разработанный Дейвом Геддесом. CSS Grid — самая современная методология, которая открывает новые возможности в построении макетов для сайтов. Дейв Геддес считает, что с появлением CSS Grid проблема верстки табличных макетов решена. Освойте методологию раз и навсегда, играя в Grid Critters: Grid Mastery Game.

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

К сожалению, игра не бесплатная — она стоит 179 долларов.

Flexbox Zombie — еще одна игра от Дейва Геддеса, только для изучения CSS Flexbox. Это современная методология, гибкая и универсальная, но не всем просто ее освоить — многие пользуются шпаргалками, когда верстают. Пришло время изучить Flexbox так, чтобы без проблем создать любой макет.

В игре Flexbox Zombie двенадцать разделов, каждый из которых раскрывает часть сюжета и помогает изучать методологию. Сюжет построен на сражении с зомби: игрок управляет арбалетом с помощью кода. От знания Flexbox и соблюдения инструкций зависит жизнь персонажа.

Игра стоит 225 долларов, но сейчас она доступна бесплатно — достаточно зарегистрироваться на сайте.

CSS Diner — простая игра, в тайтле которой авторы пишут: «Where we feast on CSS Selectors». Поможет и освоить CSS, и освежить в памяти базовые правила верстки. В CSS Diner игрок с помощью правильной команды — игра помогает инструкциями — должен расположить на столе посуду и продукты. Всего в игре 32 уровня, на каждом из которых задания усложняются. Выполняя их, вы сможете изучить CSS от простых селекторов вроде дивов до first-child и атрибутов input.

Code the Web — игра, которая учит веб-верстке. Вообще сервис Tynker ориентирован на детей и предлагает игры для обучения программированию, но и взрослому освоить верстку там тоже можно. В Code the Web предлагают изучить основы HTML и CSS для создания простых веб-страниц на материале стартовых проектов Tynker. А скоро на сайте будет доступна игра по введению в веб-дизайн.

Flexbox Defence — еще одна игра, которая научит применять Flexbox на ваших веб-страницах. Она соответствует жанру Tower Defence: игрок возводит  башни, чтобы одолеть врагов. В Flexbox Defence оборонительные сооружения строятся с помощью CSS-кода, и перед новым уровнем игрока знакомят с инструкцией по flexbox-свойствам.

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

Flexbox Froggy — игра похожа на Grid Garden, но направлена на изучение CSS Flexbox. С помощью персонажа — лягушонка Фрогги — вы научитесь применять flexbox-свойства для позиционирования объектов на странице. По мере выполнения инструкции персонажей становится больше, и каждого из них нужно переместить на соответствующую линию с помощью CSS.

Бонусом для верстальщика

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

Pixactly — онлайн-инструмент для отработки навыка pixel perfect, важного для любого верстальщика. Pixactly поможет проверить, насколько хорошо развит глазомер. В игре предлагаются параметры, в соответствии с которыми нужно нарисовать прямоугольник. В зависимости от того, насколько близка нарисованная фигура к заданным размерам, вы получаете баллы. А еще оценку от Pixactly — старайтесь не ошибаться, если не хотите вместо «Great» увидеть «Great! said nobody».

Zelda: Breath of the Wild и Overwatch Hero Picker с помощью CSS — видеоинструкции от Дейва Геддеса. Вместе с Дейвом вы можете создать интерфейс игр с помощью CSS Grid, Flexbox и других современных приемов верстки. Отлично подходит для отработки навыков, полученных в играх.

Игры Html 5 играть онлайн

Последние добавленные

Html 5

Siren Head: Sound of Despair / Голова сирены: звук отчаяния

Комментариев: 0

Html 5

Staying Safe and Healthy With Ellie / Сохранение безопасности и здоровья с Элли

Комментариев: 0

Html 5

Yummy Hot Dog / Вкусный хот-дог

Комментариев: 0

Html 5

Yummy Waffle Ice Cream / Вкусное мороженое с вафлями

Комментариев: 0

Html 5

HoverCraft / Судно на воздушной подушке

Комментариев: 0

Html 5

Path of Atlon / Путь Атлона

Комментариев: 0

Html 5

Zombie Mission 5 / Зомби Миссия 5

Комментариев: 0

Html 5

Tennis Open 2020

Комментариев: 0

Топ 10 HTML5 игр / Блог компании ua-hosting.company / Хабр

В последние годы HTML5 и JavaScript активно набирают популярность среди разработчиков инди-игр. Причина такого выбора очевидна — потенциал двух приложений в производстве игр. HTML5 теперь считается серьезной игровой платформой. Дальше для примера приведены 10 топовых игр с использованием HTML5.

1. A Grain of Truth

Игра была разработана братьями Рудовски (Польша). Суть игры проста — юная путешественница в поисках мага. Это игра жанра «point-and-click» (квест) полна приключений, с очень красивой графикой полностью погружает геймеров в игровой мир. Игра написана с помощью JQuery, что в очередной раз показывает, что данный фреймворк можно использовать не только для создания сайтов, но и для развлечений.

играть

2. Save the Day

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

Игра была создана на открытом игровом движке Turbulenz на HTML5. Движек Turbulenz предоставляет широкий выбор функций и сервисов для создания игр (отказоустойчивость, асинхронная загрузка, масштабируемость). Вообщем — движок для создания игр, использующих веб-технологии, а не нативный код. Turbulenz — игровой движок для социальных игр, использующий HTML5, WebGL JavaScript. Его возможности позволяют делать захватывающие реалтайм 3D игры, с физикой.

играть

3. Runfield

Runfield — специфическое название, простой, но немного странной игры. Геймер примеряет роль гипер — прыгучей лисы. Кликаете — прыгаете, перепрыгиваете препятствия… словом играете). Игра была разработана Ilmari Heikkinen, графика создана с использованием canvas, одного из элементов HTML5.

играть

4. Cut the Rope

Перереж веревку — накорми зверюшку-лягушку. Создана студией разработки игр в России, ZeptoLab в 2010 году. Головоломка, которая пришлась по душе многим геймерам со всего мира. Суть такова — лягушонка нужно накормить разноцветными конфетами на веревках, которые нужно «правильно» перерезать. Сюжет, правда, забавный. На каждом следующем уровне добавляется количество веревок, мыльные пузырьки, ракеты… собираются звездочки, открываются новые локации… что писать — лучше раз сыграть) (заняло некоторое время разобраться, где именно на сайте кнопочка «играть» — внизу «Give it a fry»)

играть

5. Robots are People Too

Robots are People Too (роботы тоже люди?) игра на canvas/WebGL, многопользовательская игра (на любителя), разработана с использованием HTML5 canvas. Она отличается от остальных игр, сложная и одновременно с этим интересная, ведь нужно учиться играть двумя руками. Нужно управлять двумя роботами. Управление W-A-S-D для одного робота (синего) и стрелки (влево-вправо-вверх-вниз) для другого (красного) робота.

играть

6. BrowserQuest

Многопользовательская RPG игра, BrowserQuest. Для создания графики игры использован тот же — HTML5 canvas. Так как игра создана на HTML5/JavaScript, то она доступна через большинство браузеров и платформ. Сюжет игры: молодой разведчик посещает разные опасные места в поисках приключений и острых ощущений. Использованы такие технологии как web worker (определяет API для создания фоновых скриптов в веб-приложениях при этом не блокируя сам процесс игры), localStorage (сохраняет историю игры).

играть

7. Sumon

Игра Sumon известна среди геймеров. Головоломка Sumon от ideateca, нативное приложение, которое также разработано с помощью веб-технологии HTML5. Более интересной ее делает использование фреймворка CocoonJS (компилит HTML5 приложения). Платформа Ludei уже была использована при разработке более 500 игр, эта игра не исключение). Графика Sumon создана с использованием HTML5 сanvas.

играть

8. Lux Ahoy

Игра — аркада, которая превратит Вас в пирата. Нужно ударить противника с пушки ядром, рассчитав угол и мощность. Графика игры были разработаны и созданы в Flash, а затем были перенесены на HTML5. К сожалению, игра запускается не во всех браузерах (заходить в Lux Ahoy нужно браузером Google Chrome).

играть

9. The Convergence

Convergence — игра похожа на Robots are People Too. Одиночная игра, которая требует одновременно координировать двух героев. Для графики был использован HTML5 сanvas.

10. Bombermine

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

играть

Взято на сайте

Html5 игры для вашего сайта!

Html5 игры для вашего сайта! — ИгроУтка » Страница 2

• игры на 2
• стрелялки
• симулятор
• головоломки
• гонки
• io
• стратегии
• майнкрафт
• тесты
• гта
• поиск предметов
• танки
• огонь и вода
• бродилки
• марио
• рисовалки
• когама
• футбол
• зомби
• ферма
• аниме
• снайпер
• одевалки
• раскраски
• пазлы

30 невероятных и затягивающих игр на HTML5 (Часть 2)

HTML5 появилась совсем недавно, всего пару лет назад. И уже сейчас стала отличной и популярной платформой для разработки игр. Да ещё и каких игр. Эта технология уже в плотную добралась к Flash. Я уверен, что скоро её полностью перегонит.

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

Ещё подобные подборки очень долго пишутся, так как некоторые игры очень затягивают и я просто напросто заигрался. 🙂

Огромное при огромное спасибо http://www.webdesignerdepot.com и предлагаю посмотреть первую часть с играми, а так же Вам будет интересно следующее:

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

Если Вы любите гоночные игры, то это игра точно для Вас. Очень крутой сюжет и качественная графика. Даже не вериться, что подобное создали с помощью HTML5.

Увлекательная головоломка, в которой Вам нужно пролаживать короткие пути, чем короче путь тем больше очков Вы заработаете.

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

Данная игра специально разработана для браузера Mozilla, чтобы протестировать его производительность. После нескольких минут игры я всё больше и больше поражаюсь возможностям HTML5.

Может помните игру на денди бомбермен? Это практически тоже самое только в многопользовательском режиме. Затягивает 🙂

Эта игра имеет неоновые полосы в стиле фильма Трон. Вам нужно просто упралять маленьким бегуном перепрыгивая разные препятствия.

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

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

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

Классная игра на HTML5. С помощью вертолёта Вам нужно спасти всех людей от извержения, а также высадить их в указанные места. И на всё про всё Вам даётся не много времени, успеете? 🙂

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

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

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

Стратегия и головоломка в одном. Вам нужно помочь черепахе проложить путь для своего короля, при этом правильно располагая блоки.

Это классика жанра уже и на HTML5. Вам просто нужно шариком сбить все кирпичи.

Очень красивый теннис с крутой музыкой и геймплеем.

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

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

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

Не простая игра на HTML5, в которой Вам нужно будет уходить от препятствий в тоннеле.

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

Самая простенькая и интересная игра на HTML5. Избегайте разных препятствий маленькой птичкой.

Если Вы любите головоломки, то Вы точно будете играть в эту игру.

У Вас сегодня был тяжёлый день? С помощью этой игры Вы можете отомстить, например, Вашему начальнику, который кричал как угорелый 🙂 Самое интересное в этой игре, то, что она использует веб камеру. И Вы должны избегать ударов противника перемещая голову.

Удивительная игра на HTML5. Эта игра тоже использует веб камеру.

Эта головоломка имеет только одно правило: захватить куски прежде чем они упадут.

Игра полностью сделана под веб камеру. Без неё не обойтись.

Вам просто нужно защищать Вашу любимую планету.

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

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

10 браузерных игр, которые помогут изучить веб-разработку

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

Процесс видеоигр включает в себя решение логических задач, для решения которых зачастую используют метод проб и ошибок. Но что же ещё может требовать подобных навыков? Верно – программирование!

В данной статье мы подготовили для вас 10 браузерных игр для изучения веба, играя в которые, вы узнаете больше о JavaScript, CSS и HTML, или вы можете использовать их как учебный полигон для тренировки ваших навыков в вебе. Некоторые из них легкие, другие, наоборот, очень сложные в прохождении, но абсолютно все весёлые!

Несмотря на то что Code Combat создан для детей школьного возраста, игра остается интересной для всех возрастов. В ней у вас под контролем находится храбрый герой, которому предстоит пройти через сотни подземелий, сражений с врагами, а также он будет собирать множество самоцветов. Прохождение игры занимает около 20 часов и охватывает основные аспекты программирования.

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

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

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

Отличная игра для изучения CSS селекторов. В игре дается анимированная таблица блюд, HTML форма и определённый элемент или элементы, которые будут выбираться из таблицы. Различные уровни охватывают все, что связанно с селекторами в вебе, начиная с самых основ до ~ и :first-child.

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

Огромная коллекция игр, в которой представлены различные языки программирования, такие как JavaScript, PHP, Ruby, Go, Python и многие другие. Данная платформа включает в себя различные головоломки, мультиплееры и игры, базирующиеся на искусственном интеллекте. Имеется поддержка редакторов Emacs и Vim.

Классическая игра жанра «оборона башнями» с использованием свойств CSS, для размещения башен и ловушек используются flexbox-лейауты. Игра включает в себя 12 уровней с различными волнами врагов, пытающихся достичь вашей базы. Для того чтобы отбить все волны врагов, вам придется применить все знания в области flexbox-лейаутов.

Elevator Saga – это головоломка, в которой вам предстоит использовать JavaScript, чтобы контролировать лифты в здании. Толпы людей постоянно поднимаются вверх и вниз, а вам предстоит доставить их в нужное место как можно быстрее. Игра проверит ваши навыки в написании алгоритмов, а также знания функций JS, массивов и обработчиков событий.

Untrusted – это приключенческая мета-JavaScript игра, в которой вам предстоит играть за Доктора Ивала. Знак @ может контролировать мир вокруг него при изменении исходного кода. Игроку предоставляются функции для инициализации каждого уровня, изменяя которые с помощью API игры, вы создадите путь для спасения Доктора Ивала.

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

Ссылка на оригинальную статью
Перевод: Александр Давыдов

Как стать Дуровым: практическое руководство для школьников и студентов

ТОП-12 игр, с которыми ребенок научится программировать

бесплатных игр для вашего веб-сайта

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

HTML5 Games

HTML5 игры скоро появятся. Зайдите в ближайшее время!

Flash-игры

Flash-игры были основным продуктом Интернета уже более десяти лет.Есть несколько невероятных названий, и они — отличный способ развлечь посетителей вашего сайта, которые используют настольные компьютеры. Обратите внимание, что, к сожалению, они не работают на планшетах и ​​мобильных устройствах. Все игры, отмеченные знаком *, разработаны мной лично. -Gaz

FreeGames.org Flash Games

Вот несколько флеш-игр, которые я опубликовал под брендом «FreeGames.org». Не стесняйтесь использовать их на своем собственном веб-сайте:

Box Clever 2 * — [Играть] — [Загрузить]

Hardest Free Game * — [Играть] — [Загрузить]

Tangerine Tycoon * — [Играть] — [Загрузить]

Penguin Bubble — [Играть] — [Загрузить]

Самая сложная игра * — [Играть] — [Загрузить]

Pest Destroyer — [Играть] — [Загрузить]

Uniwords — [Играть] — [Загрузить]

Liftoff 2012 — [Играть] — [Загрузить]

Meteors * — [Играть] — [Загрузить]

Gravity Boy * — [Играть] — [Загрузить]

TGH Flash Games

Вот несколько флеш-игр, которые я опубликовал для своего оригинального игрового веб-сайта TheGameHomepage.com. Red Remover — мой любимый. Вы также можете бесплатно использовать эти игры на своем веб-сайте:

3 фрагмента 2 * — [Играть] — [Загрузить]

3 фрагмента * — [Играть] — [Загрузить]

Pumpkin Remover 3 * — [Играть] — [Загрузить]

Red Remover Player Pack 2 * — [Играть] — [Загрузить]

Gravity Boy Level Pack * — [Играть] — [Загрузить]

Box Clever Level Pack * — [Играть] — [Загрузить]

Pumpkin Remover 2 * — [Играть] — [Загрузить]

Red Remover Player Pack * — [Играть] — [Загрузить]

Trollface The Game * — [Играть] — [Загрузить]

Pumpkin Remover * — [Играть] — [Загрузить]

Let’s Jump — [Играть] — [Загрузить]

Red Remover * — [Играть] — [Загрузить]

Bubble Cannon 2 * — [Играть] — [Загрузить]

Box Clever * — [Играть] — [Загрузить]

Bubble Cannon * — [Играть] — [Загрузить]

Scriball * — [Играть] — [Загрузить]

Tower Stacker * — [Играть] — [Загрузить]

Maze Man 2 * — [Играть] — [Загрузить]

Super Stacker * — [Играть] — [Загрузить]

Trickshot Golf * — [Играть] — [Загрузить]

Scope: First Blood * — [Играть] — [Загрузить]

MIRC — [Играть] — [Загрузить]

Ragdoll Course * — [Играть] — [Загрузить]

Square Divide: Time Trial * — [Играть] — [Загрузить]

Topple — [Играть] — [Загрузить]

Maze Man * — [Играть] — [Загрузить]

Squareman 3 — [Играть] — [Загрузить]

Particle Blaster * — [Играть] — [Загрузить]

tChu (Chu Chu Chu) — [Играть] — [Загрузить]

Avalanche — [Играть] — [Загрузить]

Squareman 2 — [Играть] — [Загрузить]

Square Divide * — [Играть] — [Загрузить]

Hungry Blocks * — [Играть] — [Загрузить]

Squareman — [Играть] — [Загрузить]

The Stupidity Test * — [Играть] — [Загрузить]

Go Squirrel Go! * — [Играть] — [Скачать]

OMG INVADERS! * — [Играть] — [Скачать]

Tangerine Panic XMAS * — [Играть] — [Скачать]

Tangerine Panic * — [Играть] — [Скачать]

.

Загрузка игр HTML5 — itch.io

itch.io поддерживает загрузку игр HTML в
в дополнение к загружаемым играм, Flash, Unity и Java. Для начала
просто перейдите на страницу «Новая игра» или «Редактировать игру» и выберите “HTML
Game » из списка Kind Of Game .

Начало работы

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

• Загрузите ZIP-файл, содержащий все файлы игр, включая файл index.html , который будет точкой входа в ваши игры.
• Загрузите один HTML-файл, содержащий всю вашу игру.

ZIP файл

Мы рекомендуем загрузить ZIP-файл, если ваша игра состоит из множества различных
файлы.

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

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

HTML файл

Для небольших игр вы также можете напрямую загрузить файл .html .

Вся игра должна быть в одном файле HTML. Ваша игра не сможет
ссылаться на любые другие файлы, которые вы загрузили на странице редактирования проекта itch.io. если ты
Если вам нужно несколько файлов, мы рекомендуем загрузить ZIP-файл.

Просмотр вашей игры

После установки размеров игры и загрузки ZIP-файла вы можете просмотреть
ваша игра на зуд.io . При первой загрузке страницы игры itch.io будет
уделите время обработке архива.

Тем временем вы можете настроить страницу своей игры так же, как и любую другую.
игра на itch.io .

Могу ли я принимать платежи с помощью своей игры HTML5?

В настоящее время все игры HTML5 на itch.io настроены так, чтобы принимать платежи только как
пожертвования. Однако можно продать доступ к игре, установив для нее
«Вид игры» — «Загружаемый» .Если вы хотите, чтобы itch.io поддерживал
покупаемые игры HTML5, тогда вам следует связаться с нами.

Требования к файлу ZIP

Существует несколько требований к файлам ZIP для предотвращения злоупотреблений и
чтобы обеспечить подходящие условия для людей, запускающих ваш проект в своих
браузер:

• ZIP-файл не должен содержать более 1000 отдельных файлов после
  добыча.
• Максимальная длина имени файла, включая путь, не должна превышать
  Длина 240 символов.
• Размер всего извлеченного содержимого не должен превышать 500 МБ.
• Размер любого извлеченного файла не должен превышать 200 МБ.
• Имена файлов чувствительны к регистру и должны быть закодированы как UTF-8

Если ваша игра не соответствует требованиям, рассмотрите возможность распространения
вместо этого игра как загружаемая. Очень большие HTML5-игры, как правило, хуже
опыт по сравнению с эквивалентным загружаемым в отношении времени загрузки
и производительность.

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

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

Настройка способа встраивания игры

На странице редактирования вашего проекта вы можете настроить способ встраивания вашей игры HTML5.
на его страницу itch.io.

• Нажмите для воспроизведения — По умолчанию для запуска вашего проекта требуется щелчок. Это гарантирует, что ваша игра не замедлит работу браузера зрителя при первоначальной загрузке страницы itch.io.Если у вас легкий проект, вы можете отключить Нажмите, чтобы воспроизвести , и ваш проект запустится при загрузке страницы. Имейте в виду, что в некоторых браузерах звук может быть отключен при использовании автозапуска.
• Кнопка полноэкранного режима — Мы можем автоматически создать кнопку полноэкранного режима для вашего проекта, если движок, который вы используете, не поддерживает ее автоматически.
• Размеры окна просмотра — У вас есть несколько вариантов настройки размера окна просмотра. Самый простой способ — указать размеры вручную.Для некоторых игровых движков мы поддерживаем автоматическое определение размеров. Если вы хотите, чтобы ваша игра всегда занимала максимальный размер экрана, вы можете использовать Click для запуска в полноэкранном режиме .
• Полосы прокрутки — Размер некоторых проектов больше, чем размер их области просмотра. Включение полос прокрутки позволит зрителям прокручивать в пределах iframe . По умолчанию они скрыты.

Визуальная настройка

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

• Фоновое изображение — изображение, занимающее размер области просмотра, расположенной за кнопкой Play .
• Градиент — Цвет градиента может быть наложен на область просмотра, чтобы помочь вам соответствовать цветовой схеме вашей страницы.

Поддержка мобильных игр HTML5

Многие игровые движки HTML5 поддерживают воспроизведение игр через мобильный веб-браузер. Если
вы знаете, что ваш проект работает в мобильном браузере, тогда вы можете выбрать
Mobile Friendly в настройках внедрения вашего проекта.

Когда ваша страница itch.io загружается на мобильное устройство, она будет использовать Нажмите, чтобы
запускать в полноэкранном режиме независимо от того, как вы настроили встраивание для
настольные компьютеры. Это гарантирует, что пользовательский интерфейс itch.io не прерывает
ваше приложение, а также предотвращение неожиданного автозапуска игры
потребляющие ресурсы.

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

Обнаружение игрового движка

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

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

Общие ловушки

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

• Не загружается файл .ZIP — Если вы пытаетесь загрузить проект, в котором используется несколько файлов, вы должны сжать их как ZIP-файл и загрузить его. Мы не поддерживаем другие типы архивов , ( .rar , .tar.gz и .7z не поддерживаются). Загрузка нескольких файлов по отдельности на сайт itch.io тоже не сработает, вы должны объединить все необходимые файлы в ZIP-файл. Обратите внимание: если ваш проект представляет собой один файл HTML, вы можете загрузить его напрямую и пропустить его архивирование.
• Использование абстрактных путей вместо относительных — Ваш проект размещен в подкаталоге нашей CDN HTML5. Если вы используете абсолютный путь в исходном коде, то файл, на который вы пытаетесь сослаться, не будет найден. Обычно это связано с ошибкой net :: ERR_ABORTED 403 в Chrome. Абсолютные пути — это пути, которые начинаются с /. Вместо этого попробуйте использовать относительные пути.
• Несоответствующие случаи при ссылке на файлы — Сервер, на котором размещены файлы вашего проекта, чувствителен к регистру.Компьютеры MacOS и Windows позволяют загружать файлы без учета регистра. Возможно, ваш проект работает локально на вашем компьютере, но не работает после его загрузки. Убедитесь, что все файлы, на которые вы ссылаетесь, используют тот же регистр, который указан в вашем файловом менеджере. Обычно это связано с ошибкой net :: ERR_ABORTED 403 в Chrome. Если у вас есть файл с именем Hello.png , вы должны ссылаться на него как на Hello.png , например hello.png и HELLO.png не будет работать, потому что регистр не совпадает.
• Ссылки на внешние ресурсы без HTTPS — Если ваш проект пытается загрузить файлы или взаимодействовать с API в другом домене, то этот домен должен быть запрошен с HTTPS. По соображениям безопасности itch.io без исключений является веб-сайтом HTTPS. Все современные браузеры обычно блокируют запросы к другим доменам, если они не работают по протоколу HTTPS. Никаких исключений. Существует множество бесплатных ресурсов для добавления HTTPS в ваш собственный домен, например Let’s Encrypt.
• Загрузка очень большой игры — Хотя многие игровые движки позволяют экспортировать что угодно в виде проекта HTML5, часто необходимо учитывать, на что будет похоже пользовательский опыт игры. Для более крупных игр часто лучше использовать загружаемую версию. Вот почему у нас есть ограничения по умолчанию для размеров проектов (хотя вы можете связаться с нами, если вам нужны снятые ограничения). С приложением itch.io по-прежнему можно легко играть в проекты. Вы можете думать о проекте HTML5 как о веб-сайте: многие из тех же рекомендаций по оптимизации производительности все еще применимы.

Экспорт игры для itch.io

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

Вот несколько рекомендуемых ресурсов:

Если у вас есть другие рекомендуемые ресурсы или советы по настройке, пожалуйста
отправьте их в поддержку.

.

Игровые движки HTML5 — найдите то, что подходит именно вам

.