--- title: Уроки slug: Games/Tutorials tags: - Canvas - Games - JavaScript - NeedsTranslation - TopicStub - Tutorial - Web - Workflows - Игры - уроки translation_of: Games/Tutorials --- <div>{{GamesSidebar}}</div> <div>{{IncludeSubnav("/en-US/docs/Games")}}</div> <p>Эта страница содержит несколько серий уроков, в которых освещаются различные рабочие процессы для эффективного создания разных типов веб-игр.</p> <dl> <dt><a href="/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript">2D игра Breakout на чистом JavaScript</a></dt> <dd>В этом пошаговом руководстве вы сможете реализовать простой клон игры Breakout с использованием чистого JavaScript. Попутно вы узнаете основы использования элемента {{htmlelement ('canvas')}} для реализации фундаментальной игровой механики, такой как рендеринг и движущиеся изображения, обнаружение столкновения, механизмы управления и выигрышные и проигрышные состояния.</dd> <dt><a href="/en-US/docs/Games/Workflows/2D_breakout_game_Phaser">2D-игра Breakout с использованием Phaser</a></dt> <dd>В этом пошаговом руководстве вы будете использовать тот же самый клон Breakout, что и предыдущая серия уроков, за исключением того, что на этот раз вы сделаете это, используя HTML5 игровой фреймворк<a class="external external-icon" href="http://phaser.io/">Phaser</a>. Идея состоит в том, чтобы научить некоторым основам (и преимуществам) работы с фреймворками наряду с фундаментальной игровой механикой.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation">2D-игра Лабиринт с применением ориентации устройства</a></dt> <dd>В этом учебном пособии показано, как создать 2D-игру Лабиринт с использованием HTML5, включая основы, такие как обнаружение столкновения и размещение спрайтов на {{htmlelement ('canvas')}}. Это мобильная игра, в которой используются <strong>API </strong><a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">Ориентация устройства</a> и <a href="/en-US/docs/Web/Guide/API/Vibration">Вибрация </a>для улучшения игрового процесса и построенная с использованием фреймворка <a href="http://phaser.io/">Phaser</a>.</dd> <dt><a href="https://mozdevs.github.io/html5-games-workshop/en/guides/platformer/start-here/">2D-игра платформер с использованием Phaser</a></dt> <dd>В этой серии уроков показано, как создать простую платформенную игру с использованием <a href="http://phaser.io/">Phaser</a>, освещаются такие основы, как спрайты, столкновения, физика, коллекции и многое другое.</dd> </dl>