19 réflexions au sujet de “Programmation JavaScript / HTML5 : Introduction à la programmation graphique avec HTML5”

1. Y à un bug dans le potage David 🙂

   let canvas = document.getElementById(« canvas »);
   let ctx = canvas.getContext(« 2d »);

   let img = newImage();
   img.src (« PNoel.png »);
   ….
   ….

   la ligne 2 me renvoi:

   TypeError: null is not an object (evaluating ‘canvas.getContext’)

   Je précise que je suis sur Mac, y à pas de raison normalement…

2. C’est un soucis avec ta ligne d’avant :
   let canvas = document.getElementById(“canvas”);
   « null is not an object » te dit que ta variable canvas est nulle.
   Donc ton HTML ne doit pas contenir de canvas avec comme id « canvas ».
   Aucun rapport avec Mac ou PC.

3. Merci David, et dire que j’ai installé Opéra pour voir la même erreur…
   Mon image s’est enfin affichée, ouf 🙂

4. On veut la suite ! Trop du kiff ce tuto, un pur plaisir de pouvoir coder un jeu sur navigateur.

5. Bonsoir David.
   Cela fait plusieurs jours que j’ai tout retapé le début très bien mais à la fin j’ai du commettre une erreur car plus d’image du tout et vous dîtes après 25 minutes que vous nous mettez à disposition les fichiers pour comparer et justement vérifier mais je ne trouve pas ces fichiers pouvez-vous me dire où ils sont. Bien cordialement. Merci par avance. JPM

6. Cet atelier a été totalement remis à jour en mars 2021. Tu as maintenant accès aux sources et les explications sont plus détaillées.

7. c’est super vivement la suite !

8. Salut david
   Bien sympa de décortiquer tout ca!
   Je cherche a gérer le gamepad, ca parait pas simple
   J’ai trouvé ca mais c’est compliqué visiblement….
   https://developer.mozilla.org/fr/docs/Web/API/Gamepad_API/Using_the_Gamepad_API

9. Salut David,
   merci pour cet atelier.
   Est-ce qu’on peut faire comme avec Love2D des images upscalées, des zooms, des scrolling parallaxe sans trop souffrir ?
   Le Tile Map est il abordable à prendre en main ?

   J’attends avec impatience le prochain atelier qui traitera (peut-être) de ces questions..
   A+

10. Terrible ! Merci beaucoup pour le bonus qui règle le problème de fluidité qui me rendait fou ! Top top top

11. Salut, je suis en train de suivre l’atelier. Je bloque sur la vidéo image et sprite …

    J’arrive à charger l’image et à la faire bouger par contre j’ai un soucis d’affichage, je n’ai pas de transparence. J’utilise chrome pour afficher mon jeu, je suis en train de fouiller dans la doc d’html5 et de canvas mais je n’ai pas résolu mon problème.

    Quelqu’un a t-il rencontré ce problème ??

    Merci A+, bon code à tous !

12. Ok, trouvé!
    Une simple inversion de canvas.heigth au lieu de canvas.height causait le bug !

    Bon code !

13. Salut David,

    Alors a la deuxieme video quand tu fait la restriction de fps
    
if (dt < (1 / 60) - 0.001) {
return;
}


    Chez moi la page devient full black sans aucun message d’erreur dans la console.

14. Dommage que je ne peut pas edit le message.

    J’ai trouver l’erreur.

    J’avais toujours derniereUpdate = Date.now() ce qui fessait que mon dt était a -16328…

15. Merci Klariany pour ton auto-correction, car j’ai eu le même problème : j’ai laissé Date.now() au lieu de 0. 😉

16. J’ai testé un truc pour les events un peu dans le style Unity pour avoir un service plus standard come le input.GetKeyDown(Keycode) du coup accessible partout sans besoin de codé qq de specific.

    let KeyRecords=[];

    /* KeyDown Event */
    function _KeyDown(t)
    {
    t.preventDefault();
    let found = false;
    KeyRecords.forEach(element => {
    if (element.keycode == t.code)
    {
    element.keyvalue = true;
    found = true;
    }
    })
    if (!found)
    {
    let varkey = {keycode:"test",keyvalue:true};
    varkey.keycode = t.code;
    KeyRecords.push(varkey);
    }

    }
    /* A refaire pour le KeyUp*/
    ...
    document.addEventListener("keydown",_KeyDown, false);
    document.addEventListener("keyup",_KeyUp, false);
    ...
    /* Use to get the state of a keycode */
    function INPUT_IsKeyDown(keycode)
    {
    let value=false;
    KeyRecords.forEach(element => {
    if (element.keycode == keycode)
    {
    value = element.keyvalue;
    }
    })

    return value;
}
...
function INPUT_IsKeyUp ... etc...


    Du coup pour connaitre l’état il faut just connaitre le KeyCode ce qui peut aussi standardizer avec des const (Bon faut le refaire à la mano mais ça plus l’intellisence de Visual Studio Code ça aide un max)

    const KEYCODE_A = ‘KeyQ’
    const KEYCODE_LEFT = ‘ArrowLeft’
    etc…

    J’ai nommé les function avec des Maj et un nom plus generale example INPUT_
    Ainsi en tapant INPUT_ VS Code me propose toute la liste des service débuttant par INPUT… [IsKeyUp.. IsKeyDown..]
    Ensuite dans le parametre plus besoin de chercher sur internet il suffit de taper KEYCODE_(VS Code me propose également la list)

17. bonjour et merci pour la formation, étant developeur web depuis plusieurs années j’ai pris du plaisir a apprendre a faire des jeux en js… par contre il manque la vidéo 4, sur la deltatime…

18. salut je ne sais pas pourquoi mais je ne vois pas les vidéo de l’atelier 3 et 4. Je vois que les vidéos d’introduction.merci

19. J’ai ENFIN compris cet atelier ! En fait j’ai bloqué quelques mois sur la partie « Objet » + constructor + méthode. Mais  pour comprendre j’ai quand même dû suivre d’autre formation sur youtube car y’a des choses qui étaient présentés de la sorte qu’un certain mystère m’empêchait d’avancer. Je suis revenu dessus, et j’ai cette fois ci pu faire le parallèle entre ce que je fait déjà en assembleur sur Amstrad et Atari ST avec la notion de boucle. Ici ce qui me bloquait c’était de comprendre qu’en fait la fonction run (), est en fait fait la fonction « MaBoucle() » qui est « démarré »/ »executée » à l’intérieur de la fonction d’init par la fonction setInterval. Le reste a suivis, sauf que parfait je suis obligé de faire des différences sémantique car tu donnes parfois les même noms à des choses différentes. Une fois passé cette barrière j’ai pu traduire ton code avec ma propre approche textuel 🙂

    En tout cas merci 🙂