html5

Canvas - line, рисуем линии


Canvas - line, рисуем линии

В данной статье я напишу как в элементе Canvas рисовать линии. Для того чтобы создать линию мы будем использовать методы moveTo(), lineTo(), и stroke().

Рисование линий (Draw Line)

function drawScene()
{
   var web_canvas = document.getElementById('drawScene');
   var web_context = web_canvas.getContext('2d');
   web_context.beginPath();
   web_context.moveTo(40,80);
   web_context.lineTo(40,200);
   web_context.lineTo(260,200);
   web_context.lineTo(260,80);
   web_context.stroke();
}

В результате мы получим:

Теги

Canvas - arc, рисуем дуги


Canvas - arc, рисуем дуги.

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

Arc

Теги

О языках программирования


О языках программирования

Основные сайты создаются с помощью таких языков программирования как HTML(HyperText Markup Language), CSS(Cascading Style Sheets)..


Язык программирования HTML - будет отвечать за структуру сайта. CSS - дает нам возможность контролировать внешний вид сайта, а Javascript или сокращенно JS - будет обеспечивать за функциональность сайта. Но также есть еще два вида языка программирования для создания сайта PHP(Personal Home Page Tools) и MySQL(База данных).

Теги

Фронтенд и бэкенд: в чем разница?


Фронтенд и бэкенд: в чем разница?

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


Фронтенд и бэкенд: основное отличие

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

Теги

Урок 1 — первый проект на phaser


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

Фреймворк Phaser.js создан для удобной, кроссбраузерной разработки игр с помошью Html 5. Это как бы дальнейшая разработка pixi.js(Библиотека для рендеринга WebGL). Этот фреймворк изначально был разработан для того, чтобы проекты, созданные с его помошью, было удобно запускать на мобильных устройствах. Для запуска проектров, написанных на этом фреймворке, нужно, чтобы браузер устройства поддерживал canvas.

HTML 5 Разработка игр - Урок 7


Оригинал статьи

Сегодня мы создадим первую полноценную игру - арканоид. В этом уроке я покажу вам, как определять базовые столкновения и работу с локальным хранилищем HTML5 (local storage). Вы сможете управлять площадкой с помощью мыши и клавиатуры(вправо/влево).

Тут вы сможете прочитать предыдущий урок - Урок 6.

Вот демо и архив.

HTML 5 Разработка игр - Урок 6


Оригинал статьи

Это следующая статья по разработке игр. Мы продолжаем серию статьей о создании игр в HTML5 с использованием canvas. Сегодня вполне полноценная игра пример - это будет реинкарнация старой компьютерной игры - Battle City. Я научу вас использовать массив карт плюс я покажу как обнаружить столкновение объекта(танк) с окружающей средой(массив на основе карт).

HTML 5 Разработка игр - Урок 5


HTML 5 Разработка игр - Урок 4


Оригинал статьи

Сегодня мы продолжаем серию статьей о создании игры в HTML 5 с использованием canvas. Сегодня мы будем изучать следующие элементы: анимацию спрайтов и работа со звуком. В нашей демо вы уведите летящего дракона. Мы постоянно будем слышать звук крыльев (мы зациклим этот звук), а другой звук - рев дракона (мы услышим по событию MouseUp). И наконец мы научим дракона подлетать к мыши (при нажатой кнопки мыши).

HTML 5 Разработка игр - Урок 3


Оригинал статьи

Сегодня мы продолжаем серию статьей о создании игры в HTML5 с использованием canvas. Сегодня, наконец, мы начнем добавлять анимацию и еще несколько интересных возможностей. Наш пример будет включать в себя полет космического корабля через пространство, и новый элемент Dialogue (диалоговое окно). В диалоговом окне будет 2 страницы + возможность скрыть диалог на второй клик.