Licence CC BY-NC-SA

Créer une page HTML basique

Dernière mise à jour :

Bon ça, rien de bien compliqué, vous savez déjà faire je pense…

Un peu de HTML

Et aussi un peu de CSS, histoire d'avoir une page un peu jolie quand même. :)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Mon super jeu en HTML5 avec Quintus !</title>
    </head>
    <body>
        <h1>Mon super jeu</h1>
    </body>
</html>

On peut même ajouter du CSS pour que ce soit plus joli :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
html, body, canvas, p{
    margin: 0;
    padding: 0;
}
html, body{
    font-family: Tahoma, Geneva, Kalimati, sans-serif;
    text-align: center;
    color: #424242;
    background-color: #f7f7f7;
}
canvas{
    background-color: #fff;
}

Pensez bien à l'appeler dans votre <head> : <link rel="stylesheet" href="style.css" />

On ajoute un canvas, auquel on applique les dimensions souhaitées (j'ai choisi 600x800, en mode portrait donc) :

1
2
3
<canvas id="game" width="600" height="800">
    <p lang="fr">Votre navigateur ne supporte pas la balise canvas.</p> <!-- Un petit message pour les dinosaures -->
</canvas>

Et on n'oublie pas d'insérer la librairie et notre code en fin de document (juste avant </body>, quoi) :

1
2
<script src="quintus-all.js"></script> <!-- La librairie complète -->
<script src="game-quintus.js"></script> <!-- Le code de notre jeu -->

Alors, c'était dur ? :P