Скрипт для полноэкранных игр HTML
Как работает увеличение игр html, можно посмотреть здесь на сайте, включив какую либо игру HTML или посмотреть картинки ниже
Сразу выложу этот скрипт, разместить его можно в любом месте страницы с игрой, перед закрывающимися тегами "head" или "body".
Главное не забыть, один раз, вписать в этот код название тега ID, в моём случае это тег id="iframe"
function full_screen() {
// проверьте, разрешает ли пользователь полный экран элементов. Это можно включить или отключить в конфигурации браузера. По умолчанию он включен.
//он также используется для проверки того, поддерживает ли браузер полноэкранный API.
if ("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || "mozFullScreenEnabled" in document || "msFullscreenEnabled" in document) {
if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
console.log("User allows fullscreen");
var element = document.getElementById("iframe");
//requestFullscreen используется для отображения элемента в полноэкранном режиме.
if ("requestFullscreen" in element) {
element.requestFullscreen();
} else if ("webkitRequestFullscreen" in element) {
element.webkitRequestFullscreen();
} else if ("mozRequestFullScreen" in element) {
element.mozRequestFullScreen();
} else if ("msRequestFullscreen" in element) {
element.msRequestFullscreen();
}
}
} else {
console.log("User doesn't allow full screen");
}
}
function screen_change() {
//fullscreenElement назначается элементу html, если какой-либо элемент находится в полноэкранном режиме.
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
console.log("Current full screen element is : " + (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement))
} else {
//exitFullscreen используется для выхода из полноэкранного режима вручную.
if ("exitFullscreen" in document) {
document.exitFullscreen();
} else if ("webkitExitFullscreen" in document) {
document.webkitExitFullscreen();
} else if ("mozCancelFullScreen" in document) {
document.mozCancelFullScreen();
} else if ("msExitFullscreen" in document) {
document.msExitFullscreen();
}
}
}
//вызывается, когда событие переходит в полноэкранный режим и наоборот.
document.addEventListener("fullscreenchange", screen_change);
document.addEventListener("webkitfullscreenchange", screen_change);
document.addEventListener("mozfullscreenchange", screen_change);
document.addEventListener("MSFullscreenChange", screen_change);
//вызывается, когда requestFullscreen(); терпит неудачу. это может привести к сбою, если у iframe не включен атрибут allowfullscreen или что-то еще.
document.addEventListener("fullscreenerror", function() {
console.log("Full screen failed");
});
document.addEventListener("webkitfullscreenerror", function() {
console.log("Full screen failed");
});
document.addEventListener("mozfullscreenerror", function() {
console.log("Full screen failed");
});
document.addEventListener("MSFullscreenError", function() {
console.log("Full screen failed");
});

Изображения игры при увеличении




Саму кнопку увеличения можно подключить в любом месте страницы. Использовать можно любую подходящую Вам кнопку, всего лишь добавив к ней такой класс
onclick="full_screen();"
Готовый пример для ознакомления можно скачать по прямой ссылке с сайта:
скачать zip архив 3,8 кб
Источник
Оценить статью
