JavaScript Games

Der Vollbildmodus baut auf dem Grundgerüst auf. Es sollte also grob diese Struktur vorhanden sein.

Um den Vollbildmodus zu starten, wird eine Schaltfläche benötigt. Am einfachsten geht das über ein button-Element. Dieses sollte eine eindeutige Klasse, z.B. fullscreen haben.

Der Button sowie das Spielfeld müssen im Javascript-Code vor dem Loop ausgewählt und in einer Variable gespeichert werden.

Um den Vollbildmodus zu aktivieren, muss vor dem Loop ein Event-Handler für den Button programmiert werden, der requestFullscreen startet.

Vorschau

game.css

.player {
  position: absolute;
  background-color: red;
  width: 20px;
  height: 20px;
}

game.html

<div class="playground">
  <div class="player"></div>
</div>

<button class="fullscreen">Vollbild</button>

game.js

var spieler = document.querySelector('.player')

var spielfeld = document.querySelector('.playground')
var vollbildButton = document.querySelector('.fullscreen')

vollbildButton.addEventListener('click', function () {
  spielfeld.requestFullscreen()
})

function loop() {
  

  window.requestAnimationFrame(loop)
}

window.requestAnimationFrame(loop)