Adhérez aujourd'hui
Gamecodeur c’est à partir de 8 € / mois (facturé annuellement)
Introduction à la programmation graphique avec HTML5
Dans cet atelier apprenez tout ce qui est nécessaire pour commencer la programmation de jeux vidéo web avec HTML5.
Construisez une structure de code réutilisable pour tous vos projets : simple, lisible et évolutive !
Je vous explique tout et vous codez avec moi, pas à pas, pour parfaitement assimiler les concepts nécessaire :
- Créer une gameloop
- Afficher une image
- Gérer le deltatime
- Créer un objet « sprite »
- Recevoir les événements du clavier
20 réflexions au sujet de “Programmation JavaScript / HTML5 : Introduction à la programmation graphique avec HTML5”
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…
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.
Merci David, et dire que j’ai installé Opéra pour voir la même erreur…
Mon image s’est enfin affichée, ouf 🙂
On veut la suite ! Trop du kiff ce tuto, un pur plaisir de pouvoir coder un jeu sur navigateur.
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
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.
c’est super vivement la suite !
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
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+
Terrible ! Merci beaucoup pour le bonus qui règle le problème de fluidité qui me rendait fou ! Top top top
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 !
Ok, trouvé!
Une simple inversion de canvas.heigth au lieu de canvas.height causait le bug !
Bon code !
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.
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…
Merci Klariany pour ton auto-correction, car j’ai eu le même problème : j’ai laissé Date.now() au lieu de 0. 😉
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)
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…
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
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 🙂
On est bientôt en 2025 et le cours est toujours aussi bon et pertinent ! J’apprends le JS pour la prochaine gamejam gamecodeur. C’est finalement vraiment proche du LUA je trouve voir même du C# avec les classes.
Assez bluffant devoir un sprite bouger à 240fps sur mon ordi dans chrome, exploitant les 240hz de mon écran!
A voir ce que ça donne quand on en affiche plusieurs centaines sur une map !
Merci David, un vrai plaisir