--- title: Уроки slug: Games/Tutorials tags: - Canvas - Games - JavaScript - NeedsTranslation - TopicStub - Tutorial - Web - Workflows - Игры - уроки translation_of: Games/Tutorials ---
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}

Эта страница содержит несколько серий уроков, в которых освещаются различные рабочие процессы для эффективного создания разных типов веб-игр.

2D игра Breakout на чистом JavaScript
В этом пошаговом руководстве вы сможете реализовать простой клон игры Breakout с использованием чистого JavaScript. Попутно вы узнаете основы использования элемента {{htmlelement ('canvas')}} для реализации фундаментальной игровой механики, такой как рендеринг и движущиеся изображения, обнаружение столкновения, механизмы управления и выигрышные и проигрышные состояния.
2D-игра Breakout с использованием Phaser
В этом пошаговом руководстве вы будете использовать тот же самый клон Breakout, что и предыдущая серия уроков, за исключением того, что на этот раз вы сделаете это, используя HTML5 игровой фреймворкPhaser. Идея состоит в том, чтобы научить некоторым основам (и преимуществам) работы с фреймворками наряду с фундаментальной игровой механикой.
2D-игра Лабиринт с применением ориентации устройства
В этом учебном пособии показано, как создать 2D-игру Лабиринт с использованием HTML5, включая основы, такие как обнаружение столкновения и размещение спрайтов на {{htmlelement ('canvas')}}. Это мобильная игра, в которой используются API Ориентация устройства и Вибрация для улучшения игрового процесса и построенная с использованием фреймворка Phaser.
2D-игра платформер с использованием Phaser
В этой серии уроков показано, как создать простую платформенную игру с использованием Phaser, освещаются такие основы, как спрайты, столкновения, физика, коллекции и многое другое.