[html5] zombies – intro

Ce billet fait parti de la série « bidouillons avec HTML5« .

Billet en retard. Pour me changer les idées, j’ai commencé à coder un jeu simple. Il fait trop chaud pour coder correctement donc ça traîne, mais voici l’idée générale :

• Le but du jeu est de tuer tous les zombies de la carte sans se faire dévorer.
• Le jeu fonctionne au tour par tour. Chaque cycle (tour), le joueur et les zombies peuvent soit se déplacer d’une case, soit attaquer.
• Le joueur commence au bord gauche de la carte. Les zombies sont positionnés aléatoirement, en tenant compte d’une « zone de sécurité » pour éviter qu’un zombie démarre trop près  du joueur.
• Les zombies n’attaquent qu’à bout portant (case adjacente au joueur).
• Le joueur possède une arme à feu (munitions illimitées) pouvant tirer à une distance X. Pour simplifier, l’arme fait pour l’instant mouche à tous les coups. À terme, je compte changer ça vers quelque chose de plus subtil, tel 90% max de faire mouche + un malus en fonction de la distance à la cible.
• Les zombies sont aveugles, fonctionnent à l’oreille. S’ils entendent le joueur (coup de feu ou déplacement), ils se dirigeront vers cette position.

exemple de carte. Point jaune = joueur, point rouge = zombie

La version actuelle du code est disponible ici.
Il manque encore la gestion de l’IA zombie, la détection du bruit, la gestion des tirs, et le test de condition de fin du jeu (zombie est au contact = perdu, 0 zombies restant = gagné). Je compte aussi ajouter 2/3 effets (pour les tirs notamment), mais ça demandera la gestion d’un 2nd calque mais j’ai atteins mon but (apprendre), donc j’arrête ce projet ici. D’autres suivrons !

[html5] carte 3 – hexagones et repère carthésien

Ce billet fait parti de la série « bidouillons avec HTML5« .

Mon précédent article a vu la création d’une carte à cases hexagonales. Aujourd’hui vous allons voir, en pratique, comment ajouter quelquechose dans cette carte.

Système de coordonnées ?

En programmation, les données d’une carte sont typiquement stockées dans un tableau à deux dimensions, chaque case du tableau correspondant à une case de la carte. Ça fonctionne très bien avec des cases carrées, mais comment faire avec une carte hexagonale ? (mes coupains twittos se souviendrons de mon raclage de cerveau sur le sujet)

À ma grande surprise, cela reste similaire. C’est toujours un système de coordonnées cartésiennes, sauf qu’il n’est pas orthonormé : au lieu d’avoir un axe horizontal, l’axe des X est parallèle avec les rangées d’hexagones. Ce qui nous donne :

Pour les curieux, le code utilisé pour générer l’image des coordonnées est disponible ici (trop long pour être sur la page), et une animation de l’algo est visible là.

Position d’une case

Nous disposons maintenant un système de coordonnées pour les cases. Voyons maintenant comment faire une translation de ce système de coordonnées vers celui du canvas.

• La position d’une case est ici définie par les coordonnées  du centre de celle ci.
• Le système de coordonnées cartésiennes utilisé pour la carte sera ci dessous  appelé « plan hexagonal ».
• Le système de coordonnées orthonormé utilisé par le canvas sera ci dessous appelé le « plan canvas ». Le point d’origine du canvas est en haut à gauche, ce qui fait que l’axe des Y est inversé.
• « A » désigne ici la longueur d’un côté d’un hexagone.

        

Écart vertical

Les axes Y du plan hexagonal (en vert) et du  plan canvas sont parallèles, donc rien de sorcier.
Les coordonnées « plan hexagonal » [1;0] et [0;0] sont séparées par une distance canvas de [ 2 * A * cos(30°) , 0].

Écart horizontal

Là par contre, ça coince un peu. L’axe X du canvas est horizontal, alors que celui du plan hexagonal (en rouge) non.
Quelle distance sépare les coordonnées « plan hexagonal » [0;0] et [0;1], en équivalent canvas ?

• y : A * cos(30°)
• x : A + A * sin(30°)

Pratiquons

Code

//ici le code traçant les hexagones et les lignes de repère *snip*
(...)
//point d'origine du plan canvas, defini manuellement
var origin_y = 5 * cos_unit; // 3eme bloc en partant du haut (donc 2.5 block de haut pour être au milieu)
var origin_x = sin_unit + unit/2; //centre du 1er bloc en partant de la gauche

pinceau.beginPath();
pinceau.font = '12pt Calibri';
pinceau.textAlign = 'center';
pinceau.fillStyle = 'green';

var coord = coordinates_hexa_to_canvas(0, 0 )
pinceau.fillText("0+0", coord.x, coord.y); //du texte, mais ça pourrait être une image ou autre.

coord = coordinates_hexa_to_canvas(1, 2 )
pinceau.fillText("y1;x2", coord.x, coord.y);

coord = coordinates_hexa_to_canvas(3, 2 )
pinceau.fillText("y3;x2", coord.x, coord.y);

coord = coordinates_hexa_to_canvas(4, 4)
pinceau.fillText("y4;x4", coord.x, coord.y);

function coordinates_hexa_to_canvas(wanted_y, wanted_x ) {
   //variables "globales" utilisées : cos_unit, sin_unit, unit, origin_y, origin_x
  var coordinates = [];
   //vertical part. canvas system has Y inverted, so goes down as hexa coordinates go up.
   coordinates.y = origin_y - (wanted_y * (2 * cos_unit));
   //"horizontal" part
   coordinates.y += (wanted_x * cos_unit);
   coordinates.x = origin_x + (wanted_x * (unit + sin_unit));

   return coordinates;
}

(code complet ici)

Affichage

Et voilou !

[html5] carte 2 – carte hexagonale

Ce billet fait parti de la série « bidouillons avec HTML5« .

Suite à mon précédent article, je passe maintenant aux cases hexagonales.
La base HTML reste la même :

<!DOCTYPE html5>
<html>
<body>
<canvas id ="canvas1" width="400" height="300" style="border:5px solid black;">
</canvas>
</body>
</html>

Dessine moi un hexagone

Mathématiquement

Bon pour commencer, ça se dessine comment exactement, un hexagone ?
N’oubliez pas que sur un canvas, l’origine [0;0] est en haut à gauche. L’axe vertical est inversé, donc « y » est à son minimum au point d’origine.

Trait par trait (d’une longueur A), d’en haut à gauche et dans le sens des aiguilles d’une montre, ça donne ça :

• Position de départ : [x, y]
• Trait horizontal du haut : [+A, +0]
• diagonale côté haut droit : [+A*sin(30°), +A*cos(30°)]
• diagonale côté bas droit : [-A*sin(30°), +A*cos(30°)]
• Trait horizontal du bas : [-A, -0]
• diagonale côté bas gauche : [-A*sin(30°), -A*cos(30°)]
• diagonale côté haut gauche : [+A*sin(30°), -A*cos(30°)]

Et niveau code ?

Notez que contrairement à la liste (ou la position est indiquée incrémentalement, par rapport à celle de la fin du trait précédent), le code ci dessous garde tout du long la position de départ comme référentiel :

<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau =c1.getContext("2d");

initial_h = 100; //position verticale de base
initial_w = 100; //position horizontale de base

unit = 50; //longueur d'un coté de l'hexagone
//pour ne pas avoir à le recalculer à chaque fois
sin_unit = unit * Math.sin(30*Math.PI/180); 
cos_unit = unit * Math.cos(30*Math.PI/180);

pinceau.moveTo(initial_w                  , initial_h); //point de départ
pinceau.lineTo(initial_w + unit           , initial_h);
pinceau.lineTo(initial_w + unit + sin_unit, initial_h + cos_unit);
pinceau.lineTo(initial_w + unit           , initial_h + 2 * cos_unit);
pinceau.lineTo(initial_w                  , initial_h + 2 * cos_unit);
pinceau.lineTo(initial_w - sin_unit       , initial_h + cos_unit);
pinceau.lineTo(initial_w                  , initial_h); //retour au point de départ
pinceau.stroke();
</script>

Comme sur des roulettes ! Passons au remplissage

Tracer la carte

Tracer chaque hexagone de la carte étant fastidieux et inefficace, j’ai décidé de tracer les diagonales par colonnes, puis d’ajouter les traits horizontaux manquants.

Code

<script language="javascript" type="text/javascript">
var c1=document.getElementById("canvas1");
var pinceau=c1.getContext("2d");

var unit = 40;
var sin_unit = unit * Math.sin(30*Math.PI/180);
var cos_unit = unit * Math.cos(30*Math.PI/180);

//trace the diagonals
var count = 0;

for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
   if( count % 2 == 0) {
      pinceau.moveTo(w , 0); //point de depart
      for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.lineTo(w + sin_unit , h + cos_unit); /* \ */
         pinceau.lineTo(w, h + 2 * cos_unit);        /* / */
      }
   } else {
      pinceau.moveTo(w + sin_unit, 0); //point de depart
      for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.lineTo(w, h + cos_unit);               /* / */
         pinceau.lineTo(w + sin_unit, h + 2 * cos_unit); /* \ */
      }
   }
   count++;
}

//trace the lines
count = 0;

for(var w = 0 ; w < c1.width ; w += unit + sin_unit) {
   if( count % 2 == 0) {
      for(var h = 0 ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.moveTo(w + sin_unit, h + cos_unit);
         pinceau.lineTo(w + sin_unit + unit , h + cos_unit);
      }
   } else {
      for(var h = cos_unit ; h < c1.height ; h += 2 * cos_unit) {
         pinceau.moveTo(w + sin_unit, h + cos_unit); 
         pinceau.lineTo(w + sin_unit + unit, h + cos_unit);
      }
   }
   count++;
}
pinceau.stroke();
</script>

Visuellement

Étape 1 :

Étape 2 :

[html5] carte 1 – base et quadrillage

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 :)

le HTML5, c’est fun

Aloha !

Je me suis mis récemment au HTML5 (utile dans ma branche de métier), et me suis dit que ça serait cool de partager ça ici.
Et puis, ça fera toujours un peu d’activité sur ce blog.

Ces prochains jours/semaines, je vais donc poster des bout de code/algo et en expliquer les grandes lignes. Pas vraiment un tutoriel, mais si vous maîtrisez un peu HTML et JavaScript, vous devriez comprendre sans trop de souci :)

À bientôt donc.