Предыдущий ролик Следующий ролик  

Видео урок: Реальный пример: Pirates Love Daisies

HTML5: графика и анимация с Canvas

Ок, следующий пример, который мы рассмотрим, это Pirates Love Daisies. Pirates Love Daisies - это игра, которая была создана при помощи HTML5 canvas и "родных" веб технологий. Возможно, вы уже видели игры подобные этой. Это классическая игра по защите, где вам нужно что-то защищать против волн "плохих парней", возможно, вы знаете такую, где растения воюют против зомби. В данном случае вы пираты, и есть группа морских существ, которые пытаются вас победить и украсть ваши ромашки, вот такая суть игры.

Итак, я иду дальше и просто начинаю игру. Все это сделано при помощи canvas. Итак, я захожу, выбираю карту, а затем нажимаю Play. Вот мои персонажи, я нажимаю на пирата и выбираю для него точку привязки. Вот вы видите, что это мой пират. Теперь я улучшаю Scarlett, и Scarlett быстро избавляется от всех крыс, которые нападают и пытаются забрать мои ромашки. Возможно, я поставлю сюда Inigo. Вы видите, что это довольно продвинутая игра. Она была создана при помощи библиотеки JavaScript, которая называется Easel, Easel.js.

И это довольно милая маленькая игра. Пираты защищают ромашки. И она создана при помощи canvas. Это HTML5 canvas с использованием "родных" веб технологий. Здесь нет Silverlight. Здесь не используется Flash, и это отличный пример того, что можно сделать при помощи canvas.