Bonjour,
Pour commencer le tutorial on va découvrir la balise
<canvas> crée par l’html5, c’est
pour sa qu’on appelé ses jeux de l’html5, normalement les jeux son faites pas
le JavaScript mais sans la balise canvas on aura jamais des animations ou des
jeux.
Il y’a tout se qu’il
faut pour faire un jeu complète avec les fonctions qui sont crée avec le canvas
, comme dessiner un rectangle, cercle, ligne, texte, image ….
Bon, commençons avec quelque base :
1er On va créer un nouveau fichier .html avec un
code très basique :
< !DOCTYPE HTML><html> <head></head><body> <canvas id=’canvas’ width= ‘640’ height=’480’></canvas></body></html>
Comme vous le remarquez j’ais intégré la canvas avec un
largeur de 640 et hauteur de 480, vous pouvez choisir les dimension que vous
voulez, on peut aussi si on veut transférer notre jeu à un Smartphone on doit
faire 320*480 (largeur=320, hauteur=480), c’est les dimension les plus communs.
En plus on lui a associé l’id ‘canvas’, pour indiquer
qu’elle canvas utiliser dans notre code, si on ‘as 2 ou plus de canvas, par
exemple : canvas1, canvas2, canvas3 … on peux alors contrôler ce qu’on
veut facilement.
Maintenant notre code JavaScript, soit on l’ajoute dans un
fichier indépendant ou de l’écrire directement dans notre fichier html.
Pour l’intégrer directement, il suffit de créer la balise
<script></script> dans <head> :
<head><script>//Notre code JavaScript</script></head>
Sinon pour
créer un fichier indépendant de l’html, il faut insérer la balise <script
src=’fichier.js’></script>, aussi dans <head> :
<head><script src=’fichier.js’></script></head>
Fichier.js
c’est le fichier où on vas mettre notre code JavaScript.
2ème
Le premier code :
Il faut maintenant
créer une variable (ou objet) qui
contient les informations sur la balise canvas :
Le
code :
window.onload = function (){var canvas = document.getElementById(‘canvas’) ;var context = canvas.getContext(’2d’) ;}
Dans ces
deux lignes on initialise notre champ de dessin.
Le premier
code : il démarre notre code d’ès l’ouverture de la page.Il faut mettre tout son code dedans.
Le deuxième
code : on créer une variable qui contient tout les informations sur la
canvas avec id ‘canvas’, comme à se que j’ai dit avant, si on ‘a deux ou
plusieurs canvas on peux facilement les gérer avec leur id.
Le troisième
code : on créer une variable qui contient les information sur le champ de
dessin approprié a l’objet canvas que l’on a crée, bien sûre notre champ c’est
en 2d.
Ce code est
similaire à celui là :
var context = document.getElementById(‘canvas’).getContext(’2d’) ;
Mais
l’autre est mieux, pour plusieurs raisons qu'on va voir dans la suite.
Bon, ce
qu’on vient de voir c’est la base de notre code, par la suite tout dépend de
l’objet context, pour faciliter les choses on change context par c,
ou d’un mot de votre choix.
Notre code
final est :
window.onload = function (){var canvas = document.getElementById(‘canvas’) ;var c = canvas.getContext(’2d’) ;}
