Games — Игры на canvas


Содержание

Бесплатные игровые движки на HTML5 и JavaScript

HTML5 вместе с CSS3 и JavaScript дают разработчику широкие возможности создания игр с использованием 3D, анимации, Canvas, математики, цветов, звука, WebGL. Одно из наиболее очевидных преимуществ HTML5 заключается в его независимости и от платформы, и в общем случае от аппаратной начинки.

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

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

Итак, вот, собственно, сами движки.

Crafty

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

Quintus

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

gameQuery

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

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

lycheeJS

Игровая библиотека JavaScript, которая предлагает готовое решение для проектирования и реализации HTML5 Canvas и WebGL или нативных OpenGL игр внутри браузера или стационарных платформ. Оптимизирован для Google Chrome.

Enchant.js

Фреймворк Enchant.js для HTML5+JavaScript игр был разработан в 2011 году, распространяется с открытым исходным кодом (MIT лицензия) и потому бесплатен.

The Render Engine

Кросс-браузерный опенсорсный движок, написанный полностью на JavаScript. Созданный с нуля для того, чтобы быть максимально гибким, он имеет обширный API и использует самые новые фичи современных браузеров. Этот фреймворк предназначен, чтобы делать все за вас: ваша идея – его реализация с помощью самых часто используемых инструментов.

GameJS

Большая библиотека на верхнем уровне HTML Canvas. В добавок к функциям рисования в ней имеется растущий ассортимент полезных для разработки игр модулей. Большинство имеющегося API основан на популярной PyGame.

CSS Game Engine

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

ClanFX

clanfx основан на JavaScript и CSS и использует плиточную графику. Работает на данный момент в Firefox, Epiphany и Opera. Среди реализованных фич: анимированные спрайты, эффекты заклинаний, постройки, плитки/текстуры и базовый искусственный интеллект.

gTile

Браузерный движок на чистом JavaScript и DHTML. В gTile плиточная графика была выбрана за ее простоту и доступность. Упор в реализации был сделан на высокий уровень интерактивности и поведении игровых объектов. Меньшее внимание было уделено графике. А потому движок подойдет больше для создания текстовых РПГ, а графических возможностей должно хватить для изображения локаций.

Графический JS движок с открытым исходным кодом (GPLv3). Легкий в использовании синтаксис предназначен для того, чтобы сделать фреймворк быстрым и расширяемым.

2D игровая библиотека, основанная на HTML5. Использует и Canvas, и средства DOM.

Cocos2D

Портированный с iPhone графический 2D HTML5-движок на JavaScript. Позволяет быстро создавать 2D игры и графические приложения, которые могут работать на всех современных устройствах без установки дополнительных плагинов.

CopperLicht

WebGL библиотека и JavaScript 3D движок для создания браузерных игр и 3D приложений. Использует WebGL Canvas, поддерживаемый современными браузерами и способный поддерживать рендеринг 3D моделей, используя аппаратное ускорение без плагинов.

Этот HTML/JavaScript движок – реинкарнация набора инструментов для разработки олдскульных RPG (но с более привлекательной графикой). И все только с помощью HTML и JS. Никаких плагинов. Никакого Flash.

LimeJS

HTML5 движок для разработки игр с поддержкой сенсорного ввода. LimeJS создан с использованием Closure Library, созданной Google, и в нем уже реализованы классы и функции для отслеживания времени, событий, обработки форм и анимации. Также фреймворк поддерживает спрайтовые листы (т.е. все используемые изображения могут быть помещены в один файл).

Phaser

Ещё один фреймворк для создания мобильных и десктопных игр на HTML5 с применением Canvas и WebGL. Бесплатный и с открытым исходным кодом. Есть быстрые гайды для старта на JavaScript и TypeScript.

Webtun.com — веб обозреватель

40 самых популярных веб-игр на HTML5

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

Чтобы продемонстрировать истинный игровой потенциал HTML5, мы расскажем вам о сорока самых интересных и популярных веб-играх, в том числе и проAngry Birds! Приготовьтесь провести в их занимательной компании несколько минут или час.

На заметку: для игры лучше всего использовать последние версии Google Chrome , Internet Explorer и Firefox .

Angry Birds онлайн в высоком качестве! Играть в Angry Birds можно в последних версиях Google Chrome, Mozilla Firefox и Internet Explorer.

Сбейте IEvil на своем реактивном самолете от HTML5! Меня терзают смутные сомнения, что авторы игры стали жертвами Internet Explorer6.

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

Ваша задача – закатить как можно больше шаров прежде, чем выйдет время. Берегитесь бомбы!

Надоело одному играть в снукер? С Web Snooker вы можете играть со своим онлайн-другом. Покажите ему, кто главный!

Хотите узнать, сколько предметов вы сможете найти за одну секунду? Тогда это именно то, что вам нужно.

Эта игра с боковой прокруткой качества 2D создана в HTML5 и javascript.

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

Известная веб-игра в волейбол, цель которой набрать больше, чем у соперника, очков.

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

Canvas Rider — это занимательная игра, в которой вы ездите на велосипеде по маршрутам, проложенным другими игроками.


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

Версия Pac-Man в исполнении Google, которая изначально была создана 22 мая 2010 года как анимационный логотип к 30-й годовщине игры.

Entanglement –веселая HTML5 игра-пазл, которая начинается с шестигранника в центре экрана.

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

HTML5 Blackjack – это игра в блекджек в HTML5. Вы стартуете с $100 и можете ставить $10 в каждой раздаче.

Приложите все усилия, чтобы успешно приземлиться! Простая, но забавная игра, разработанная Джейсоном Брауном с использованием javascript и Canvas.

Ваша задача в игре – избегать столкновения со стеной, но как долго вам это будет удаваться?

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

Задача предельно проста: вы — танк и вам нужно вывести из строя других игроков!

Выберите правильную тактику, чтобы вызволить голубой корабль.

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

Plain Chess – простая, но красиво оформленная альтернатива многочисленным шахматным порталам.

Отличная 3D игра, в которой два игрока могут выбрать 2D или 3D панель. Сыграть можно и против компьютера.

Pirates Love Dalies – игра, созданная с использованием свойств HTML5 и javascript. Главное здесь – защитить крупость.

Canvas-игра от HTML5 с использованием только мыши. Задача игрока – как можно дольше оставаться живым и набрать максимальное количество баллов.

Runfield – простая, но немного странная HTML5 игра, в которой вы примеряете роль гипер-лисы. Просто кликайте и перепрыгивайте ямы и канавы.

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

Swarmation – это сетевая игра в HTML5. Она проверяет вашу способность быстро принимать решения и умение работать в команде.

Летайте с оружием в 3D пространстве и стреляйте по различным объектам. Используйте мышь, чтобы прицелиться, и кликайте, чтобы выстрелить.

Здесь нет ничего нового – побеждайте, и мир окажется у ваших ног!

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

Игра, где убивают зомби, написанная только на HTML5 и javascript.

Соберите все подарки прежде, чем придет канун Рождества!

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

JS WARS представляет собой классическую стрелялку, специально созданную, чтобы продемонстрировать силу современных браузеров, использующих технологию HTML5.

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

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

Здесь вас ждет атака разъяренной орды, отражать которую вы будете средневековым оружием и с помощью бонусов.

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

Game Canvas

The HTML element is displayed as a rectangular object on a web page:

HTML Canvas

The element is perfect for making games in HTML.

The element offers all the functionality you need for making games.

Use JavaScript to draw, write, insert images, and more, onto the .

.getContext(«2d»)

The element has a built-in object, called the getContext(«2d») object, with methods and properties for drawing.

You can learn more about the element, and the getContext(«2d») object, in our Canvas Tutorial.

Get Started

To make a game, start by creating a gaming area, and make it ready for drawing:

Цукерберг рекомендует:  Testing - Проанализировать код С# (игра тетрис)

Example

function startGame() <
myGameArea.start();
>

var myGameArea = <
canvas : document.createElement(«canvas»),
start : function() <
this.canvas.w > this.canvas.height = 270;
this.context = this.canvas.getContext(«2d»);
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
>
>

The object myGameArea will have more properties and methods later in this tutorial.

The function startGame() invokes the method start() of the myGameArea object.

The start() method creates a element and inserts it as the first childnode of the element.

На чём делать HTML5 игры?

С уходом Flash из браузеров необходимость делать браузерные игры на чём-то другом возросла чуть больше чем полностью. В технологиях альтернативы нет, она одна — HTML5 технология.

И для того чтобы начать делать HTML5 игры, хорошо бы сначала выбрать средство для этого, благо что выбор в HTML5 движках и фреймворках для игр имеется)

Сначала рассмотрим HTML5 движки и фреймворки хорошо подходящие для создания 2D игр, а потом рассмотрим для 3D.

Стоит рассказать про технологии рендера HTML5, их две: canvas и WebGL. Суть разницы: canvas — это для отображения 2D и работает без проблем практически во всех браузерах, а WebGL — это для рендера 3D и может работать не во всех браузерах.

Для HTML5 2D пару лет назад было очень важно чтобы движок умел рендерить в canvas, а не только в WebGL, т.к. порталы игр брали игры только на canvas. Но сейчас ситуация меняется и WebGL становится более обыденным и показателем большой скорости рендера в сравнение с canvas. Но если вы делаете 2D HTML5 игру, то на всякий случай она должна уметь рендериться в canvas — вдруг спонсор не захочет WebGL.


На просторах инета я нашёл вот такую таблицу популярности HTML5 2D движков: https://html5gameengine.com

Коротко рассмотрю топ из этой таблицы в своём порядке)

Основной фишкой PixiJS является скорость рендера. Авторы утверждают, что на данный момент это самый быстрый движок рендеринга 2D. В основном используется WebGL рендер везде где это возможно и лишь для старых браузеров автоматически включается рендер в canvas.

На оф. сайте есть кучка примеров и документация.

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

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

Если же вы хотите, чтобы такие базовые вещи были уже сразу из коробки, то прошу к ознакомлению с Phaser-ом.

Phaser — HTML5 игровой движок с открытым исходным кодом. Он хорошо поддерживается Ричардом Дэви и сообществом вокруг него. Для рендера используется PixiJS, так что он может рендерить в canvas или webGL по выбору и за скорость можно не беспокоиться.

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

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

Есть готовые шаблоны в MS Visual Studio для новых проектов Phaser с использованием языка TypeScript.

Я выбрал этот движок после долгих раздумий между CreateJS, PixiJS и Phaser и остался доволен. После Haxe+OpenFL пришло приятное ощущение, что я занимаюсь разработкой игры, а не костылями для разработки игры) Я сразу решил использовать TypeScript и был приятно удивлён, что в MSVS есть готовые шаблоны проектов.

ImpactJS занимает топовые места рейтинга HTML5 Canvas Game Engine с самого 2010 года, когда он и появился на публике. Это игровой движок на JavaScript. Поставляется вместе с Ejecta Framework, который помогает публиковать игры на iOS и tvOS. Ejecta берет исходники в js и компилит его под OpenGL. По словам разработчиков игры не будут отличаться от нативных игр на Objective-C.

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

Но такие прелести уже не бесплатны, ImpactJS стоит $99 USD. Но, если всё взвесить, то я думаю эта сумма отобьётся и оправдается после 1-2 проданных игр.

Сам я опыта с импактом не имел, но на вид он мне нравится.

Преимуществом фреймворка CreateJS является то, что он достаточно унифицирован под браузеры и его поддерживают Adobe пр., т.е. это некая гарантия (наверно), что фреймворк будет обновляться и выдавать минимум багов в бразуерах. Хотя мы то с вами знаем, что поддержка Adobe ничего не значит)

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

Беспрепятственное встраивание любого API, ads и пр.

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

Парадигма «конструктора без кода», например, мне, как программисту, не нравится, т.к. я могу не мало потерять в гибкости своей программы на разных этапах. Представьте, что вы делали игру месяц, идёт процесс продажи вы уже договорились со спонсором, нужно встроить его API в игру и тут вы понимаете, что фиг его знает как встроить API на js в этом конструкторе.

Теперь рассмотрим на чём можно делать HTML5 3D игры.

Unity 5 — один из лучших движков для создания 2D и 3D-игр так же поддерживает экспорт в HTML5 WebGL.

Я думаю будет не мало Unity WebGL игр на порталах, которые уже начали бодро закупать 3D WebGL. Вы можете попробовать демо-версию Unity WebGL здесь.

Стоимость: Бесплатная / Платная лицензии.

Unreal Engine 4 представляет собой набор интегрированных инструментов для разработчиков игр для разработки и создания игр, он так же, как и Unity, поддерживает экспорт в HTML5 WebGL начиная с версии 4.7.

Стоимость: Бесплатная / Платная лицензии.

Three.js — легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS , SVG или WebGL. Исходный код расположен в репозитории GitHub.
Babylon.js — легковесный кроссбраузерный JavaScript-фреймворк, использующий API WebGL для отображения 2D и 3D-графики в браузере без использования каких-либо сторонних плагинов и дополнений.

Babylon.js использует элемент HTML5 Canvas. Фреймворк распространяется под лицензией Apache 2. Исходный код расположен на GitHub.

Фреймворк был разработан Дэвидом Катушем (David Catuhe), Дэвидом Руссе (David Rousset), Пьером Ларард (Pierre Lagarde), и Мишель Руссо (Michel Rousseau), а также независимыми сторонними разработчиками.

На тему сравнения Three.js и Babylon.js есть не плохая статья на хабре: Игровой мир WebGL или Three.js vs Babylon.js.

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

Для себя я выбрал Phaser для создания 2D HTML5 игр. А для 3D HTML5 я бы взял Unity.

Please verify you are a human

Access to this page has been denied because we believe you are using automation tools to browse the website.

This may happen as a result of the following:

  • Javascript is disabled or blocked by an extension (ad blockers for example)
  • Your browser does not support cookies

Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking them from loading.

Reference ID: #b6bb71f0-0666-11ea-843c-73d93b414245

Suvitruf’s Blog :: Gamedev suffering

Блог о разработке игр и серверных технологиях

HTML5 CANVAS: игра Lines

Lines (Color Lines, в народе Шарики) — логич. компьютерная игра, изобретённая в 1992 году.

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

Ради интереса решил сделать что-то подобное, используя элемент Canvas в HTML5.

Игра будет состоять из 2-х файлов: сама страница html и файл логики игры.

Содержимое html файла выглядит приблизительно так:

В общем-то большая часть работы ведётся во втором файле. Он состоит из метода инициализации игры:

Ну и, собственно, класс, отвечающий за логику игры:

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

Игра Танки Канвас

«Танки Канвас» — многопользовательская онлайн игра, посвященная танковым сражениям. Основана на технологиях Canvas, WebGL и другие. Побеждайте игроков со всех стран мира. В игре существует 4 команды, имеющие свой собственный цвет. Каждая команда имеет по 3 игрока, которые соответственно имеют по 3 танка одного цвета. Команда, которая первой уничтожит 32 вражеских танка — выиграет этап битвы. Поле боя представляет собой квадратную карту с стенами синего цвета, которые установлены по всей карте. Они служат игрокам в качестве укрытия и определяют границы базы каждой из команд игроков. Боевые машины имеют красивый вид с ярко выделенной цветовой окраской. Во время боя нужно активно двигаться и маневрировать, чтобы избежать получения урона. Следите за полосой жизни вашего танка и постарайтесь выжить, уничтожив при этом как можно больше танков вражеских команд. Используйте бонусы, лежащие на карте, такие как: красные снаряды, ремонт и временная защита. Играйте в «Танки Канвас», побеждайте врагов и весело проводите время!

Похожие игры:

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

На чём делать HTML5 игры?

С уходом Flash из браузеров необходимость делать браузерные игры на чём-то другом возросла чуть больше чем полностью. В технологиях альтернативы нет, она одна — HTML5 технология.

И для того чтобы начать делать HTML5 игры, хорошо бы сначала выбрать средство для этого, благо что выбор в HTML5 движках и фреймворках для игр имеется)


Сначала рассмотрим HTML5 движки и фреймворки хорошо подходящие для создания 2D игр, а потом рассмотрим для 3D.

Стоит рассказать про технологии рендера HTML5, их две: canvas и WebGL. Суть разницы: canvas — это для отображения 2D и работает без проблем практически во всех браузерах, а WebGL — это для рендера 3D и может работать не во всех браузерах.

Для HTML5 2D пару лет назад было очень важно чтобы движок умел рендерить в canvas, а не только в WebGL, т.к. порталы игр брали игры только на canvas. Но сейчас ситуация меняется и WebGL становится более обыденным и показателем большой скорости рендера в сравнение с canvas. Но если вы делаете 2D HTML5 игру, то на всякий случай она должна уметь рендериться в canvas — вдруг спонсор не захочет WebGL.

На просторах инета я нашёл вот такую таблицу популярности HTML5 2D движков: https://html5gameengine.com

Коротко рассмотрю топ из этой таблицы в своём порядке)

Основной фишкой PixiJS является скорость рендера. Авторы утверждают, что на данный момент это самый быстрый движок рендеринга 2D. В основном используется WebGL рендер везде где это возможно и лишь для старых браузеров автоматически включается рендер в canvas.

На оф. сайте есть кучка примеров и документация.

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

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

Если же вы хотите, чтобы такие базовые вещи были уже сразу из коробки, то прошу к ознакомлению с Phaser-ом.

Phaser — HTML5 игровой движок с открытым исходным кодом. Он хорошо поддерживается Ричардом Дэви и сообществом вокруг него. Для рендера используется PixiJS, так что он может рендерить в canvas или webGL по выбору и за скорость можно не беспокоиться.

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

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

Есть готовые шаблоны в MS Visual Studio для новых проектов Phaser с использованием языка TypeScript.

Я выбрал этот движок после долгих раздумий между CreateJS, PixiJS и Phaser и остался доволен. После Haxe+OpenFL пришло приятное ощущение, что я занимаюсь разработкой игры, а не костылями для разработки игры) Я сразу решил использовать TypeScript и был приятно удивлён, что в MSVS есть готовые шаблоны проектов.

ImpactJS занимает топовые места рейтинга HTML5 Canvas Game Engine с самого 2010 года, когда он и появился на публике. Это игровой движок на JavaScript. Поставляется вместе с Ejecta Framework, который помогает публиковать игры на iOS и tvOS. Ejecta берет исходники в js и компилит его под OpenGL. По словам разработчиков игры не будут отличаться от нативных игр на Objective-C.

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

Но такие прелести уже не бесплатны, ImpactJS стоит $99 USD. Но, если всё взвесить, то я думаю эта сумма отобьётся и оправдается после 1-2 проданных игр.

Сам я опыта с импактом не имел, но на вид он мне нравится.

Преимуществом фреймворка CreateJS является то, что он достаточно унифицирован под браузеры и его поддерживают Adobe пр., т.е. это некая гарантия (наверно), что фреймворк будет обновляться и выдавать минимум багов в бразуерах. Хотя мы то с вами знаем, что поддержка Adobe ничего не значит)

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

Беспрепятственное встраивание любого API, ads и пр.

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

Парадигма «конструктора без кода», например, мне, как программисту, не нравится, т.к. я могу не мало потерять в гибкости своей программы на разных этапах. Представьте, что вы делали игру месяц, идёт процесс продажи вы уже договорились со спонсором, нужно встроить его API в игру и тут вы понимаете, что фиг его знает как встроить API на js в этом конструкторе.

Теперь рассмотрим на чём можно делать HTML5 3D игры.

Unity 5 — один из лучших движков для создания 2D и 3D-игр так же поддерживает экспорт в HTML5 WebGL.

Я думаю будет не мало Unity WebGL игр на порталах, которые уже начали бодро закупать 3D WebGL. Вы можете попробовать демо-версию Unity WebGL здесь.

Стоимость: Бесплатная / Платная лицензии.

Unreal Engine 4 представляет собой набор интегрированных инструментов для разработчиков игр для разработки и создания игр, он так же, как и Unity, поддерживает экспорт в HTML5 WebGL начиная с версии 4.7.

Стоимость: Бесплатная / Платная лицензии.

Three.js — легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS , SVG или WebGL. Исходный код расположен в репозитории GitHub.
Babylon.js — легковесный кроссбраузерный JavaScript-фреймворк, использующий API WebGL для отображения 2D и 3D-графики в браузере без использования каких-либо сторонних плагинов и дополнений.

Babylon.js использует элемент HTML5 Canvas. Фреймворк распространяется под лицензией Apache 2. Исходный код расположен на GitHub.

Фреймворк был разработан Дэвидом Катушем (David Catuhe), Дэвидом Руссе (David Rousset), Пьером Ларард (Pierre Lagarde), и Мишель Руссо (Michel Rousseau), а также независимыми сторонними разработчиками.

На тему сравнения Three.js и Babylon.js есть не плохая статья на хабре: Игровой мир WebGL или Three.js vs Babylon.js.

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

Для себя я выбрал Phaser для создания 2D HTML5 игр. А для 3D HTML5 я бы взял Unity.

Разработка 2D-игр на HTML5: Игра Snail Bait

Первый опыт разработки платформера

Описание: В предлагаемом цикле статей знаток HTML5 Дэвид Гири шаг за шагом демонстрирует процесс создания 2D-видеоигры на HTML5. В этой первой статье демонстрируется готовая игра, а затем начинается ее разработка с нуля. Этот цикл статей ― для тех, кто хотел бы создать игру на HTML5, но не нашел времени, чтобы разобраться во всех деталях.

Дата: 08.02.2013
Уровень сложности: средний
Активность: 3037 просмотров
Комментарии:

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

Компьютерные игры-платформеры

Данки Конг, Братья Марио, Ежик Соник и Хитросплетение ― все эти широко известные, популярные игры представляют собой платформеры. Одно время на долю платформеров приходилось до трети всех продаж видеоигр. Сегодня их доля рынка существенно уже, но успешных платформеров все еще много.

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

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

Видеоролик «Об этом цикле статей» ― вот расшифровка стенограммы.

В этом цикле статей я покажу, как создать видеоигру-платформер, главным образом с помощью API Canvas HTML5. Это игра Snail Bait (средство от улиток), которая показана на рисунке 1. В нее можно поиграть в онлайне (см. ссылку в разделе Ресурсы). Убедитесь, что ваш браузер поддерживает аппаратное ускорение Canvas (оно совсем недавно реализовано в большинстве браузеров, в том числе в Chrome, начиная с версии 18); в противном случае Snail Bait будет работать крайне медленно. (См. боковик Производительность HTML5 Canvas.)

Технологии HTML5, используемые в Snail Bait

  • Canvas (2D API)
  • Управление синхронизацией в анимациях на основе сценариев
  • Звук
  • CSS3 (переходы и обращение к устройствам)

Snail Bait представляет собой классический платформер. Персонаж, которого я буду называть просто бегун, бежит и скачет между плавучих платформ, которые движутся горизонтально. Конечная цель бегуна ― добраться до пульсирующей платформы с золотой кнопкой в конце уровня. Бегун, пульсирующая платформа и золотая кнопка показаны на рисунке 1.

Игрок управляет бегуном с клавиатуры: клавиша d перемещает его влево, клавиша k ― право, клавиши j и f заставляют подпрыгнуть, а клавиша p приостанавливает игру.

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

Для управления видеоиграми часто используют клавиши w, a, s и d. Это соглашение появилось главным образом потому, что оно позволяет правшам использовать мышь и клавиатуру одновременно. К тому же правая рука остается свободной для нажатия пробела или клавиш-модификаторов, таких как CTRL и ALT. Snail Bait не использует WASD, потому что не принимает сигналы от мыши и клавиш-модификаторов. Но код игры легко изменить так, чтобы использовать любую комбинацию клавиш.


Монстры в основном просто висят и ждут, пока бегун натолкнется на них. Однако улитка периодически бросается ядрами (серебряное ядро вблизи центра на рисунке 1). Эти ядра, как и монстры, взрывают бегуна, когда настигают его.

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

Чего не видно на рисунке 1, так это того, что всё — за исключением бегуна, чьим движением вы управляете, — постоянно движется. Это движение делает Snail Bait не просто платформером, а сайд-скроллером. Однако не только это движение в игре привело меня к спрайтам и их манипуляторам.

Производительность Canvas HTML5

Не так давно в большинстве браузеров появилось аппаратное ускорение CSS-переходов, но для Canvas это еще не сделано. Canvas всегда работал относительно быстро, особенно по сравнению с другими графическими системами, такими как Scalable Vector Graphics (SVG), но без аппаратного ускорения Canvas далеко до того, что имеет поддерживает такое ускорение.

Теперь все современные браузеры аппаратно ускоряют элементы Canvas. Это делает даже iOS 5, что означает, что видеоигры с гладкой анимацией на основе Canvas теперь возможны не только на ПК, но и на мобильных устройствах Apple.

За исключением фона, все в Snail Bait представляет собой спрайты. Спрайт — это объект, который можно нарисовать на холсте игры. Спрайты просты в реализации, хотя и не являются частью API Canvas. Вот спрайты игры:

  • платформы (неодушевленные объекты);
  • бегун (персонаж);
  • пчелы и летучие мыши (монстры);
  • кнопки (полезные предметы);
  • рубины и сапфиры (полезные предметы);
  • монеты (полезные предметы);
  • улитка (монстр);
  • ядра улитки (вредные предметы).

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

Replica Island

Идея поведения спрайтов — которая служит примером модели проектирования «Стратегия» — исходит от Replica Island, популярного платформера с открытым исходным кодом для Android. Большинство графики Snail Bait взято из Replica Island (используется с разрешения). См. в разделе Ресурсы ссылку на статью Википедии о модели проектирования «Стратегия» и на главную страницу проекта Replica Island.

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

Каждый спрайт имеет свой набор манипуляторов. Манипулятор — это просто объект с методом execute() . В каждом кадре анимации игра вызывает метод execute() каждого манипулятора. В этом методе манипуляторы определенным образом управляют соответствующими спрайтами в зависимости от условий игры. Например, при нажатии клавиши k для перемещения бегуна вправо манипулятор бегуна горизонтальное перемещение последовательно перемещает бегуна вправо в каждом кадре анимации до тех пор, пока вы не измените направление. Другой манипулятор ― бег на месте ― периодически изменяет изображение бегуна, имитируя бег на месте. В совокупности эти два манипулятора производят впечатление бега влево или вправо.

В таблице 1 перечислены спрайты игры и соответствующие манипуляторы (поведение).

Таблица 1. Спрайты и манипуляторы Snail Bait

Спрайт Поведение
Платформы
  • Перемещаются горизонтально (все спрайты, за исключением бегуна и ядер улитки, движутся синхронно с платформами)
Бегун
  • Бег на месте
  • Горизонтальное перемещение
  • Прыжок
  • Падение
  • Столкновение с монстрами/вредными предметами и взрыв
  • Столкновение с полезными предметами и получение очков
Пчелы и летучие мыши (монстры)
  • Парят
  • Машут крыльями
Кнопки
  • Снуют
  • Лопаются
  • Взрывают монстров или завершают уровень.
Монеты, рубины и сапфиры
  • Сверкают
  • Подпрыгивают
  • Снуют
Улитки
  • Снуют
  • Бросают ядра
Ядра улиток
  • Движутся вправо и влево (быстрее, чем платформы)
  • Сталкиваются с бегуном и исчезают

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

Объект runInPlace определяется и передается конструктору спрайта бегуна вместе с другими манипуляторами. Пока тот бежит, игра в каждом кадре анимации вызывает метод execute() объекта runInPlace .

Свободно доступные ресурсы

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

В Snail Bait используются:

  • звуковые эффекты из freesound.org;
  • саундтрек из soundclick.com;
  • спрайт бегуна из panelmonkey.org (сайт взломан);
  • вся остальная графика из Replica Island.

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

Я рассмотрю эту пятерку рекомендаций подробно в последующих статьях цикла; пока же вкратце пробежимся по каждому из них.

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

Когда окно игры вновь восстанавливает фокус, полезно предоставить пользователю несколько секунд на подготовку к игре. В игре Snail Bait, когда окно восстанавливает фокус, начинается обратный отсчет трех секунд, как показано на рисунке 3.

На рисунке 4 приведен скриншот, сделанный после загрузки игры.

На рисунке 4 надо отметить три вещи. Во-первых, это надпись Good luck! (Удачи!), которая на короткое время демонстрируется игроку. Она тускнеет в процессе загрузки игры и через пять секунд исчезает. Во-вторых, обратите внимание на флажки (для отключения звука и музыки) и инструкции (указывающие, какие клавиши какие функции выполняют) под холстом игры. Когда игра начинается, флажки и инструкции хорошо видны, как на рисунке 4; когда же игра начинается, эти элементы медленно тускнеют, пока на становятся едва заметны (как показано на рисунке 3), чтобы не отвлекать игрока.

Snail Bait затемняет элементы и гасит надписи с помощью переходов CSS3.

В отличие от консольных игр, которые выполняются в жестко контролируемой среде, среда игр HTML5 переменчива, непредсказуема и хаотична. Нередко игра работает недопустимо медленно, так как пользователь воспроизводит видео YouTube в другой вкладке или еще как-нибудь перегружает ЦП или графический процессор. И всегда есть вероятность того, что игрок будет использовать браузер, который «не тянет».

Разработчик игр должен предвидеть эти неблагоприятные условия и соответственно реагировать на них. Snail Bait постоянно контролирует частоту кадров, и когда она опускается ниже определенного порога много раз и на много секунд, отображает сообщение о медленной работе игры, показанное на рисунке 5.

Почти все популярные игры включают социальные аспекты, такие как размещение счета в Twitter или Facebook. Когда игрок Snail Bait щелкает на ссылке Tweet my score, которая появляется в конце игры (см. рисунок 2), Snail Bait открывает Twitter в отдельной вкладке и автоматически создает твит с объявлением счета, как показано на рисунке 7.

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

Статистика кода Snail Bait

Число строк кода:

Игра Snail Bait реализована на базе HTML, CSS и JavaScript; как видно из врезки Статистика кода Snail Bait, большая часть кода ― это JavaScript. Остальные статьи этого цикла посвящены главным образом JavaScript ― с отдельными вылазками в сторону HTML и CSS3.

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

Код CSS в основном ничем не примечателен, за исключением нескольких интересных атрибутов, которые я подчеркнул на рисунке 8. Во-первых, я установил значение 0 auto атрибута margin элемента wrapper , что означает, что оболочка и все, что внутри нее, центрируется в окне по горизонтали. Во-вторых, положение элементов lives и sound-and-music имеет значение absolute . Если оставить значение по умолчанию relative , то эти элементы DIV развернутся до ширины холста и заслонят своих соседей (счет и инструкции соответственно). Наконец, классы CSS keys и explanation имеют атрибут inline , чтобы соответствующие элементы размещались в той же строке.

В листинге 2 показан код CSS, соответствующий рисунку 8.

Как видно из листинга 3, который содержит код HTML, соответствующий рисунку 8, HTML-код игры ― это набор элементов DIV и холстов с несколькими изображениями и парой флажков.

Элемент canvas ― это место, где происходит все действие. Холст содержит 2D-контекст с мощным API для реализации 2D-игр и прочих вещей. Текст внутри элемента canvas представляет собой страховочный текст, который браузер отображает только в том случае, если он не поддерживает Canvas HTML5.

Одно заключительное замечание о коде HTML и CSS игры: обратите внимание, что ширина и высота холста указывается атрибутами элемента canvas width и height . Эти атрибуты относятся как к размеру элемента canvas , так и к размеру поверхности рисунка, содержащейся в этом элементе.

С другой стороны, размер элемента canvas можно установить, только используя CSS для задания его ширины и высоты. Поле рисунка сохраняет свою ширину и высоту по умолчанию в 300 и 150 пикселей соответственно. Это означает, что соответствия между размером элемента canvas и размером поля его рисунка, скорее всего, не будет, и браузер изменит масштаб поля рисунка под размер элемента. Чаще всего это нежелательно, поэтому лучше задать размер элемента canvas с помощью CSS.

Рисовать на меньшем холсте, и пусть CSS увеличит его?


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

Итак, как в лучших кинофильмах, таких как Криминальное чтиво, конец истории вы уже знаете. Теперь обратимся к ее началу.

На рисунке 9 показана отправная точка игры, где просто вырисовывается фон, платформы и бегун. Сначала платформы и бегун не являются спрайтами; игра вырисовывает их непосредственно. См. раздел Загрузка с кодом, который создает фон и бегуна.

В листинге 3 приведена отправная точка HTML-кода игры, который представляет собой просто усеченную версию HTML-кода из листинга 2.

В листинге 4 показан код JavaScript.

Сценарий JavaScript обращается к элементу canvas и получает ссылку на 2D-контекст холста. Затем код использует метод контекста drawImage() для рисования фона и бегуна. В данном случае я использую вариант с тремя аргументами метода drawImage() , чтобы нарисовать изображения в определенном месте холста (x, y) .

Функция drawPlatforms() изображает платформы, вырисовывая и заполняя прямоугольные контуры после установки ширины линии, стиля обводки, стиля заливки и глобального альфа-атрибута контекста. Обратите внимание на вызовы методов context.save() и context.restore() : настройки атрибутов между этими вызовами ― временные. Мы поговорим об этих методах в следующей статье.

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

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

Описание Имя Размер Метод загрузки
Код фона и персонажа Snail Bait j-html5-game1.zip 718 КБ HTTP

Core HTML5 Canvas: (David Geary, Prentice Hall, 2012): широкий обзор API Canvas и разработки игр в книге Дэвида Гири. Посетите также сопутствующий Web-сайт и блог.

Snail Bait: играйте в Snail Bait в онлайне на любом браузере с поддержкой HTML5 (лучше всего подойдет Chrome версии 18 и выше).

Умопомрачительные приложения с применением Canvas HTML5: выступление Дэвида Гири на конференции Strange Loop-2011.

Разработка 2D в HTML5: выступление Дэвида Гири на конференции норвежских разработчиков NDC-2011.

Платформеры: читайте о платформерах в Википедии.

Сайд-скроллеры: читайте о сайд-скроллерах в Википедии.

Стратегия: статья в Википедии о данной модели проектирования.

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

Основы HTML5: познакомьтесь с основами HTML5 на этом «пути к знаниям» developerWorks.

Дэвид Гири (David Geary), автор книги Core HTML5 Canvas, является также сооснователем группы пользователей HTML5 Денвера и автором восьми книг по Java-программированию, в том числе бестселлеров по Swing и JavaServer Faces. Дэвид часто выступает на конференциях, в том числе JavaOne, Devoxx, Strange Loop, NDC и OSCON, и трижды заслужил титул «рок-звезды JavaOne». Для developerWorks он написал циклы статей JSF 2 fu и GWT fu. За новостями Дэвида можно следить в Twitter: @davidgeary.

Логическая игра с использованием элемента HTML5 canvas

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

Игра называется «Выключатель» и навеяна оригинальной версией для iPhone. Цель игры — выключить все лампочки, нажимая на них. При этом соседние лампочки переключают свое состояние. Довольно занимательная логическая головоломка.

HTML/CSS

Разметка для нашей игры будет весьма незатейлива. Элемент в контейнере и простые стили.

Ниже представлено несколько рисунков, которые описывают идею игры.

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

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

В завершении создаем стартовую позицию.

JavаScript

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

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

Очень важная функция — вывод панели.

Так как элемент не обновляется после перерисовки, нам придется вручную очищать его специальным методом clear:

Готово!

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.marcofolio.net/webdesign/lights_off_a_puzzle_game_using_html5_canvas.html
Перевел: Сергей Фастунов
Урок создан: 1 Августа 2011
Просмотров: 30259
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

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

Цукерберг рекомендует:  C# - Как в массив сохранить множество значенийC#
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих