20.10.2019

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

Spread the love
  •  
  •  
  •  
  •  
  •  

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

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

Шаг 1. HTML

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

index.html

Шаг 2.CSS

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

CSS / main.css

Сегодня я не буду публиковать стили — это всего лишь страница со стилями, ничего особенного.

Шаг 3. JS

JS / script.js

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

1. Звуковой фон цикл

2. Рисование спрайтов

 

Таким образом загружаем исходное изображение (с множеством всех суб-изображений), а затем отображаем часть этого изображения, со смещением своей позиции, и делаем это еще раз(цикл).

0

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

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