[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.

Personnalisons Wikipédia : vous avez un nouveau message (update)

Ce billet fait partie de la série « Personnalisons Wikipédia« .

Suite à une modification sur MediaWiki, mon  bout de code permettant de changer le texte du bandeau « vous avez un nouveau message » ne fonctionne plus. Corrigeons ça.

Le nouveau message ressemble à ceci :

Soit structurellement, texte1/lien1/texte2/lien2/texte3.

Je n’utilise que texte1 et lien2 (lien1 et texte2 deviennent vides, texte3 n’est pas touché), mais l’endroit ou est modifié chaque élément est spécifié en commentaire pour que vous puissiez changer ça si ça vous dit :)

Nouveau code (n’oubliez pas d’effacer l’ancien le cas échéant !)

function youHaveANewInsultingMessage() {
  div = document.body.getElementsByClassName("usermessage")[0]
  if( !div) return

  div.firstChild.nodeValue = " Rhaaah tu as fait une connerie (" //texte1

  a = div.getElementsByTagName("a")
  a[0].firstChild.nodeValue = "" //lien1
  a[0].nextSibling.nodeValue = "" //texte2
  a[1].firstChild.nodeValue = "bâtard" //lien2
}

addOnloadHook(youHaveANewInsultingMessage)

Personnalisons Wikipédia : liste de suivi (3)

Ce billet fait partie de la série “Personnalisons Wikipédia“.

Les perspicaces d’entre vous aurons remarqué un bouton « (stop) » sur les captures d’écran de mon billet d’hier. Cette fonctionnalité (qui est une amélioration d’un vieux script de Dake) permet d’arrêter de suivre des pages directement depuis [[spécial:liste_de_suivi]], en un seul clic.

après clic sur « stop », la ligne est barrée et la page n’est plus suivie. Pratique non ?

À titre exceptionnel, je vous épargne le décorticage du code :) Pour tester, éditez votre monobook.js/vector.js et ajoutez y la ligne suivante :

importScript('Utilisateur:Darkoneko/addStopInWatchlist.js')

NB : au collage, verifiez bien que les apostrophes droites n’aient pas été transformées en apostrophes courbes. JavaScript ne reconnaît pas les apostrophes courbes.

Personnalisons Wikipédia : confirmer une action

Ce billet fait partie de la série « Personnalisons Wikipédia ».

La personnalisation du jour vous permettra d’ajouter une demande de confirmation lorsque vous cliquez sur « révoquer » avec quelques lignes de JavaScript. En gros, cette fonction est prévue pour ceux et celles qui cliquent plus sur le bouton par erreur que volontairement :)

Lors d’un clic sur le lien de révocation, la fenêtre suivante apparaitra :

Code à ajouter dans votre monobook.js ou vector.js

Le code est tout simple :

1. récupération de la liste les liens « révoquer » de la page (repérables par leur classe « mw-rollback-link »)
2. ajout d’un appel à la fonction de confirmation à leur évènement « onclick » (=quand l’utilisateur clique)

confirm() est une fonction native de JavaScipt, donc rien de spécial à faire de ce côté là.

si l’utilisateur clique sur « ok », confirm() retourne True et l’action (aller vers la page) est validée, dans le cas contraire elle retourne False et l’action est annulée

function addRevertButtonConfirm() {
   var list_boutons = document.getElementsByClassName("mw-rollback-link")
   for (var a = 0, len = list_boutons.length ; a < len ; a++) {
      list_boutons[a].setAttribute('onclick', 'return confirm("revoquer ?")')
   }
}
addOnloadHook( addRevertButtonConfirm )

Note : le script n’a été testé que sous firefox

Personnalisons Wikipédia : icone de suivi sous Vector

Ce billet fait partie de la série « Personnalisons Wikipédia ».

En suivant un lien depuis le dernier billet de Popo, je suis tombé sur une discussion de bistro remplie de complaintes, dont une partie était au sujet de l’icône « étoile » faisant sous Vector office de raccourci pour ajouter une page à sa liste de suivi.

Wikipédiens, Wikipédiennes, Je Vous Ai Compris™. La personnalisation du jour permettra aux vectorisés d’entre vous  de changer l’icône de ce lien.

Un code similaire a été utilisé dans plusieurs de mes autres billets de personnalisation, donc pas d’explications. Pour cet exemple, je me suis basé sur cette image pour la « mise en suivi » et sur celle ci pour le « retrait de suivi ». N’hésitez pas à les remplacer par quelquechose que vous plait :)

/* icone "mettre en suivi" */
#ca-watch.icon a, #ca-watch.icon a:hover {
   background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Searchtool_right.svg/15px-Searchtool_right.svg.png");
   background-position:5px 60%; /* cette partie est nécessaire car le mode hover "par défaut" a des valeurs différentes */
}

/* icone "retirer de la liste de suivi" */
#ca-unwatch.icon a, #ca-unwatch.icon a:hover {
   background-image:url("http://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Black_x.svg/15px-Black_x.svg.png");
   background-position:5px 60%;
}

Personnalisons Wikipédia : la barre du haut

Ce billet fait partie de la série « Personnalisons Wikipédia ». La personnalisation du jour vous permettra de changer la tronche de la barre en haut à droite.
Je commencerais doucement avec des modifications esthétiques simples  (en CSS), puis ce sera au tour de l’ajout d’icônes (toujours en CSS), pour finir sur la modification du texte des liens et l’ajout d’autres liens dans la barre (en JavaScript).

Histoire d’avoir une base de travail « propre » (mon compte principal étant très customisé), je me servirais ici d’un compte « user:Pelote de laine », donc ne soyez pas surpris du nom affiché dans la barre sur les exemples :)

Au moment ou j’écris ces lignes, la version par défaut de la barre du haut, avec le skin monobook, ressemble à ça :

Jouons un peu avec le CSS (monobook.css ou vector.css)

Pour commencer, voici quelques exemples de changement d’apparence. C’est juste pour vous donner une idée de ce qui peut être fait, donc c’est très hétéroclite ; n’hésitez pas à réutiliser les bouts qui vous plaisent :)  Lors de vos tests, pas besoin de sauvegarder votre monobook, un simple « prévisualiser » suffit pour jauger le résultat.

/* virer le lien "essayer la béta" */
li#pt-optin-try {
   display:none!important;
}

/* lien discussion : espace plus grand entre chaque lettre */
li#pt-mytalk a {
   letter-spacing:2px;
}

/* préférences : en italique */
li#pt-preferences a {
   font-style:italic;
}

/* liste de suivi : en petites majuscules */
li#pt-watchlist a {
   font-variant:small-caps;
}

/* contributions : barré */
li#pt-mycontris a {
   text-decoration:line-through ;
}

/* déconnexion : en rouge et gras */
li#pt-logout a {
   font-weight:bold;
   color:red;
}

Résultat :

Ajouter des icônes (toujours monobook.css ou vector.css)

Repartons de zéro (ou presque, je garde le bout supprimant le lien « essayer la beta »), et ajoutons cette fois des « icônes » à gauche de certains liens.

Chaque icône, étant attachée au node « a » et non au node « li », fait partie intégrante du lien et est donc cliquable.

/* boc de biere à gauche du lien vers ma page de discussions */
li#pt-mytalk a {
  /* mettre une image de fond (l'icône) au node "a", tout à gauche */
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/d/da/2piva.png/15px-2piva.png') no-repeat scroll left top;
  /* décaler le texte sur la droite (d'environ la largeur de l'image) pour que les deux ne se chevauchent pas */
  padding-left:17px;
}

/* une roue crantée à gauche des prefs */
li#pt-preferences a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Crystal_Clear_app_kservices.png/15px-Crystal_Clear_app_kservices.png') no-repeat scroll left top;
  padding-left:17px;
}

/* une loupe à gauche de la liste de suivi */
li#pt-watchlist a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Searchtool_right.svg/15px-Searchtool_right.svg.png') no-repeat scroll left top;
  padding-left:17px;
}

/* un crayon à gauche de la liste de contributions */
li#pt-mycontris a {
  background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Emblem-pen-new.svg/13px-Emblem-pen-new.svg.png') no-repeat scroll left top;
  padding-left:15px;
}

Résultat :

changer le texte, ajouter des liens (monobook.js ou vector.js)

Passons maintenant à la partie JavaScript (pour les étourdis, ça veux dire « ne collez pas le code ci dessous dans votre monobook.css, ça ne marchera pas ») . Nous allons ajouter des liens…

• vers votre monobook perso  : « js » et « css » (remplacez « monobook » par « vector » dans les liens au besoin, et adaptez si vous utilisez secure.wikimedia.org)

• vers vos logs

Et tant qu’on y est, modifions le texte des liens existants.

Le principe utilisé est le même que dans cet autre billet de personnalisation ainsi que celui ci, je ne m’étendrais donc pas trop sur son fonctionnement

importScript('Utilisateur:Darkoneko/divers.js') // si vous ne l'avez pas déjà

function customizeTopBar() {
   var logout = document.getElementById("pt-logout")
   if (!logout) return
   var topBarUl = logout.parentNode

   var mytalk = document.getElementById('pt-mytalk');
   //ajouter "js" a gauche de discussion. La variable "wgUserName" contient le nom de l'utilisateur en cours.
   topBarUl.insertBefore( createLiAdressNode('/wiki/user:'+wgUserName+'/'+skin+'.js', 'js'), mytalk)

   //ajouter "css" a gauche de discussion, donc il sera entre "js" et "discut'"
   topBarUl.insertBefore( createLiAdressNode('/wiki/user:'+wgUserName+'/'+skin+'.css', 'css'), mytalk)

   //changer le texte pour "Page de discussion"
   mytalk.getElementsByTagName("a")[0].firstChild.nodeValue = "discut' "

   //changer le texte pour "Préférences"
   document.getElementById('pt-preferences').getElementsByTagName("a")[0].firstChild.nodeValue = "prefs"

   //changer le texte pour "Liste de suivi"
   document.getElementById('pt-watchlist').getElementsByTagName("a")[0].firstChild.nodeValue = "watchlist"

   //changer le texte pour "Contributions"
   document.getElementById('pt-mycontris').getElementsByTagName("a")[0].firstChild.nodeValue = "contribs"

   //ajouter "log" a gauche de déconnexion
   topBarUl.insertBefore( createLiAdressNode('/w/index.php?title=Special:Journal&user='+wgUserName, 'log'), logout )

   //changer le texte pour "Déconnexion"
   logout.getElementsByTagName("a")[0].firstChild.nodeValue = "X"
}
addOnloadHook(customizeTopBar)

Résultat :

Et vous, quels autres liens ajouteriez vous ?