20.10.2019

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

Spread the love
  •  
  •  
  •  
  •  
  •  

Публикую перевод с разрешения автора.

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

Сегодня мы продолжим серию статьей о создании игры в HTML5. Сегодня мы продолжим основы(продвинутые основы). Я собираюсь показать вам, как заполнять объекты градиентом, рисовать текст, использовать нестандартные шрифты для вывода текста, создание базовой анимации, и самое главное — ui (элемент пользовательского интерфейса) элемент Кнопка(Button).

Предыдущие статьи вы можете прочитать здесь. Урок 1

Я буду работать с предыдущим скриптом — мы будем дополнять его. Я собираюсь нарисовать текст, используя специальный шрифт, анимационный объект (квадрат), заполненный градиентом и кнопку «Воспроизведение/пауза» для анимации.

Шаг 1. HTML

Ниже представлен HTML код примера.

index.html

Шаг 2.CSS

Ниже CSS стили использованные в примере

CSS / main.css

Обратите внимание на ‘@font-face’. С помощью этого способа мы связали файл шрифта(ttf) с нашим примером(для рисования на canvas).

Шаг 3. JS

js/jquery-1.5.2.min.js

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

JS / script.js

Вот несколько пояснений о новых функциях. 1. Мы можем нарисовать шрифт(пользовательский шрифт) используя следующий код:

Вот несколько пояснений о новых функциях. 1. Мы можем нарисовать шрифт(пользовательский шрифт) используя следующий код:

2. Применение градиента к объекту.

3. Кнопка состояния — я использовал один спрайт со всеми 3 состояниями кнопки. Также я добавил обработчики событий при наведении/нажатии. Вот способ загрузки и рисования изображения на canvas.

0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *