Méthode

Création dossier

La création du dossier est la première chose à faire dans la construction du jeu.

Exemple pour le jeu PONG-BALL.

Dans la rubrique 'Documents' de Windows, cliquer sur 'Nouveau dossier'.
Donner un nom au nouveau dossier.
Taper sur la touche 'enter' du clavier.

Enregistrer fichier

Aprés la création du dossier, il faut enregistrer le document HTML, la feuille CSS et le fichier JAVASCRIPT.

Ouvrir l'éditeur de texte sur la moitié droite de votre écran.

Placer le site codetonjeu sur la partie gauche de votre écran.


Ouvrir la page 'Document HTML' (cette page est dans 'code de PONG-BALL')



Recopier le code HTML dans l'éditeur de texte.
Cliquer sur 'Enregistrer'.



Enregistrer dans PONG-BALL
Nom du fichier : indexPong.html (ne pas oublier '.html')
Type de langage : Hyper Text Markup Language file(*.html)
Cliquer sur 'Enregistrer'.




Le document HTML est enregistré dans le dossier PONG-BALL.
Vous pouvez maintenant le fermer en cliquant sur la croix rouge.

Répéter les mêmes opérations pour enregistrer la feuille CSS et le fichier JAVASCRIPT.


Coder jeu

Ouvrir l'éditeur de texte sur la moitié droite de votre écran.

Placer le site codetonjeu sur la partie gauche de votre écran.


Ouvrir la page 'Dessiner terrain' (cette page est dans 'code de PONG-BALL')
Dans l'éditeur de texte, cliquer sur 'ouvrir'.



A l'aide du menu déroulant, ouvrir le dossier PONG-BALL.
Cliquer sur le fichier mainPong.
Type de fichier : JavaScript file(*.js;*.jsm;*.jsx;*.ts;*.tsx)
Cliquer sur 'ouvrir'.



Ouvrir un nouvel onglet dans le navigateur pour lancer le jeu PONG-BALL.



Dans le dossier PONG-BALL, qui est placé dans la rubrique 'documents' de Windows, faire un double clic sur le fichier indexPong.



Le jeu PONG-BALL se résume, pour l'instant, à ce rectangle vert qui correspond au canvas.
Repasser sur la vue de la page 'dessiner terrain' et recopier le code.



Cliquer sur 'Enregistrer'.
Repasser sur la vue du jeu PONG-BALL.



Cliquer sur 'Actualiser la page courante'.



En résumé, vous codez et vous enregistrez dans l'éditeur de texte et ensuite vous actualisez la page du navigateur pour voir le résultat.