HTML 5

Безопасность HTML5 (HTML5 Security)

Сегодня стандарт разработки web-страниц HTML5 уже начал распространятся повсеместно. Многие старые сайты переписываются с учетом нового стандарта HTML5. Но появляются с этим и новые уязвимости... И это не радует... Хотя может, кого-то и радует :-) Сегодня я напишу только обзорную статью с ссылками на материалы по безопасности HTML5 (HTML5 Security). Дальше будут исследования и я надеюсь публикация в моем блоге... Ждите и пишите комменты!...

Методы и свойства Canvas API для начинающих

Сегодня пробежимся почти по всем методам Canvas API. Эта статья скорее справочная и для начинающих.

Вначале нам нужно получить объект Canvas, для этого определён метод getContext().
 

<canvas id="canvas" width="300" height="100"></canvas>

<script type="text/javascript">

var canvas = document.getElementById('canvas'); // получаем элемент
var cnv = canvas.getContext('2d'); // получаем объект canvas

</script>

И теперь мы можем начать работать с объектом Canvas ctx.
 

Проверка на столкновения Прямоугольник - Прямоугольник на JavaScript

Сегодня будет просто небольшая заметка для разработчиков на JavaScript. Проверку на столкновения можно использовать почти во всех HTML5 играх. Сегодня будет пример определения соприкосновений Прямоугольник - Прямоугольник...

Эта функция написана на JavaScript, но может использоваться почти в любых ситуациях

Нестандартные шрифты в HTML 5 и CSS 3

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

Основу использования нестандартного шрифта составляет такой код CSS:

Анимация воды, куба и шара с помощью WebGL

На сайте madebyevan.com/webgl-water/ вы увидите небольшой резервуар с водой и плавающим в ней шариком. Все это сделано на WebGL Water. Там можно крутить камеру мышкой, включать и выключать гравитацию, менять источник света, ставить на паузу анимацию. Воды можно касаться, и на ней, как и в реальной жизни, будут оставаться круги. А если открыть исхождники, то можно поизучать их... )) Даже тиснуть пару идей для своих Web-проектов.

Создаем персонажа в игре на HTML 5. Создаем игру. Часть 3

Сегодня мы создадим врага для нашего персонажа (синего квадрата :) и оживим его. Начало тут и тут. Файл index.html мы трогать не будем. Будем дополнять файл game.js, который находится у нас в папке js. Заставим врага двигаться справа налево по координате X и исчезать, если он дошел до конца.

Создаем персонажа в игре на HTML 5. Создаем игру. Часть 2

Сегодня мы рассмотрим движение нашего персонажа (синего прямоугольника :). Начало тут Создаем игру. Часть 1. Файл index.html мы трогать не будем. Все будем писать в файле game.js, который находится у нас в папке js. Добавим в игру параметр скорость и с помощью jQuery сделаем реакцию на события клавиатуры (onKeypress).
var WIDTH = 640; // Ширина Canvas
var HEIGHT = 480; // Высота Canvas

var WIDTH_HERO = 64; // Ширина персонажей
var HEIGHT_HERO = 64; // Высота персонажей

var textX = 50; // Начальная позиция персонажа

Создаем персонажа в игре на HTML 5. Создаем игру. Часть 1

Сегодня я рассмотрю создание персонажа для игры на HTML 5. Сегодня рассмотрим просто вывод персонажа в окно браузера. Сначала создадим файлы и структуры папок для дальнейшего развития игры. Создаем папки и файлы: img, js, index.html:

img
js
- game.js
- jquery-1.4.2.min.js
index.html
Файл index.html с Canvas, на котором мы будем рисовать и делать игру

canvasExample

canvas{
border: 1px solid black;
}

Игровые движки HTML 5. HTML5 Game Engines

Если Вы хотите начать разработку HTML 5 игр, то сейчас без игровых движков Вам не обойтись... И сейчас их очень много! И это хорошо! :) Есть из чего выбрать и что поизучать... Сегодня начну цикл статей по игровым движкам и как всегда дам необходимые ссылки для самостоятельного изучения... Но статьи будут писаться по мере свободного времени... Надеюсь Вам будет это интересно.
А теперь полезные ссылки сами движки (HTML5 Game Engines):
ImpactJS
Цена: 99$
http://www.impactjs.com

Crafty
Цена: Free
http://www.craftyjs.com

Pixi.js
Цена: Free
http://www.pixijs.com/

Melonjs

Быстрое создание HTML и CSS кода с помощью Zen Coding

Вы задумывались, как сделать свою работу по верстке сайтов более быстрой? Я тоже постоянно об этом думаю :-) Главное в нашем деле продуктивность и быстрота верстки сайта с дизайн-макетов. На это обычно тратится просто уйма времени, еще больше времени тратится на написание кода html и css.
И в последнее время я начал использовать для верстки сайтов - Zen Coding.

RSS-материал