Dossier

Un jeu se compose de 3 éléments, un Document HTML, une Feuille CSS et un Fichier JAVASCRIPT, enregistrés dans un dossier.


Document HTML

Le langage HTML (Hyper Text Markup Language) est un langage informatique qui, par l'intermédiaire de balises, sert à signaler au navigateur comment construire les pages web visitées.

Le document HTML du jeu PONG-BALL, indexPong, se compose de plusieurs balises.

<!DOCTYPE html> le type de document et le langage utilisé.

<html> et </html> définissant la base du document HTML. Toutes les autres balises doivent être placées dans cette balise.

<head> et </head> définissant la tête du document, le navigateur n'affichera pas ces informations, elles serviront à décrire et améliorer la page web.

<title> titre de la page pour les moteurs de recherche.

<meta> encodage du document.

<link> rattache la feuille CSS au document HTML.

<body> et </body> définissant le corps du document HTML. Le navigateur affichera tout ce qui est placé dans cette balise.

<div> et </div> Conteneur qui permet de diviser le document HTML afin d'organiser son contenu.

<canvas> et </canvas> Zone de dessin (pour le jeu) dont la hauteur et la largeur sont définies en pixels dans le code HTML.

<script> et</script> rattache le fichier JAVASCRIPT au document HTML.


Feuille CSS

Le langage CSS (Cascade Style Sheets) est un langage informatique permettant d'attribuer des styles (taille, couleur, police d'écriture, etc.) différents dans un document HTML.

La feuille CSS du jeu PONG-BALL, stylePong, se compose de plusieurs éléments.

body applique une largeur et une couleur de fond au body (corps du document HTML) et le centre par rapport à la page.

div applique une largeur au div (conteneur du document HTML) et le centre par rapport au body.

canvas applique une largeur et une couleur de fond au canvas (zone de dessin) et le centre par rapport au div.


Fichier javascript

Le langage JAVASCRIPT est un langage de programmation dynamique. Il permet de rendre interactive les pages web.

Le fichier JAVASCRIPT du jeu PONG-BALL, mainPong, se compose de deux variables.

var canvas permet d'accéder au canvas (zone de dessin du jeu).

var ctx permet d'accéder au contexte '2d' du canvas.

C'est dans le fichier JAVASCRIPT, à la suite de ces deux variables, que vous devrez écrire le code du jeu.