Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Jeux d'arcade pour le Web
  3. Pluie de pierres précieuses
Extrait - Jeux d'arcade pour le Web De la conception à la réalisation avec JavaScript
Extraits du livre
Jeux d'arcade pour le Web De la conception à la réalisation avec JavaScript Revenir à la page d'achat du livre

Pluie de pierres précieuses

Description

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...

Le rendu à l’écran

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 :

  • Un texte explicatif servant d’aide et décrivant comment se déroulent toutes les actions de jeu.

  • Une zone permettant de suivre l’évolution du contrat en cours.

  • Des boutons de commande permettant de régler les options et de démarrer une partie.

  • Une zone permettant l’affichage d’informations diverses.

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 :

images/04-2-1-1.png
images/04-2-1-2.png

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...

Les médias du jeu

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. 

images/04-3-2-1.png

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 :

images/04-3-2-2.png

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...

La mise en œuvre

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"...

Continuer à faire évoluer le jeu

Notre développement se termine et notre jeu est maintenant pleinement fonctionnel.

Celui-ci reste malgré tout bien évidemment largement perfectible, et si vous désirez continuer à le faire évoluer, voici quelques pistes de réflexion que vous pouvez suivre :

  • Gérer un tableau d’honneur des meilleurs scores.

  • Ajouter de nouveaux types de bonus ou adapter les bonus existants, comme par exemple :

  • des fusées qui partent dans les deux sens à la fois,

  • des fusées qui partent dans les quatre directions à la fois,

  • des bombes plus puissantes qui détruisent les pierres avec une portée plus large,

  • des éclairs qui suppriment les pierres précieuses à la manière des fusées, mais en diagonale et sur toute la portée.

  • Définir de nouveaux objectifs pour réussir un niveau, par exemple :

  • obtenir telle ou telle récompense,

  • obtenir et utiliser au moins un bonus de tel ou tel type,

  • réaliser un certain nombre de points.

  • Marquer certaines cases d’une couleur spéciale et considérer qu’il faut supprimer deux pierres dessus pour les libérer, la suppression de la première pierre plaçant la case dans la couleur normale.

  • Gérer plusieurs niveaux de difficulté en donnant au joueur le choix d’avoir trois vies...