Description

1. Les règles du jeu

Notre premier projet de jeu d’arcade est un jeu de tir, que nous garderons simple, dans la mesure où il n’est prévu que pour un seul joueur par session de jeu.

Son thème est le suivant :

Une petite mouche est prise au piège au centre d’une toile d’araignée et, engluée, elle ne peut pas se déplacer sur la toile, ne parvenant qu’à tourner sur elle-même.

Des araignées, attirées par les mouvements que la mouche imprime à la toile, sont averties de sa présence et se dirigent vers elle dans le but d’en faire leur festin du jour.

La petite mouche doit tirer des projectiles sur les araignées de manière à les détruire et ne pas se laisser dévorer, sinon la partie est terminée.

De temps à autre, lorsqu’une araignée est touchée par l’un des tirs de la mouche, elle laisse tomber derrière elle un objet.

Si le joueur oriente la mouche vers cet objet et lui tire dessus, un bonus ou un malus lui est accordé.

2. Les choix retenus

Il nous faut maintenant réfléchir à l’implémentation du jeu tel que nous venons de le décrire.

Posons-nous tout d’abord quelques questions d’ordre général :

Que doit afficher l’interface du jeu, dans son ensemble ?
Quelles commandes doivent être disponibles pour le joueur ?
Dans quelle mesure est-il possible de marquer des points ?
Comment déterminer la fin du jeu ?

Prenons maintenant le temps de proposer des réponses à ces questions.

a. L’interface du jeu

L’interface du jeu doit permettre a minima :

L’identification du jeu

Une zone de l’interface doit comporter le titre du jeu et un logo.

La zone des options

Une zone permettant à l’utilisateur de paramétrer certains aspects du jeu : la présence ou non de la musique d’ambiance, celle des bruitages et leurs volumes respectifs.

La zone de jeu

Une autre zone de l’interface, la plus grande possible, doit contenir l’aire de jeu, c’est-à-dire l’espace où sont insérés les éléments représentatifs de chacun des acteurs du jeu et où l’action du jeu se déroule....

Le visuel général

1. L’écran d’accueil et le menu

Nous devons maintenant faire des choix quant au matériel graphique qui doit composer les différentes parties de notre projet : le logo, les polices de caractères et le design général des éléments affichés qui ne sont pas, à proprement parler, parties prenantes du jeu.

a. Le logo

Ouvrons notre logiciel de dessin, et créons un nouveau document d’une taille de 256 pixels de largeur par 256 pixels de hauteur, en 72 dpi, avec un fond transparent.

Nous décidons que ce projet doit être représenté symboliquement par une toile d’araignée miniature et stylisée.

Pour la dessiner, nous choisissons l’outil Crayon et, dans les paramètres de cet outil, nous choisissons une épaisseur de 3 pixels.

Nous ajoutons un nouveau calque rempli de blanc à notre espace de travail et le positionnons sous le calque transparent.

Il nous sert de fond et nous permet de mieux voir le travail que nous effectuons sur le calque transparent.

Nous veillons à ce que le calque transparent soit sélectionné de manière à ce que notre travail lui soit ajouté.

Nous pointons approximativement le centre de l’image et cliquons une fois sur le bouton gauche de la souris.

Nous déplaçons ensuite le pointeur de la souris...

Le matériel du jeu

1. Les éléments graphiques

Nous devons maintenant réfléchir à l’aspect visuel principal de notre jeu, c’est-à-dire aux décors et éléments graphiques qui sont réellement acteurs de ce qui s’y passe.

a. Le fond d’écran

Pour égayer un peu le jeu, nous décidons de remplacer la page blanche du navigateur par une image colorée.

De manière à conserver de la lisibilité, nous décidons de flouter cette image pour ne garder que des couleurs diffuses.

L’image d’origine peut provenir de votre appareil photo, avec lequel vous aurez immortalisé un coin de votre jardin ou bien un sous-bois que vous avez découvert lors d’une promenade, ou encore Internet, comme nous le décrivons maintenant.

Avec votre navigateur, tapez "Paysage bucolique", "buisson" ou "sous-bois" sur le site de recherche Google images.

Choisissez les images qui vous plaisent parmi les résultats et enregistrez-les sur votre disque dur.

Nous pouvons maintenant ouvrir le logiciel de dessin et charger l’image à travailler.

Pour appliquer un effet de flou avec le logiciel The Gimp, il faut ouvrir le menu Filtres et choisir le groupe de sous-menu Flou et choisir l’effet de flou qui nous intéresse, en l’occurrence le Flou gaussien.

Une fois l’option de menu sélectionnée, une boîte de dialogue apparaît pour permettre de régler les paramètres à prendre en compte pour appliquer l’effet.

Étant donné que nous ne recherchons qu’un espace coloré et pas du tout une image détaillée, qui nuirait à la visibilité des éléments du jeu, nous exagérons volontairement l’effet de flou en appliquant une valeur de 25 aux tailles X et Y.

La modification de ces valeurs a pour effet de changer l’aspect de l’image en temps réel, ce qui a comme avantage de pouvoir se rendre compte de l’impact de ces valeurs sur le rendu de l’image.

Nous laissons aux autres paramètres leurs valeurs par défaut respectives.

Cliquer sur le bouton Valider a pour effet de pérenniser les modifications et transforme l’image pour de bon.

L’étape suivante...

L’exécution

Nous commençons maintenant le travail de développement de notre projet.

Pour ce projet, nous choisissons de travailler "from scratch", comme disent les amateurs de la langue de Shakespeare et qui signifie "à partir de rien".

Notre projet étant destiné à être utilisé dans un navigateur, nos outils de développement se cantonnent aux langages courants du Web, à savoir le HTML, le CSS, le JavaScript et le JSON.

En ce qui concerne l’utilisation de JavaScript, nous choisissons de le compléter avec l’ajout de la bibliothèque jQuery, qui est une bibliothèque de fonctions JavaScript toutes prêtes, qui rendent bien des services à qui sait les utiliser.

1. Installation de la structure de la page

Physiquement, la structure de répertoires dont nous avons besoin pour notre projet est la suivante :

Piege 
--------images 
--------scripts 
--------sounds 
--------styles

Il nous faut maintenant placer une copie des images que nous avons créées dans le répertoire images, les fichiers sonores que nous avons retenus dans le répertoire sounds, une copie du fichier de la bibliothèque jQuery dans le répertoire scripts et une copie du fichier de normalisation CSS dans le répertoire styles.

Nous créons un premier fichier, que nous nommons main.html, et nous décidons de le placer à la racine du répertoire de notre solution.

Il constitue le fichier principal de notre projet et il contient le code nécessaire au chargement des fichiers de notre jeu.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Pris au piège</title> 
    <meta charset="utf-8"/> 
    <link rel="stylesheet" type="text/css" href="styles\normalize.css"> 
    <script type="text/javascript" src="scripts/jQuery-331.min.js"></script> 
</head> 
<body> 
    <div class="mainContainer"> 
           <div class="informationZone"> 
                  <div...

Pour aller plus loin

Voilà, ça y est, notre projet a abouti et notre jeu est terminé.

Si vous désirez améliorer quelques points ou implémenter d’autres fonctionnalités, voici quelques pistes de réflexion :

Améliorer le mouvement des araignées en insérant une ou deux images de plus de manière à rendre leur déplacement plus fluide.
Ajouter des bonus comme, par exemple, un tir vers l’avant et vers l’arrière, en simultané, un gel temporaire des araignées qui restent sur place pendant quelques secondes, un ralentissement de la vitesse de déplacement des araignées, etc.
Ajouter des malus comme, par exemple, une balle en caoutchouc qui fait reculer les araignées de quelques pixels sur l’axe de tir au lieu de les détruire, une augmentation de la vitesse des araignées pendant quelques secondes, un gel de la mouche qui ne peut pas tourner sur elle-même pendant un court laps de temps, etc.