Ce billet débute la série "bidouillons avec HTML5".
Mais le HTML5 ça ajoute quoi par rapport à HTML en fait ? *ouvre un tutorial*
Ok, donc ya une balise <canvas> et on peut gribouiller des trucs dedans. Commençons par ça.
Ça tombe bien, je m’amuse ces temps ci à réfléchir aux algos utilisés dans les jeux au tour par tour, notamment ceux utilisant une carte avec des cases hexagonales (tels que Battle Isle et Wesnoth). Traçons une carte ! Je garde les hexagones pour plus tard, voyons déjà si j’arrive à faire des cases carrées.
Tout d’abord, squelette de page avec un canvas de 400 de large pour 300 de haut.
<!DOCTYPE html5>
<html>
<body>
<canvas id="canvas1" width="400" height="300" style="border:5px solid black;"></canvas>
</body>
</html>
Jusque là, rien de sorcier. Il manque un certain nombre de trucs pour que ça soit propre (comme avoir le CSS et le JS dans une page à part, indiquer le le charset, etc.), mais ça suffira pour l’exercice.
Voyons le gribouillage maintenant.
"HTML5" gère le dessin sur canvas via des méthodes JavaScript spécifiques. en ce qui me concerne :
- x.moveTo(x, y) permet de positionner le curseur/pinceau
- x.lineTo(x,y) permet de tracer un trait entre la position actuelle et celle spécifiée en paramètre.
- x.stroke() finalise le ou les tracés.
Sachant que le point d’origine [0;0] du canvas se trouve en haut à gauche, tentons une première ligne 50 pixels plus bas.
<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau=c1.getContext("2d");
pinceau.moveTo(0, 50);
pinceau.lineTo(c1.width, 50);
pinceau.stroke();
</script>
Magnifique !
Avec un soupçon d’algorithmie, traçons maintenant le reste de la grille.
<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau=c1.getContext("2d");
var ecart = 50; //largeur d'un côté des cases
//lignes
for(var h = ecart ; h < c1.height ; h += ecart) {
pinceau.moveTo(0, h); //déplacer le pinceau à (x,y) sans tracer
pinceau.lineTo(c1.width, h); //tracer jusqu'à (x,y)
}
//colonnes
for(var w = ecart ; w < c1.width ; w += ecart) {
pinceau.moveTo(w, 0);
pinceau.lineTo(w, c1.height);
}
pinceau.stroke();
</script>
Et voilou ! Bien sur, le but à terme sera de remplir ces cases avec des textures de terrain et/ou de combattants ! Mais ça sera pour plus tard.
Prochain billet, encore une carte vide, mais cette fois avec des cases hexagonales. Ça s’annonce plus tendu :)
Jeu de briques
Snake
Pacman
Bubble