JavaScript fullScreen API. Полноэкранный режим в JS. Основы создания игр на JavaScript

Автор Maksim Inshakov
JavaScript fullScreen API. Полноэкранный режим в JS. Основы создания игр на JavaScript

Всем привет друзья.

Меня зовут сканер и сегодня мы с вами поговорим о полноэкранном режиме джаваскрипт приложение и так за основу. Давайте возьмём на предыдущий урок — это анимация canvas вот вот — это вот персонажа которого мы здесь заминировали и которые у нас точно является canvas элементом в html5 документе и так я за основою возьму, но я сейчас его скопирую другой допустим fullscreen вот так. Открой мне его повторно и вот собственно всё, что мы здесь видео сейчас этот пример для редактирования то здесь в принципе всё довольно просто и.

Понятно Если вы смотрели прошлый урок по анимации персонажа в этом уроке этого не будет.

Мы просто возьмём уже готовый пример и так всё вот — это дело. Но здесь оставляем. Пускай она нас анимируется, а здесь мы с вами можем наблюдать как — это будет у нас разворачиваться в полноэкранный режим на данный момент к сожалению полноэкранный режим реализован не совсем кроссбраузерно то есть нет единой функции для этого все функции используют. Ну — это стандартная префиксы которым я думаю вы все уже привыкли. Это мост для мозилы vipkid соответственно для вырубки — это себе сама префикса и так, что ещё стоит знать вам о полноэкранном режиме полноэкранный режим немой вызван автоматически. То есть он может сработать только если пользователь сделал какое-либо действие например нажатии на кнопку нажать и я допустим на случай нажатии на какой-нибудь элемент мышкой либо же нажатии на клавишу на клавиатуре либо же на любом другом устройстве ввода. То есть допустим написать вызов команды fullscreen на событие onload вашего документа на загрузке вы не можете. Ну точнее написать то конечно можете. Но это. Не сработает и скорее всего у. Вас даже не будет никакой ошибки. Просто не будет ничего и так теперь немного о самом о самой функции и так давайте здесь первоначально в консоль выведен проверку падеж стрелки. Вот соответственно на джаваскрипте на данный момент мы можем — это сделать просто проверить существование подобной функции — это к нашей консоли изолируем такой вот текст. Да мне сейчас не настроены. К сожалению редактор вот так вот документ request Full Screen и посмотрим, что из этого мы здесь можем увидеть консольная крылья видим, что — это у нас всё-таки отдыхаем. Давайте попробуем сделать — это функции посмотрим вот так и так документы request Full Screen у нас is not a function если здесь мы напишем. ВПР незаменим в первую букву большой посмотрим теперь тоже самое то есть как видите такую мы не можем с вами вызвать то есть мне ничего сейчас не видим следующее, что мы можем проверить — это текущий режим работы нашего собственно — это выглядит вот таким вот образом и. Давайте посмотрим, что она у нас здесь вернёт консоль и так она у нас тоже вернула undefined. То есть как вы можете нас здесь он ничего не срабатывает для того чтобы мы могли с вами сейчас воспользоваться именно толстым дном нам придется сделать небольшой поле сил и как он выглядит я вам сейчас покажу и так — это функция выглядит у нас следующим образом то есть эта функция которая называется у нас Launch Screen и принимает один параметр. Это самый элемент. Вы можете любой элемент с экраном режиме то есть. Неважно как будет изображение canvas Element видео или же какой-то другой. Давайте попробуем теперь он запустить в полноэкранном режиме на контекст. В наших отношениях она сканворд и так canvas у нас здесь явно нигде нет отражен поэтому давайте мы здесь его и получит. И так перво-наперво создадим переменную которая у нас будет ничего которая у нас будет являться нашим классом назову canvas и затем после определения телефон. Всё Давайте попробуем запустить. Наш канал с полноэкранном режиме прям напрямую таким вот образом и посмотрим, что из этого получится. Но вот Launch Full Screen у нас is not define то есть такое метод говорит, что он у нас существует так вот за меня и как вы можете видеть, что нас — это сработало, но не может быть запущена так как у нас может быть запущен полноэкранный режим только в том случае если и сам пользователь. Поэтому вот — это вот мы с вами. Давайте новейшую сейчас на событие onclick нашего объекта canvas поэтому сделаем вот так canvas onclick и — это у нас будет функция функция которая у нас будет запускать наш canvas полноэкранном попробуй ещё раз и так я нажимаю и как вы можете видеть — это страницу. У нас теперь отображается в полноэкранном режиме и собственно вот всё действия у нас происходит, но можем перейти обратно в обычный режим. Мама просит. Закрыть окно уведомление и она у нас постепенно исчезнет по нажатию на клавишу esc ты меня есть ли у нас. Всё возвращается на свои места и так вроде бы всё следующее. Что нам может потребоваться — это выход из полноэкранного режима кстати так редактор. У меня пока ещё не настроены давайте я наверное попробую здесь убрать проверку орфографии бла-бла-бла переход документ. Ага проверка орфографии чтобы не было никаких красных палочек вот собственно видим, что Launch Screen у нас отрабатывает отрава по действиям пользователя следующее. Что нам может потребоваться — это выход из полноэкранного режима для выхода из полноэкранного режима вам также требуется сейчас написать. Вот подобный полифилл то есть которые объединены у нас все браузеры V1 и функция будет называться console Full Screen.

0 комментариев
0

Читайте также