Pas d’éditeur contre lequel lutter. Colle l’iframe dans ta page, enregistre, et la grille est en ligne. Le plus intéressant, c’est ce que tu en fais une fois qu’elle y est.
Coller le jeu dans ta page Neocities
Génère et copie le code d’intégration
Choisis une taille de grille dans le générateur d’intégration, passe au thème rétro si ton site a un look années 90, et copie l’extrait complet : l’iframe et le paragraphe de mention en dessous. Neocities héberge du HTML brut : tu colles le code exactement tel qu’il est généré, les deux parties.
Ouvre ton tableau de bord et trouve la page
Connecte-toi à Neocities et ouvre ton tableau de bord, qui liste tous les fichiers de ton site. Décide si le jeu va sur ta page d’accueil (index.html) ou sur une page à part.
Clique sur Edit sur le fichier
Survole le fichier dans le tableau de bord et clique sur le lien Edit qui apparaît : l’éditeur de texte intégré s’ouvre avec le code source de ta page. Si tu préfères une page séparée, utilise d’abord le bouton de nouveau fichier, nomme-le par exemple games.html, et modifie celui-là.
Colle l’iframe dans le body
Place les deux parties dans le body de la page, à l’endroit où le jeu doit apparaître, en gardant le paragraphe de mention juste sous l’iframe ; jamais dans la section head, où le navigateur l’ignorerait. Entoure-les d’un div de centrage, ou de la bonne vieille balise center, si le reste de ta mise en page est centré.
Enregistre, puis affiche la page en ligne
Clique sur Save dans la barre d’outils de l’éditeur, puis utilise View pour ouvrir la page publiée. Neocities met à jour immédiatement : si la grille n’apparaît pas, le problème vient de ton balisage et non d’un délai de déploiement.
L’accorder à une mise en page du Web d’antan
Les sites Neocities cherchent souvent à coller à leur époque, et une grille de jeu moderne et plate au milieu d’une page à fond en mosaïque et à mise en page en tableaux détonne. Le paramètre theme=retro existe exactement pour cela : des panneaux argentés #C0C0C0, des cases biseautées blanc et gris, des angles vifs, le compteur de mines rouge à sept segments et le smiley jaune qui change d’expression quand tu cliques.
Si tu construis une page façon bureau Windows, place la grille dans ta propre fausse fenêtre et masque la bordure du cadre. Le jeu dessine déjà ses propres biseaux : une iframe frameborder="0" toute simple s’intègre de façon convaincante dans un div à barre de titre :
<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>Le réglage branding=false masque la ligne « Powered by » dessinée à l’intérieur du cadre, ce qui représente environ 30 pixels de hauteur : c’est pour cela que la hauteur ci-dessus est de 442 et non de 472. Il ne retire pas le paragraphe de mention, et rien ne le retire : ce lien se trouve dans ta page, pas dans la nôtre, et c’est le marché qui garde l’intégration gratuite. Ici, il a été restylé en bande de barre d’état sous la fausse fenêtre, ce qui convient mieux à la mise en page que le gris par défaut ; ce genre de changement est tout à fait bienvenu, tant que le lien pointe toujours vers le jeu.
Cadres, largeurs et zone de contenu
Beaucoup de modèles Neocities s’articulent autour d’une colonne de navigation et d’une iframe de contenu, souvent nommée content, qui charge chaque page. Si tu colles le jeu dans une page chargée dans cette zone, tu imbriques un cadre dans un cadre. Cela fonctionne dans tous les navigateurs, mais la largeur dont dispose la grille est celle de la zone, pas celle de la fenêtre.
Mesure la zone, puis choisis :
- Zone de moins de 400 px de large : Débutant 9×9 (344 × 472), ou une grille personnalisée plus petite comme
?size=7x7&mines=6. - De 500 à 700 px : Intermédiaire 16×16 (536 × 664).
- Mises en page pleine largeur sur ordinateur : Expert 30×16 (956 × 664).
Ici, des largeurs fixes en pixels sont la bonne solution. Une largeur en pourcentage sur l’iframe étirerait le cadre mais pas la grille qu’il contient, et le jeu flotterait au milieu du vide.
Des idées qui vont bien à une page Neocities
- Une salle de jeux. Mets un lien vers elle depuis ton index à côté de tes autres pages ; plusieurs grilles de niveaux différents sur une même page ne te coûtent rien en stockage.
- Une récompense de livre d’or. Place la grille sous le livre d’or pour remercier ceux qui l’ont signé.
- Une sous-page sanctuaire. Si ton site a une section Windows 95 ou vieux PC, un vrai Démineur qui fonctionne est un meilleur objet d’époque qu’une capture d’écran.
- Une page 404. Colle la grille dans
not_found.htmlpour qu’un lien mort devienne un jeu plutôt qu’une excuse.
Si tu préfères envoyer les visiteurs vers une grille en plein écran plutôt que d’en intégrer une, le jeu principal et les tailles de grille personnalisées fonctionnent tous deux comme de simples liens depuis n’importe quelle page.