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 (17)

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 !

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)

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.

Dialoguez avec les autres membres de la gamecodeur school.

Accédez maintenant à notre serveur Discord privé : Entraide, Game Jams, Partage de projets, etc.

Vous devez être membre de la Gamecodeur School Premium pour être autorisé à accéder au serveur.