Как сделать игру в полноэкранном режиме?

@Ivan912 · Регистрация: 26.01.2019

Студворк — интернет-сервис помощи студентам

У меня в игре очень много различных элементов кнопок,svg,css.Нужно чтобы при нажатие на кнопку сделать во весь экран все игра становилась в полноэкранном режиме,а при нажатие на кнопку убрать полноэкранный режим игры выходила из него. и это не должно быть симуляции кнопки f11 так как игра в соцсети. Элементы должны увелчиться и встать на теже места относительно полного экрана.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var cvs = document.getElementById("canvas"); // подлкючаем канвас
var ctx = cvs.getContext("2d"); // говорим то что наша игра 2д
 
function v31() { // добавляем картинку 
  var image14 = new Image();
  image14.src = 'https://cdn.pixabay.com/photo/2018/04/23/15/47/wind-mill-3344661_960_720.jpg';
 
  function v34() {
    ctx.drawImage(image14, 0, 0);
  }
  
  image14.onload = v34;
  v34();
}
 
v31();
 
// создаём кнопку и добавляем относительно полотна 
bt10 = document.createElement('BUTTON');
bt10.id = 'cm10';
bt10.textContent = 'сделать во всесь экран ';
document.getElementById("container").appendChild(bt10);
bt10.onclick = function() {}
 
// создаём кнопку и добавляем относительно полотна 
bt12 = document.createElement('BUTTON');
bt12.id = 'cm13';
bt12.textContent = 'убрать полноэкранный режим  ';
document.getElementById("container").appendChild(bt12);
bt12.onclick = function() {}

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
  box-sizing: content-box;
  max-width: 1000px;
  max-height: 675px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
 
#cm10 {
  position: absolute;
  top: 200px;
  left: 300px;
}
 
#cm13 {
  position: absolute;
  top: 200px;
  left: 600px;
}

HTML5
1
2
3
4
<div id='container' class="container">
  <canvas id="canvas" width="1000" height="675"></canvas>
  <!-- полотно где отображается код -->
</div>

@Mr_Sergo · 27.04.2019, 17:56

Ivan912,

https://codepen.io/Mr_Sergo/pen/MRLRwm

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
var cvs = document.getElementById("canvas"); // подлкючаем канвас
var ctx = cvs.getContext("2d"); // говорим то что наша игра 2д
 
function v31() { // добавляем картинку 
  var image14 = new Image();
  image14.src = 'https://cdn.pixabay.com/photo/2018/04/23/15/47/wind-mill-3344661_960_720.jpg';
 
  function v34() {
    ctx.drawImage(image14, 0, 0);
  }
  
  image14.onload = v34;
  v34();
}
 
v31();
 
// создаём кнопку и добавляем относительно полотна 
bt10 = document.createElement('BUTTON');
bt10.id = 'cm10';
bt10.textContent = 'сделать во всесь экран ';
document.getElementById("container").appendChild(bt10);
bt10.onclick = function() {
    launchFullScreen(document.body);
}
 
// создаём кнопку и добавляем относительно полотна 
bt12 = document.createElement('BUTTON');
bt12.id = 'cm13';
bt12.textContent = 'убрать полноэкранный режим  ';
document.getElementById("container").appendChild(bt12);
 
bt12.onclick = function(){
    cancelFullscreen();
}
 
function launchFullScreen(element) {
    if(element.requestFullScreen) {
        element.requestFullScreen();
    } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if(element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
}
 
function cancelFullscreen() {
    if(document.cancelFullScreen) {
        document.cancelFullScreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
}

@Ivan912 · 27.04.2019, 20:27 **[ТС]**

элементы и картинки должны растянутся под велечину конкретного монитора и схранить местоположение относительно монитор,можно такое сделать?у меня как бы получается игра ушла на вверх а элементы под экран не растянулись.

@Mr_Sergo · 27.04.2019, 21:03

Ivan912,

Тут можете почитать -> https://html5.by/blog/fullscreen-javascript-api/
Там есть и про css в полноэкранном режиме и про префиксы и про отлов событий при переходе в полноэкранный режим для разных браузеров.
Так то это много работы... лично я не стану за вас все писать если вы сами не хотите учиться...

@Ivan912 · 27.04.2019, 21:20 **[ТС]**

Хорошо спасибо ,попробую разобраться хотел сделать как в этой игре там справа в углу есть весь экран https://vk.com/app5701129 . Думал может есть функция какая нибудь встроенная для этого.

Qwerty_Wasd · 27.04.2019, 23:11

Ivan912, коллега просто подустал - бывает. Обычно Mr_Sergo дает более развернутые ответы.

Сообщение от Mr_Sergo

лично я не стану за вас все писать если вы сами не хотите учиться

в этом он прав, никто не станет.

А теперь собственно по теме.

Сообщение от Ivan912

функция какая нибудь встроенная для этого.

да есть. У некоторых экземпляров интерфейса Element имеется метод requestFullscreen, пример с которым предоставил Вам ответчик выше. Заметьте также, я подчеркнул некоторые, а именно - https://developer.mozilla.org/... e_elements

Сообщение от MDN

An element that you wish to place into full-screen mode has to meet a small number of simple requirements:

It must be one of the standard HTML elements or <svg> or <math>.
It is not a <dialog> element.
It must either be located within the top-level document or in an <iframe> which has the allowfullscreen attribute applied to it.
Additionally, of course, the Feature Policy "fullscreen" permission must be granted.

Пройдитесь по ссылкам, почитайте документацию.

Сообщение от Ivan912

элементы и картинки должны растянутся под велечину конкретного монитора и схранить местоположение относительно монитор

За это отвечают стили. Копайтесь в них.

Вот небольшой пример с использованием искомого метода, делал для другой темы(Игра (Тараканьи гонки))
Поизучайте код - https://codepen.io/qwerty_wasd/pen/QPNwwm

HTML5
1
2
3
<canvas id="road" height="400" width="600"></canvas>
<div class="none"><img id="cockroach_red" src="http://pngimg.com/uploads/roach/roach_PNG12153.png" alt="" width="100" height="50"/><img id="cockroach_blue" src="http://pngimg.com/uploads/roach/roach_PNG12153.png" alt="" width="100" height="50"/></div>
<button id="start">START</button>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
  text-align: center;
}
 
#road {
  display: block;
  margin: 50px auto;
  border: 2px solid black;
  background: url(https://media1.fdncms.com/stranger/imager/u/large/36500432/1543622792-gettyimages-953655218.jpg) no-repeat center;
  background-size: contain;
}
 
.none {
  display: none;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
let opCnv = (function(w, d) {
  let dataCnv = {
    elem: d.getElementById(`road`),
    ctx: d.getElementById(`road`).getContext(`2d`),
    cockroach_red: {
      elem: d.getElementById(`cockroach_red`),
      x: 10,
      y: 340,
      speed: Math.random(),
    },
    cockroach_blue: {
      elem: d.getElementById(`cockroach_blue`),
      x: 10,
      y: 360,
      speed: Math.random(),
    },
  },
      operationCnv = {
        tID: null,
        button: document.getElementById(`start`),
        createCocroach: object => dataCnv.ctx.drawImage(object.elem, object.x, object.y, 100, 50),
        draw: () => {
          dataCnv.ctx.clearRect(0, 0, dataCnv.elem.height * 2, dataCnv.elem.width * 2);
          [dataCnv.cockroach_red, dataCnv.cockroach_blue].forEach(e => operationCnv.createCocroach(e));
        },
        startRace: () => {
          dataCnv.elem[
            `requestFullscreen` ||
            `mozRequestFullScreen` ||
            `webkitRequestFullscreen` ||
            `msRequestFullscreen`
          ]();
          operationCnv.button.disabled = true;
          [dataCnv.cockroach_red, dataCnv.cockroach_blue].forEach((e, i) => {
            e.x = 10;
            e.y = i === 0 ? 340 : 360;
            e.speed = Math.random();
          });
          const go = () => {
            if ([dataCnv.cockroach_red, dataCnv.cockroach_blue].every(e => e.x < 450)) {
              dataCnv.cockroach_red.x += dataCnv.cockroach_red.speed;
              dataCnv.cockroach_blue.x += dataCnv.cockroach_blue.speed;
              operationCnv.draw();
              operationCnv.tID = w.requestAnimationFrame(go);
            } else {
              w.cancelAnimationFrame(operationCnv.tID);
              operationCnv.button.disabled = false;
              d[
                `exitFullscreen` ||
                `mozCancelFullScreen` ||
                `webkitExitFullscreen` ||
                `msExitFullscreen`
              ]();
            }
          }
          operationCnv.tID = w.requestAnimationFrame(go);
        },
      };
  
  w.addEventListener(`load`, operationCnv.draw);
  operationCnv.button.addEventListener(`click`, operationCnv.startRace);
  w.addEventListener(`beforeunload`, () => {
    w.removeEventListener(`load`, operationCnv.draw);
    operationCnv.button.removeEventListener(`click`, operationCnv.startRace);
    dataCnv = operationCnv = undefined;
  });
 
  return dataCnv;
}(window, document));

Все необходимые знания для реализации задумки есть в документации технологий, что Вы будете использовать:
- https://developer.mozilla.org/en-US/
- https://www.w3.org/
- https://www.w3.org/standards/webdesign/
- https://tc39.github.io/

@Ivan912 · 28.04.2019, 01:05 **[ТС]**

посмотрел ваши примеры а почему все они не до конца делают полный экран а оставляю чёрные полоски по бокам?

Qwerty_Wasd · 28.04.2019, 01:14

Сообщение от Ivan912

не до конца делают полный экран

до конца, начнете хоть что-то читать по предоставленным материалам - придет понимание.

Ivan912,

Сообщение от Ivan912

а оставляю чёрные полоски по бокам

В стилях #road измените строчку

CSS
1
background-size: contain;

на

CSS
1
background-size: cover;

И еще раз обращаю Ваше внимание!!!!!!!!!!!!!

Сообщение от Ivan912

элементы и картинки должны растянутся под велечину конкретного монитора и схранить местоположение относительно монитор,можно такое сделать?

Сообщение от Qwerty_Wasd

За это отвечают стили. Копайтесь в них.

Сообщение от Qwerty_Wasd

Все необходимые знания для реализации задумки есть в документации технологий, что Вы будете использовать:
- https://developer.mozilla.org/en-US/
- https://www.w3.org/
- https://www.w3.org/standards/webdesign/
- https://tc39.github.io/

Добавлено через 4 минуты
Если язык документации для Вас слишком академичен, могу предложить образовательный ресурс от разработчиков W3C - https://www.w3schools.com/default.asp

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@Ivan912 1 / 1 / 0 Регистрация: 26.01.2019 Сообщений: 92
	27.04.2019, 20:27 [ТС]
	элементы и картинки должны растянутся под велечину конкретного монитора и схранить местоположение относительно монитор,можно такое сделать?у меня как бы получается игра ушла на вверх а элементы под экран не растянулись. 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	27.04.2019, 21:03
	Ivan912, Тут можете почитать -> https://html5.by/blog/fullscreen-javascript-api/ Там есть и про css в полноэкранном режиме и про префиксы и про отлов событий при переходе в полноэкранный режим для разных браузеров. Так то это много работы... лично я не стану за вас все писать если вы сами не хотите учиться... 0

@Ivan912 1 / 1 / 0 Регистрация: 26.01.2019 Сообщений: 92
	27.04.2019, 21:20 [ТС]
	Хорошо спасибо ,попробую разобраться хотел сделать как в этой игре там справа в углу есть весь экран https://vk.com/app5701129 . Думал может есть функция какая нибудь встроенная для этого. 0

@Ivan912 1 / 1 / 0 Регистрация: 26.01.2019 Сообщений: 92
	28.04.2019, 01:05 [ТС]
	посмотрел ваши примеры а почему все они не до конца делают полный экран а оставляю чёрные полоски по бокам? 0