20.10.2019

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

Spread the love
  •  
  •  
  •  
  •  
  •  

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

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

Шаг 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 Рисование, анимированного звездного пространства ( сделать довольно просто — мы перемещаем координаты изображения).

Надеюсь что остальной код понятен я добавлял комментарии на важных моментах.

0

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

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