Использование Canvas для рисования и прочего
Великолепным инструментом в HTML5 является Canvas (холст) -- он представляет собой панель, на которой с помощью Javascript можно рисовать что угодно. Холст используется для многого, от игр до оптимизации изображений. В нашем случае мы сосредоточимся на играх, так как это позволит вам креативно подойти к проекту, используя чистый JS. На первый раз вам будет необходимо создать двухмерные игры. Используйте эту силу только в добрых целях...
Пункты для размышления
- Что такое холст?
- Как создать элемент холста?
- Как нарисовать 5-пиксельный черный квадрат с красной окантовкой?
- Как использовать обновление для получения эффекта анимации?
- Как создать мяч, отскакивающий от стенок?
- Как создать два мяча, отскакивающих от стенок и друг от друга?
- Что случится, если вы произведете очень много вычислений, или же будете проводить вычисления слишком часто?
Ваши задания
- Прочтите главы 1-6 в одной из лучших книг по Canvas.
- Просмотрите пособие по играм на HTML5 от html5rocks.com в качестве подготовки к следующему проекту.
Дополнительные ресурсы
Этот раздел содержит полезные ссылки на дополнительные материалы. Это не обязательно, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему
- Главы 7-14 в книге по Canvas повествуют об использовании Canvas для остального (графика, аудио и прочее). Выходит за пределы нашего курса, но было бы неплохо ознакомиться.
- Инструкция по созданию игры от Михала Будзински
- Игра "Змейка" на canvas и jQuery
- Разработка игр на Javascript