Retour au parcours HTML5

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.

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

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+

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 !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

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.

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

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+

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 !

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.