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
Adhérez aujourd'hui
Gamecodeur c’est à partir de 8 € / mois (facturé annuellement)
Comments (12)
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 !