Pluie de pierres précieuses

1. Le comportement attendu

Ce projet est un jeu dans lequel des tuiles représentant des symboles (nous avons choisi des pierres précieuses, mais il pourrait s’agir tout aussi bien de fleurs, de cristaux, d’animaux ou même encore d’à peu près n’importe quoi, selon ce qui vous inspire) qui descendent du haut de l’écran vers le bas, dans une aire de jeu.

Le but pour le joueur est de cliquer sur un groupe de trois pièces (ou tuiles) de même type ou plus pour les faire disparaître et ainsi "libérer" les cases du plateau de jeu dans lesquelles elles se trouvent au moment du clic.

La disparition d’une tuile entraîne la chute de la tuile située au-dessus d’elle, qui emmène celle située au-dessus d’elle, et ainsi de suite… provoquant de ce fait une réaction en chaîne pouvant impliquer de nombreuses tuiles.

À chaque tuile supprimée, un nombre de points est accordé au joueur, multiplié à chaque itération de la réaction en chaîne.

Chaque niveau nécessite la réalisation d’un contrat pour être réussi. Il s’agit a minima d’un certain nombre de cases à libérer. Une ligne de temps se consume et impose que les termes du contrat pour franchir le niveau soient atteints avant qu’elle...

1. La page d’accueil

Il nous faut maintenant prendre les décisions nécessaires quant à l’aspect que doit avoir la page d’accueil du jeu.

Nous décidons que celle-ci doit afficher les éléments suivants :

L’organisation globale des éléments de la page du jeu et celle de la page d’accueil doivent ressembler, de près ou de loin, à celle de ces croquis :

2. Les options

Pour régler les options du jeu, nous devons gérer des boutons sur l’écran d’accueil. 

Ils doivent permettre de changer les niveaux sonores des différents médias utilisés dans le jeu et de démarrer une nouvelle partie.

3. Les changements de niveau

Chaque niveau est associé à un "contrat" qui nécessite d’être réussi pour être validé. Ce contrat consiste en diverses actions à mener et doit être présenté au joueur pour qu’il connaisse l’ensemble...

1. Les polices de caractères

Comme nous avons déjà pu le faire dans les projets précédents, pour décider des polices de caractères avec lesquelles notre page de jeu affiche ses textes, nous nous connectons avec un navigateur sur le site dédié de Google : https://fonts.google.com/, qui en propose de nombreuses utilisables gratuitement.

Très simple d’utilisation, il est possible de saisir une courte phrase en exemple afin d’en apercevoir un rendu avec les polices sélectionnées et pouvoir ainsi faire un choix de manière visuelle.

Libre à vous bien sûr de sélectionner les polices qui vous plaisent mais, pour ce projet, nous retenons la police Julee.

2. Les pierres précieuses

Pour réaliser les éléments graphiques de notre projet, nous utilisons le logiciel Adobe Photoshop.

Commençons par créer les éléments graphiques représentant les tuiles du jeu, c’est-à-dire des pierres précieuses pour le projet qui nous occupe.

Une fois lancé, nous demandons au logiciel de créer une nouvelle image d’une taille de 256 pixels de largeur et de 256 pixels de hauteur avec un fond transparent. 

Notre image apparaît une fois le bouton Créer cliqué.

De manière à ne pas dessiner n’importe comment ni n’importe quoi, intéressons-nous aux règles de l’art en matière de taille de pierres précieuses et de pierres fines. En effet, la joaillerie étant un métier d’art, des codes précis ont été établis par la corporation et nous devons les prendre en compte si nous souhaitons que nos pierres, même stylisées, soient convaincantes.

Pour cela, une recherche sur votre moteur de recherche préféré vous permet de trouver un schéma récapitulant les principales tailles de gemmes ainsi que leur nom.

En voici un exemple :

Il ne s’agit bien évidemment pas de dessiner trait pour trait ces modèles, mais plutôt de s’en inspirer pour obtenir des dessins stylisés mais convaincants de belles pierres.

Tentons l’aventure en dessinant un diamant taillé en brillant rond.

Double cliquons sur le calque nommé Calque1 pour...

1. L’aire de jeu

Passons à présent au vif du sujet : la phase de programmation de notre jeu.

Pour la structure de fichiers que nous adoptons, nous créons un répertoire Pluie dans lequel nous mettons en place l’arborescence de répertoires suivante :

Pluie 
--------images 
--------music 
--------scripts 
--------sounds 
--------styles 

Nous en profitons pour placer une copie de toutes les images que nous avons dessinées dans la section précédente dans le répertoire images que nous venons de créer, les musiques à jouer dans le répertoire music et les sons de bruitages ou d’effets dans le répertoire sounds.

Nous prenons également soin de placer le fichier normalize.css dans le répertoire styles et le fichier jquery-3.1.1.min.js dans le répertoire scripts.

Le fichier normalize.css contient des directives CSS qui permettent de ne pas prendre en compte les valeurs par défaut dictées par le navigateur dans lequel la page est affichée lorsqu’aucune directive explicite n’est appliquée.

Le fichier jquery-3.1.1.min.js représente la bibliothèque de code JavaScript jQuery. Cette bibliothèque permet à tout développeur qui l’utilise de profiter de fonctions bien pratiques pour, entre autres, animer ou sélectionner des objets HTML situés sur la page.

Le fichier principal de notre projet se nomme main.html et est placé à la racine de notre répertoire Pluie.

Dans son code figurent les instructions HTML nécessaires pour créer la structure de la page web.

Dans un premier temps, ce code est constitué des lignes suivantes :

<!DOCTYPE html> 
<html> 
    <head> 
           <title>Pluie</title> 
           <meta charset="utf-8"> 
           <link href="https://fonts.googleapis.com/css2?family=Julee&display= 
swap" rel="stylesheet"> 
           <link rel="stylesheet" type="text/css"...