Combats dans la galaxie

1. Les règles du jeu

Ce projet est un jeu qui reproduit dans les grandes lignes le célèbre jeu d’arcade de la fin des années 1970 : Space Invaders, de la société Taito.

Dans ce jeu, le joueur dispose d’un canon situé en bas de l’écran, pouvant se déplacer de droite à gauche et tirer un projectile à la fois, vers le haut de l’écran.

Des vaisseaux spatiaux extraterrestres emplissent la majeure partie de l’écran. Ils voyagent horizontalement d’un bout à l’autre de l’écran, le sens de déplacement s’inversant chaque fois qu’un des bords est atteint. À chaque fois que le sens de déplacement s’inverse, le groupe de vaisseau descend un peu. La vitesse de leur déplacement dépend de leur nombre : moins il reste de vaisseaux ennemis dans l’aire de jeu, plus ils se déplacent rapidement. De temps en temps, une soucoupe volante traverse rapidement l’écran, de droite à gauche ou de gauche à droite, sur la ligne située au-dessus du groupe principal de vaisseaux ennemis.

Des bombes sont larguées par les extraterrestres dans le but de détruire le canon du joueur. Si un des vaisseaux ennemis atteint le sol, représenté par la ligne sur laquelle se trouve le canon du joueur, le joueur perd...

1. L’écran d’accueil

Dans le jeu original, l’écran d’accueil signalait au joueur qu’il devait insérer une pièce pour obtenir des crédits permettant de lancer une partie simple ou multijoueur. La version multijoueur consistant, à l’époque, à faire jouer deux joueurs à tour de rôle, chacun dans sa propre partie.

L’écran présentait dans le même temps les vaisseaux ennemis en indiquant le nombre de points que chacun d’eux rapportait lorsqu’il était détruit.

Comme il est très improbable qu’un monnayeur soit disponible sur l’ordinateur des joueurs, nous décidons de ne gérer que cet affichage sur notre page d’accueil, accompagné d’un message leur indiquant qu’ils doivent appuyer sur une touche précise de leur clavier pour démarrer une partie.

Une fois cette touche appuyée, l’écran d’accueil laisse la place à l’aire de jeu.

2. Aménagement de la page web

La page web est divisée en deux parties : une pour le titre et une pour l’aire de jeu.

L’aire de jeu est, elle, divisée en cinq parties :

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 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 les polices de caractères Seymour One et Rokkitt.

2. Les éléments graphiques

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

Pour rester le plus possible fidèle au jeu original, nous devons produire des images simples, voire archaïques, pourraient penser certains. À l’époque de sa sortie, les possibilités graphiques étaient très limitées et les images très souvent stylisées et pixellisées. À tel point que les écrans étaient monochromes et des bandes de cellophane transparent étaient collées sur certains endroits de l’écran pour colorer artificiellement les images affichées. Ainsi, du papier cellophane rouge était collé sur le haut de l’écran pour faire apparaître en couleur rouge les soucoupes volantes, tandis que des transparents verts coloraient le canon et les boucliers, les vaisseaux ennemis restant, eux, blancs.

Nous demandons à Photoshop de créer un nouveau dessin avec des dimensions de 256 pixels de largeur et 256 pixels de hauteur et un fond transparent.

Entrons dans le paramétrage de Photoshop en choisissant l’entrée de menu Préférences du menu Photoshop sous macOS ou l’entrée de menu Préférences du menu Édition sous Windows. Choisissons l’option de menu Repères, grilles et tranches et, dans la boîte de dialogue qui apparaît, choisissons les pixels comme unité et entrons la valeur 16 dans la zone...

1. Planter le décor

Tous les médias ont été préparés et le cahier des besoins est bien défini. Il est temps de commencer le développement de notre application.

Commençons par organiser notre travail en créant la structure de répertoires suivante dans un dossier que nous appelons Combats :

Dans le répertoire sounds, nous plaçons une copie des fichiers sonores que nous avons sélectionnés.

Nous effectuons la même opération avec une copie des fichiers graphiques que nous avons réalisés en les plaçant dans le répertoire images.

Nous plaçons une copie de la bibliothèque jQuery dans le répertoire scripts et une copie du fichier de normalisation des affichages normalize.css dans le répertoire styles.

Nous créons un fichier que nous appelons main.html, dans le répertoire Combats, avec le code suivant :

<!DOCTYPE html> 
<html> 
    <head> 
           <title>Combats</title> 
           <meta charset="utf-8"> 
           <link  
href="https://fonts.googleapis.com/css2?family=Rokkitt:wght@300&family=Seymour+ 
One&display=swap" rel="stylesheet"> 
           <link rel="stylesheet" type="text/css" href="styles/normalize .css" /> 
           <link rel="stylesheet" type="text/css" href="styles/main.css" /> 
           <script src="scripts/jquery-3.1.1.min.js"></script> 
    </head> 
    <body> 
           <div class="mainContainer"> 
                  <div class="headerZone"> 
                        <label...