Es gibt keinen Editor, mit dem du kämpfen musst. Füg das iframe in deine Seite ein, speichere, und das Spielfeld ist online. Spannend wird es erst bei der Frage, was du daraus machst.
Das Spiel in deine Neocities-Seite einfügen
Den Einbettungscode erzeugen und kopieren
Wähl im Generator eine Spielfeldgröße, stell das Design auf Retro, wenn deine Website nach Neunzigern aussieht, und kopier den kompletten Code – das iframe und den Absatz mit der Quellenangabe darunter. Neocities ist reines HTML-Hosting, du fügst den Code also genau so ein, wie er erzeugt wurde, beide Teile.
Das Dashboard öffnen und die Seite finden
Melde dich bei Neocities an und öffne dein Dashboard, das alle Dateien deiner Website auflistet. Entscheide, ob das Spiel auf deine Startseite (index.html) oder auf eine eigene Seite kommt.
Bei der Datei auf „Edit“ klicken
Fahr im Dashboard mit der Maus über die Datei und klick auf den erscheinenden Link „Edit“. Damit öffnet sich der eingebaute Texteditor mit dem Quelltext deiner Seite. Willst du lieber eine eigene Seite, leg zuerst mit der Schaltfläche für eine neue Datei etwas wie games.html an und bearbeite die.
Das iframe in den Body einfügen
Setz beide Teile an der Stelle in den Body der Seite, an der das Spiel erscheinen soll, mit dem Absatz der Quellenangabe direkt unter dem iframe – nie in den Head-Bereich, dort ignoriert der Browser es. Ist der Rest deines Layouts zentriert, pack beides in ein zentrierendes div oder das klassische center-Tag.
Speichern und die Live-Seite ansehen
Klick in der Werkzeugleiste des Editors auf „Save“ und öffne die veröffentlichte Seite mit „View“. Neocities aktualisiert sofort: Erscheint das Spielfeld nicht, liegt das Problem in deinem Markup, nicht an einer Verzögerung beim Veröffentlichen.
Passend zum Old-Web-Layout
Neocities-Seiten sind oft bewusst stilecht, und ein modernes, flaches Spielfeld mitten auf einer Seite mit gekacheltem Hintergrund und Tabellenlayout wirkt falsch. Genau dafür gibt es den Parameter theme=retro: silbergraue #C0C0C0-Flächen, abgeschrägte Felder in Weiß und Grau, scharfe Ecken, der rote Sieben-Segment-Minenzähler und der gelbe Smiley, der beim Klicken das Gesicht verzieht.
Baust du eine Seite im Stil eines Windows-Desktops, setz das Spielfeld in dein eigenes nachgebautes Fenster und blende den Rahmen aus. Das Spiel zeichnet seine Kanten schon selbst, ein schlichtes iframe mit frameborder="0" sitzt also überzeugend in einem div mit Titelleiste:
<div class="win95-window">
<div class="titlebar">Minesweeper</div>
<iframe src="https://play-minesweeper.games/embed/?size=beginner&theme=retro&branding=false"
width="344" height="442" frameborder="0" title="Minesweeper"></iframe>
</div>
<p class="status-bar">
<a href="https://play-minesweeper.games/">play-minesweeper.games</a> — free Minesweeper, no download
</p>Mit branding=false verschwindet die „Powered by“-Zeile innerhalb des Fensters, was etwa 30 Pixel Höhe spart – deshalb ist die Höhe oben 442 statt 472. Den Absatz mit der Quellenangabe entfernt das nicht, und nichts anderes tut es: Dieser Link steht in deiner Seite, nicht in unserer, und er ist die Abmachung, die das Einbetten kostenlos hält. Hier wurde er zu einer Statusleiste unter dem nachgebauten Fenster umgestaltet, was besser zum Layout passt als das Standardgrau – solche Änderungen sind ausdrücklich willkommen, solange der Link weiter auf das Spiel zeigt.
Frames, Breiten und der Inhaltsbereich
Viele Neocities-Vorlagen sind um eine Navigationsspalte und ein Inhalts-iframe gebaut, meist content genannt, das die einzelnen Seiten lädt. Fügst du das Spiel in eine Seite ein, die in diesen Bereich geladen wird, verschachtelst du einen Frame in einem Frame. Das funktioniert in jedem Browser, aber maßgeblich ist die Breite dieses Bereichs, nicht die des Fensters.
Miss den Bereich und wähl dann:
- Unter 400px Breite – Anfänger 9×9 (344 × 472) oder ein kleineres eigenes Spielfeld wie
?size=7x7&mines=6. - 500 bis 700px – Fortgeschritten 16×16 (536 × 664).
- Layouts in voller Breite am Desktop – Experte 30×16 (956 × 664).
Feste Pixelbreiten sind hier richtig. Eine prozentuale Breite am iframe würde das Fenster dehnen, aber nicht das Spielfeld darin – das Spiel schwebt dann in leerem Raum.
Ideen, die zu einer Neocities-Seite passen
- Ein Spielezimmer. Verlinke es von deiner Startseite neben deinen anderen Seiten; mehrere Spielfelder in verschiedenen Schwierigkeitsstufen auf einer Seite kosten dich keinen Speicherplatz.
- Eine Belohnung im Gästebuch. Setz das Spielfeld unter das Gästebuch, als Dankeschön fürs Eintragen.
- Eine Schrein-Unterseite. Hat deine Website einen Bereich zu Windows 95 oder alten PCs, ist ein echtes, funktionierendes Minesweeper ein besseres Ausstellungsstück als ein Screenshot davon.
- Eine 404-Seite. Füg das Spielfeld in
not_found.htmlein, dann wird aus einem toten Link ein Spiel statt einer Entschuldigung.
Willst du Besucher lieber zu einem Spielfeld im Vollbild schicken, statt eins einzubetten, funktionieren das Hauptspiel und die eigenen Spielfeldgrößen als einfache Links von jeder Seite aus.