Rédigé par Whiteshoulders -

Rpg.js v0.2

lire l'article

Il y a bientôt 5 mois, j'avais présenté ici la première pierre posée à l'édification d'un mini RPG en JavaScript. Il est temps de poser la seconde, pour laquelle j'ai tout refait, parce que le code précédent était impossible à relire, pas commenté, spaghettiesque.

Et pour l'occasion, j'ai ajouté pleins de choses (dont certaines ne se voient pas).

Avant le long paragraphe sur les dedans de la bête, voici la bête en question !

this is the classical dialog box

    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,0,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
  
{
    "tableTile":[[[4,308,0,0,0,0],[5,307,0,0,0,0],[4,306,0,0,0,0],[5,309,0,0,0,0],[5,308,0,0,0,0],[4,309,0,0,0,0],[5,0,0,285,0,0],[4,0,0,286,0,0],[5,287,0,0,0,0],[4,307,0,0,265,0],[4,0,0,0,266,0],[4,0,0,0,267,0],[5,0,0,0,268,0],[5,0,0,0,269,0],[4,0,0,0,270,0],[4,0,0,0,267,0],[5,0,0,268,0,0],[4,0,0,269,245,0],[4,0,0,0,246,0],[5,0,0,0,247,0],[5,0,0,0,248,0],[5,0,0,226,0,0],[4,0,0,227,205,0],[5,0,0,0,206,0]],[[44,328,0,0,0,0],[44,327,0,0,0,0],[44,330,0,0,0,0],[4,329,0,0,0,0],[45,328,0,0,0,0],[5,329,0,0,0,0],[4,327,0,305,0,0],[4,0,0,308,0,0],[5,310,0,0,0,0],[4,309,0,0,285,0],[4,0,0,0,286,0],[4,0,0,0,287,0],[45,0,0,0,289,0],[5,0,0,0,288,0],[4,0,0,0,289,0],[4,0,0,0,287,0],[5,0,0,288,0,0],[4,0,0,289,265,0],[5,0,0,0,266,0],[4,0,0,0,267,0],[4,0,0,0,268,0],[4,0,0,246,0,0],[4,0,0,247,205,0],[4,0,0,0,226,0]],[[44,348,0,0,0,0],[44,347,0,0,0,0],[45,348,0,0,0,0],[44,349,0,0,0,0],[44,350,0,0,0,0],[44,347,0,0,0,0],[44,347,0,0,0,0],[44,0,0,326,0,0],[45,0,0,328,0,0],[24,329,0,0,305,0],[44,0,0,0,306,0],[45,0,0,307,101,0],[45,0,0,309,102,0],[45,0,0,308,103,0],[45,0,0,0,310,0],[45,0,0,0,307,0],[45,0,0,308,0,0],[4,0,0,309,285,0],[65,0,0,0,286,0],[5,0,0,0,287,0],[4,0,0,0,288,0],[5,0,0,266,0,0],[4,0,0,267,245,0],[4,0,0,0,246,0]],[[44,368,0,0,0,0],[44,367,0,0,0,0],[44,368,0,0,0,0],[44,369,0,0,0,0],[44,370,0,0,0,0],[25,367,0,0,0,0],[45,367,0,0,0,0],[44,0,346,0,0,0],[44,0,348,0,0,0],[44,349,0,0,0,0],[44,0,0,326,0,0],[44,0,0,327,121,0],[45,0,0,329,122,0],[44,0,0,328,123,0],[45,0,0,330,0,0],[44,0,0,327,0,0],[44,0,0,328,0,0],[65,0,0,329,305,0],[64,0,0,0,306,0],[65,0,0,0,307,0],[5,0,0,0,308,0],[4,0,0,286,0,0],[4,0,0,287,265,0],[5,0,0,0,266,0]],[[44,7,0,0,0,0],[45,8,0,0,0,0],[44,8,0,0,0,0],[45,7,0,0,0,0],[44,8,0,0,0,0],[45,8,0,0,0,0],[44,9,0,0,0,0],[25,366,0,0,0,0],[44,368,0,0,0,0],[24,369,0,0,0,0],[45,0,346,0,0,0],[45,0,347,0,141,0],[24,0,349,0,142,0],[44,0,348,0,143,0],[45,0,350,0,0,0],[44,0,347,0,0,0],[65,0,350,0,0,0],[45,0,347,0,0,0],[65,0,0,326,0,0],[65,0,0,327,0,0],[65,0,0,328,0,0],[5,0,0,306,0,0],[4,0,0,307,285,0],[5,0,0,0,206,0]],[[44,40,0,0,0,0],[44,60,0,0,0,0],[44,40,0,0,0,0],[44,41,0,0,0,0],[44,61,0,0,0,0],[44,61,0,0,0,0],[44,47,0,0,0,0],[44,8,0,0,0,0],[25,9,0,0,0,0],[44,0,0,0,0,0],[44,366,0,0,0,0],[44,367,0,0,0,0],[44,367,0,162,0,0],[44,368,0,0,0,0],[45,370,0,0,0,0],[65,367,0,0,0,0],[65,370,0,0,0,0],[65,369,0,0,0,0],[65,0,346,0,0,0],[64,0,347,0,0,0],[65,0,348,0,0,0],[65,0,0,326,0,0],[5,0,0,327,205,0],[5,0,0,0,226,0]],[[44,68,0,0,0,0],[44,68,0,0,0,0],[44,67,0,0,0,0],[25,68,0,0,0,0],[44,28,0,0,0,0],[45,60,0,0,0,0],[44,61,0,0,0,3],[44,60,0,0,0,0],[44,29,0,0,0,0],[44,0,0,0,0,0],[25,0,0,0,0,0],[44,0,0,0,0,0],[44,0,182,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[45,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[65,366,0,0,0,0],[65,367,0,0,0,0],[65,368,0,0,0,0],[65,0,346,0,0,0],[5,0,347,0,225,0],[5,0,0,0,246,0]],[[44,0,0,0,170,0],[44,0,0,0,167,0],[44,0,0,0,169,0],[44,0,0,0,170,0],[25,66,0,0,172,0],[45,67,0,0,0,0],[45,28,0,0,0,0],[44,61,0,0,0,0],[45,47,0,0,0,0],[44,9,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[65,202,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,23,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[65,366,0,0,0,0],[65,369,0,0,245,0],[64,0,0,0,266,0]],[[4,0,0,0,191,0],[5,0,0,0,187,0],[44,0,0,0,248,0],[44,0,0,0,230,0],[44,0,0,0,191,0],[44,0,0,0,172,0],[45,26,0,0,0,2],[44,61,0,0,0,0],[44,41,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[45,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[44,63,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,265,0],[44,0,0,0,206,0]],[[5,0,0,0,247,0],[4,0,0,0,269,0],[44,0,0,0,250,0],[44,0,0,0,250,0],[45,0,0,0,211,0],[45,0,0,0,192,0],[25,26,0,0,0,0],[44,61,0,0,0,0],[44,61,0,0,0,0],[44,29,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,43,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[45,0,0,0,225,0],[64,0,0,0,228,0]],[[5,0,0,0,267,0],[5,0,0,0,268,0],[45,0,0,0,269,0],[44,0,0,0,270,0],[44,0,0,0,191,0],[45,0,0,0,232,0],[44,46,0,0,0,0],[44,60,0,0,0,0],[25,61,0,0,0,0],[44,49,0,0,0,0],[45,0,0,0,0,0],[64,0,0,0,0,1],[45,0,0,0,0,0],[64,0,0,0,0,0],[65,22,0,0,0,0],[65,62,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[24,0,0,0,0,0],[64,0,0,0,245,0],[45,0,0,0,266,0]],[[4,0,0,0,207,0],[4,0,0,0,208,0],[25,0,0,0,209,0],[44,0,0,0,210,0],[44,0,0,0,251,0],[45,0,0,0,252,0],[45,46,0,0,0,0],[44,61,0,0,0,0],[44,60,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[64,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,166,0],[65,0,0,0,266,0],[65,0,0,0,206,0]],[[5,0,0,0,227,0],[44,0,0,0,228,0],[44,0,0,0,229,0],[44,0,0,0,230,0],[44,0,0,0,271,0],[44,0,0,0,272,0],[25,26,0,0,0,0],[44,60,0,0,0,0],[44,41,0,0,0,0],[45,49,0,0,0,0],[44,0,0,0,0,0],[45,42,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[45,0,0,0,0,0],[65,63,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[65,62,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,185,0],[65,0,0,0,186,0],[5,0,0,0,206,0],[4,0,0,0,207,0]],[[44,0,0,0,247,0],[44,0,0,0,248,0],[44,0,0,0,249,0],[45,0,0,0,250,0],[44,0,0,0,211,0],[44,0,0,0,212,0],[25,46,0,0,0,0],[45,61,0,0,0,0],[44,61,0,0,0,0],[45,29,0,0,0,0],[45,0,0,0,0,0],[45,0,0,0,0,0],[45,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,205,0],[65,0,0,0,206,0],[5,0,0,0,207,0],[4,0,0,0,208,0]],[[5,0,0,0,267,0],[44,0,0,0,269,0],[44,0,0,0,269,0],[25,0,0,270,0,0],[44,0,0,0,231,0],[24,0,0,0,232,0],[45,66,0,0,0,0],[44,28,0,0,0,0],[44,60,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[24,0,0,0,0,0],[24,0,0,0,0,0],[5,0,0,0,0,0],[45,0,0,0,0,0],[24,0,0,0,0,0],[24,62,0,0,0,0],[64,23,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[45,0,0,0,225,0],[64,0,0,0,226,0],[4,0,0,0,227,0],[4,0,0,0,228,0]],[[44,0,0,0,287,0],[44,0,0,0,288,0],[45,0,0,0,289,0],[25,0,0,290,0,0],[45,0,0,0,291,0],[44,0,0,0,292,0],[45,0,0,0,0,0],[44,26,0,0,0,0],[45,60,0,0,0,0],[44,47,0,0,0,0],[25,7,0,0,0,0],[44,8,0,0,0,0],[44,9,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,245,0],[64,0,0,0,246,0],[4,0,0,0,247,0],[4,0,0,0,248,0]],[[5,0,0,307,0,0],[44,0,0,308,0,0],[44,0,0,309,0,0],[44,0,0,310,0,0],[44,0,0,311,0,0],[44,312,0,0,0,0],[44,0,0,0,0,0],[24,46,0,0,0,0],[24,60,0,0,0,0],[44,60,0,0,0,0],[44,60,0,0,0,0],[44,60,0,0,0,0],[44,29,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,63,0,0,0,0],[64,0,0,0,0,0],[44,0,0,0,0,0],[65,0,0,0,0,0],[65,0,0,0,0,0],[64,0,0,0,265,0],[65,0,0,0,266,0],[5,0,0,0,267,0],[4,0,0,0,268,0]],[[44,0,0,327,0,0],[44,0,0,328,0,0],[45,0,0,329,0,0],[24,0,330,0,0,0],[25,0,331,0,0,0],[24,332,0,0,0,0],[44,0,0,0,0,0],[44,66,0,0,0,0],[45,68,0,0,0,0],[25,67,0,0,0,0],[24,28,0,0,0,0],[44,60,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,0,0],[64,0,0,0,185,0],[64,0,0,0,186,0],[64,0,0,0,206,0],[5,0,0,0,207,0],[4,0,0,0,208,0]],[[44,0,347,0,0,0],[44,0,348,0,0,0],[44,0,349,0,0,0],[44,0,350,0,0,0],[44,351,1,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,66,0,0,0,0],[44,28,0,0,0,0],[44,29,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[64,0,0,0,166,0],[65,0,0,0,186,0],[64,0,0,0,188,0],[64,0,0,0,226,0],[4,0,0,0,227,0],[5,0,0,0,228,0]],[[4,367,0,0,0,0],[44,368,0,0,0,0],[24,369,0,0,0,0],[44,370,0,0,0,0],[44,371,0,0,0,0],[45,0,0,0,0,0],[25,0,0,0,0,0],[24,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,46,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,185,0],[5,0,0,0,186,0],[4,0,0,0,187,0],[4,0,0,0,250,0],[5,0,0,0,246,0],[5,0,0,0,247,0],[5,0,0,0,248,0]],[[4,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[24,0,0,0,0,0],[45,0,0,0,0,0],[44,46,0,0,0,0],[44,49,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[5,0,0,0,285,0],[4,0,0,0,206,0],[4,0,0,0,228,0],[5,0,0,0,207,0],[4,0,0,0,208,0],[4,0,0,0,209,0],[5,0,0,0,210,0]],[[5,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,66,0,0,0,0],[44,69,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,185,0],[5,0,0,0,266,0],[5,0,0,0,226,0],[4,0,0,0,227,0],[4,0,0,0,228,0],[4,0,0,0,229,0],[5,0,0,0,230,0],[5,0,0,0,231,0]],[[4,0,0,0,0,0],[44,0,0,0,0,0],[25,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[24,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,185,0],[44,0,0,0,186,0],[4,0,0,0,206,0],[4,0,0,0,246,0],[5,0,0,0,247,0],[5,0,0,0,248,0],[4,0,0,0,249,0],[4,0,0,0,250,0],[5,0,0,0,251,0]],[[4,0,0,0,0,0],[5,0,0,0,0,0],[44,0,0,0,0,0],[24,6,0,0,0,0],[44,7,0,0,0,0],[44,7,0,0,0,0],[44,8,0,0,0,0],[44,7,0,0,0,0],[24,9,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,205,0],[44,0,0,0,206,0],[4,0,0,0,226,0],[5,0,0,0,227,0],[4,0,0,0,266,0],[4,0,0,0,267,0],[5,0,0,0,268,0],[5,0,0,0,269,0],[4,0,0,0,271,0]],[[5,0,0,0,0,0],[4,6,0,0,0,0],[44,7,0,0,0,0],[44,48,0,0,0,0],[44,40,0,0,0,0],[45,41,0,0,0,0],[44,27,0,0,0,0],[45,67,0,0,0,0],[44,69,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,0,0],[24,0,0,0,0,0],[44,0,0,0,0,0],[44,0,0,0,225,0],[4,0,0,0,226,0],[4,0,0,0,246,0],[4,0,0,0,247,0],[5,0,0,0,207,0],[5,0,0,0,208,0],[4,0,0,0,209,0],[4,0,0,0,210,0],[5,0,0,0,211,0]],[[5,8,0,0,0,0],[4,48,0,0,0,0],[4,60,0,0,0,0],[24,41,0,0,0,0],[45,60,0,0,0,0],[24,27,0,0,0,0],[45,69,0,0,0,0],[44,0,0,0,0,0],[24,0,0,0,0,0],[24,0,0,0,0,0],[24,0,0,0,0,0],[44,0,0,0,166,0],[44,0,0,0,169,0],[25,0,0,0,167,0],[24,0,0,0,168,0],[24,0,0,0,186,0],[44,0,0,0,187,0],[4,0,0,0,266,0],[5,0,0,0,267,0],[5,0,0,0,226,0],[4,0,0,0,227,0],[4,0,0,0,228,0],[5,0,0,0,229,0],[4,0,0,0,230,0]],[[24,60,0,0,0,0],[24,41,0,0,0,0],[24,40,0,0,0,0],[24,27,0,0,0,0],[44,67,0,0,0,0],[25,69,0,0,0,0],[44,0,0,0,0,0],[45,0,0,0,0,0],[24,0,0,0,166,0],[45,0,0,0,169,0],[24,0,0,0,170,0],[24,0,0,0,186,0],[24,0,0,0,189,0],[45,0,0,0,187,0],[24,0,0,0,188,0],[24,0,0,0,206,0],[45,0,0,0,207,0],[4,0,0,0,226,0],[5,0,0,0,227,0],[4,0,0,0,247,0],[4,0,0,0,248,0],[5,0,0,0,249,0],[4,0,0,0,250,0],[5,0,0,0,251,0]],[[24,41,0,0,0,0],[45,60,0,0,0,0],[24,60,0,0,0,0],[45,49,0,0,0,0],[44,0,0,0,0,0],[24,0,0,0,0,0],[24,0,0,0,0,0],[24,0,0,0,185,0],[24,0,0,0,186,0],[44,0,0,0,189,0],[44,0,0,0,190,0],[24,0,0,0,206,0],[44,0,0,0,207,0],[24,0,0,0,208,0],[45,0,0,0,209,0],[24,0,0,0,210,0],[24,0,0,0,246,0],[4,0,0,0,247,0],[4,0,0,0,248,0],[4,0,0,0,249,0],[5,0,0,0,250,0],[5,0,0,0,251,0],[5,0,0,0,248,0],[4,0,0,0,249,0]],[[24,67,0,0,0,0],[24,67,0,0,0,0],[24,68,0,0,0,0],[44,69,0,0,0,0],[24,0,0,0,0,0],[25,0,0,0,0,0],[24,0,0,0,0,0],[25,0,0,0,205,0],[45,0,0,0,206,0],[24,0,0,0,209,0],[45,0,0,0,210,0],[44,0,0,0,227,0],[24,0,0,0,228,0],[45,0,0,0,229,0],[25,0,0,0,230,0],[45,0,0,0,271,0],[24,0,0,0,266,0],[5,0,0,0,267,0],[5,0,0,0,268,0],[4,0,0,0,269,0],[4,0,0,0,270,0],[4,0,0,0,271,0],[5,0,0,0,266,0],[5,0,0,0,267,0]],[[24,0,0,0,167,0],[24,0,0,0,168,0],[24,0,0,0,169,0],[25,0,0,0,170,0],[24,0,0,0,167,0],[24,0,0,0,168,0],[44,0,0,0,169,0],[24,0,0,0,186,0],[44,0,0,0,226,0],[24,0,0,0,229,0],[24,0,0,0,230,0],[25,0,0,0,247,0],[24,0,0,0,248,0],[24,0,0,0,249,0],[45,0,0,0,250,0],[24,0,0,0,291,0],[24,0,0,0,206,0],[4,0,0,0,207,0],[5,0,0,0,208,0],[4,0,0,0,209,0],[5,0,0,0,210,0],[5,0,0,0,211,0],[4,0,0,0,206,0],[5,0,0,0,207,0]],[[24,0,0,0,187,0],[24,0,0,0,188,0],[45,0,0,0,189,0],[44,0,0,0,190,0],[24,0,0,0,187,0],[45,0,0,0,188,0],[24,0,0,0,189,0],[25,0,0,0,206,0],[24,0,0,0,246,0],[25,0,0,0,249,0],[44,0,0,0,250,0],[24,0,0,0,267,0],[45,0,0,0,268,0],[24,0,0,0,269,0],[45,0,0,0,270,0],[45,0,0,0,226,0],[24,0,0,0,227,0],[5,0,0,0,228,0],[4,0,0,0,229,0],[4,0,0,0,230,0],[4,0,0,0,231,0],[5,0,0,0,208,0],[5,0,0,0,209,0],[5,0,0,0,210,0]],[[24,0,0,0,207,0],[24,0,0,0,208,0],[45,0,0,0,209,0],[24,0,0,0,210,0],[45,0,0,0,207,0],[44,0,0,0,208,0],[45,0,0,0,209,0],[44,0,0,0,210,0],[24,0,0,0,266,0],[24,0,0,0,269,0],[24,0,0,0,270,0],[24,0,0,0,207,0],[45,0,0,0,208,0],[24,0,0,0,209,0],[24,0,0,0,210,0],[45,0,0,0,228,0],[45,0,0,0,229,0],[45,0,0,0,230,0],[4,0,0,0,231,0],[4,0,0,0,226,0],[5,0,0,0,227,0],[5,0,0,0,228,0],[4,0,0,0,229,0],[5,0,0,0,230,0]]],
    "tileset": "tileset.png",
    "borderMap" : [{
        "mapName" : "map1", 
        "cardDir" : "west",
        "index" : 0
    }]
  }

Le visible

Les événements

Premières choses : désormais, il y a des événements ! Ce sont ces carrés bleus, qui vont déclencher un script dans différentes conditions. Certains se déclenchent au passage, d'autre lorsqu'on est dessus et qu'on appuie sur une touche.

Le script de l'événement est une bête fonction JavaScript, mais qui a accès à tous les objets du jeu (le joueur, la map, les ennemis quand ils arriveront ...). De cette manière, la fonction est appelée à chaque passage sur la case, mais elle n'effectuera une action qu'a certaine conditions, explicitée dans le corps de la fonction (par exemple, ne se déclencher que si la touche espace est pressée) et cette action peut cibler n'importe quoi, par exemple immobiliser le joueur durant l'affichage d'un texte. Lorsqu'un événement est déclenché, il bloque tous les autres, pour éviter qu'un second événement se lance durant le premier.

La boite de dialogue

Les événements amènent à une deuxième avancée : la boite de dialogue. Elle suit le joueur où qu'il aille, en s'adaptant à sa position (passage à droite ou à gauche, là ou il y a le plus de places) et permet d'afficher une suite de texte, en passant au suivant à l'appui sur la touche espace. Le tout est en HTML/CSS, parce que pour formater du texte, c'est quand même le plus simple.

Elle est capable de gérer une file de texte à afficher, et peut déclencher une fonction lorsque la file est vide. De cette manière, on peut déclencher une action à la fin d'un phase de dialogue. De plus, on ne peut passer au texte suivant qu'une seconde après sont affichage, pour éviter les validations intempestives (oups, je suis resté appuyé trop longtemps sur espace !)

La gestion de profondeur

Dans la première version, une partie de la map était dessinée sous le héros, puis le héros, puis la seconde partie de la map. De cette manière, certains objets pouvaient occulter le héros. Le souci, c'est que le héros fait 3 tiles de haut. Lorsque le héros avance vers le sud et se retrouve face à un arbre, il doit apparaitre au-dessus de l'arbre. Mais s'il arrive depuis le sud, il doit apparaitre derrière !

Pour pouvoir le faire passer correctement derrière un tronc d'arbre, il a fallu découper le joueur en 3 tranches, et l'afficher sur 3 niveaux différents. De la même manière, le terrain à été découpé en tranches (5 en tout). L'idée étant qu'il y aura une partie affichée sous les pieds du héros (tranche 1), sous le buste (tranche 2) et sous la tête (tranche 3).

L'invisible

Chargement des maps

Dans la première version, je disposais d'un objet énorme, qui contenait toutes les maps du jeu. Le souci étant qu'il allait falloir charger un fichier contenant les données de cet objet, et que ça forçait un temps d'attente avant de lancer le jeu

Pour changer ça, j'ai stocké les maps séparément, chacune dans son objet, mais avec un pointeur vers les maps voisines. Lorsque le héros rentre dans une map, on déclenche le chargement des maps voisines (ajax est mon ami). De cette manière la transition entre les maps sera fluide, sans pour autant devoir charger l'intégralité du jeu.

Gestion interne

Dans la version 0.1, des fonctions étaient appelées dans une grande boucle, qui appelaient d'autres fonctions, selon les touches enfoncées au moment précis, qui à leurs tours appelaient d'autres fonctions. C'était le plus simple à mettre en place, mais ça a mené à du code imbuvable, avec des conditions partout et des fonctions de 1500 lignes de long.

Pour remédier à ça, j'ai adopté un modèle évènementiel. L'appui sur une touche déclenche un événement, cet événement va déclencher plusieurs fonctions qui pourront, selon les cas, déclencher d'autres évènements. On peut voir les événements déclenchés en ouvrant la console JavaScript (ils sont loggés)

Chargement du code

Précédemment, le code, contenu dans plusieurs petits fichiers, était intégralement linké pour lancer le jeu. Comme le chargement de script est bloquant, chaque script était chargé à son tour. Outre la lourdeur du code avec ses 15 balises <script>, il fallait prier pour que le script se lance lorsque tout était bien chargé.

Désormais, on n'inclue qu'un seul script dans la page, qui se chargera de récupérer le reste. Puis, quand tout sera chargé, le jeu sera lancé.

En bref

J'ai passé pas mal de temps à tout réécrire proprement, et visiblement ça a payé, puisque l'implémentation de nouvelles fonctionnalités (événements, par exemple) a été très rapide.

Maintenant, va falloir s'attaquer au prochain gros morceau, les ennemis, les IA, la gestion du combat. Mais j'ai pleins d'autre petite idée à ajouter et/ou tester. Par exemple, rajouter un calque qui permettrait de faire varier la luminosité et la teinte de l'ensemble, pour faire des jeux de lumière. En bref, du fun en perspective !

2 commentaires

avatar #1 PloupeMarley a dit :

J'airéussiàfranchirlabarrièrehorizontalemaispaslaverticale,c'estfaitesprès?
Tonsitefaitlagrèvedesespaces.

avatar #2 Whiteshoulders a dit :

@PloupeMarley : Ah, oui j'ai fait la carte rapidos, du coup y'a quelques petits bugs, vu que j'ai pas encore fait d'éditeur propre. Donc y'a certains blocs que j'ai du oublier de mettre traversable.
Pour les espaces, c'est con, mais le jeu supprime le comportement par défaut de la touche espace ... du coup on peut plus l'utiliser pour écrire. J'avais pas pensé à ça.

Edit: C'est bon, maintenant on peut utiliser la touche espace quand on perd le focus sur le jeu.

Écrire un commentaire

Vérification anti-spam :
Quelle est la deuxième lettre du mot zudp ?