Les bases pour la création d’un jeu en HTML5
http://isnangellier.alwaysdata.net/Gobble.html

L’objectif est de réaliser, pas à pas, un petit jeu comportant des niveaux, en partant de la base.

  1. Représenter une balle rouge sur l’écran (1/10)

On commence par créer une page Gobble.html sur laquelle on place un canvas.
On réalise ensuite un fichier Gobble.css pour centrer le canvas sur la page et définir sa position ainsi que sa largeur.
On réalise enfin un fichier Gobble.js pour dessiner l’objet sur le canvas.

Gobble.html

***********************************************
<!DOCTYPE HTML>
<html lang="en">

<head>

<meta charset='UTF-8'/>

<title>Gobble</title>

<link rel="stylesheet" href="Gobble.css" type="text/css" />

</head>

<body>

<div id='container'>

<canvas id='game' width='480' height='480'>
</canvas>

</div>

<script src='Gobble.js'></script>

</body>
</html>


***********************************************

Gobble.css

***********************************************

***********************************************

Gobble.js

***********************************************

  1. Déplacer la balle sur l’écran (2/10)

1. Recherche des codes des touches

Gobble.js

***********************************************

***********************************************

Directions : gauche : 37 ;  haut : 38 ; bas : 40 ; droite : 39

2. Création d’un objet balle et interaction avec le clavier (3/10)

Gobble.js

***********************************************

***********************************************

3. Se donner des limites pour le déplacement (4/10)

On ajoute une nouvelle propriété, appelée r, qui désigne le rayon de la balle et on se donne des limites de déplacement en fonction des dimensions du canvas et en tenant compte du rayon de la balle.

Gobble.js

***********************************************

***********************************************

  1. Créer d’autres balles bleues et mobiles aléatoirement sur le canvas (5/10)

Gobble.js

***********************************************

***********************************************

On remarquera que ctx.clearRect(0, 0, canvas.width, canvas.height) a été mis une seule fois dans le update pour que l’effacement se fasse une seule fois par frame.

  1. Collision entre la balle rouge et les autres balles(6/10)

Gobble.js

***********************************************

***********************************************

  1. Articulation du jeu (7/10)

Lorsque la boule verte dirigée par le joueur touche une boule rouge, cette dernière disparaît en étant retirée de la liste, tandis que la boule verte grossit. Lorsqu’elle rencontre une boule bleue, cette dernière ne disparaît pas mais elle fait grossir la boule verte, l’objectif est de réussir à capturer toutes les boules rouges sans trop grossir sinon on perd la partie dès que l'on percute une boule bleue.
Pour faire apparaître des informations au dessus du jeu, au premier plan, nous allons utiliser un autre canvas appelé info. D’où les nouveaux fichiers html et css.

Gobble.html

***********************************************



<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset='UTF-8'/>

<title>Gobble</title>

<link rel="stylesheet" href="Gobble.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
</head>

<body>

<div id='container'>

<canvas id='game' width='480' height='480'>

</canvas>

<canvas id='info' width='480' height='480'>

</canvas>

</div>

<script src='Gobble.js'></script>

</body>

</html>







***********************************************

Gobble.css

***********************************************

Gobble.js

***********************************************

***********************************************

  1. Réalisation d’un constructeur (8/10)

Dans le but de créer des niveaux dans le jeu, on réorganise le code en réalisant un constructeur appelé Game qui contient toutes les variables du jeu. Pour rendre le jeu plus jouable, on ajoute une fonction appelée réglage qui permet au départ du jeu de maintenir les balles à une distance suffisante de la boule verte, la réinitialisation se fera aussi longtemps que la distance n’est pas suffisante.

***********************************************

***********************************************

  1. Amélioration du code (9/10)

Ajout d’une page d’accueil. Pour l’ajout de sons, il faut ajouter un composant audio dans le html et les sons dans le même dossier
http://isnangellier.alwaysdata.net/pop.mp3
http://isnangellier.alwaysdata.net/sirp.mp3

Ajouter également l'image suivante dans le dossier : http://isnangellier.alwaysdata.net/try-again.png

Gobble.html

***********************************************


<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset='UTF-8'/>

<title>Gobble</title>

<link rel="stylesheet" href="Gobble.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>

</head>

<body>
<audio id="audio">
</audio>
<div id='container'>

<canvas id='game' width='480' height='480'>

</canvas>

<canvas id='info' width='480' height='480'>

</canvas>

</div>


<script src='Gobble.js'></script>














***********************************************

Gobble.js

***********************************************

***********************************************

  1. Dernière amélioration : collision entre les balles et rebond (10/10)

Gobble.js

***********************************************