Inhaltsverzeichnis

Html, css

Die index.html-Datei liegt im Verzeichnis htdocs, die zugehörige css-Datei main.css ebenfalls. Beide haben nur die Aufgaben

  • die Phaser-Bibliothek zu laden,
  • das Programm zu starten und
  • ein div-Element bereitzustellen, in das das Spiel gerendert werden kann.

Das div-Element strecken wir auf die Größe des View-Bereichs des Browsers.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Testprojekt</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='lib/jquery.js'></script>
    <script src='lib/phaser.js'></script>
    <script src='js/App.js' type="module"></script>
</head>
<body>
    <div id="game"></div> 
</body>
</html>

main.css

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
    overflow: hidden;
}
 
#game {
    width: 100%;
    height: 100%;
}
Drucken/exportieren
QR-Code
QR-Code schule:klassen:2022:wsem:boulders:htmlcss:start (erstellt für aktuelle Seite)