Blog ENI : Toute la veille numérique !
Dernière chance (fin le 29/02) : -25€ dès 75€ sur les livres en ligne, vidéos... code FUSEE25. J'en profite !
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. Combats dans la galaxie
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

Combats dans la galaxie

Le jeu

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

Décrire une partie

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 :

  • Une zone supérieure, dans laquelle sont affichés les scores et le nombre de canons restants.

  • Une zone juste sous la zone supérieure, dans laquelle...

Le matériel

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.

images/05-2-2-2.png

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

Implémenter le comportement

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 :

  • Combats

  • images

  • sounds

  • scripts

  • styles

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

Pour aller plus loin

Le développement de notre jeu est maintenant achevé.

Si vous le souhaitez, vous pouvez vous servir de ce projet comme point de départ pour créer votre propre jeu de tir.

Voici quelques pistes d’amélioration ou de transformation :

  • Gérer le canon à l’aide de la souris, à la place ou en plus du clavier.

  • Gérer un niveau de difficulté en augmentant la vitesse de déplacement des vaisseaux ennemis éventuellement compensée par une cadence de tir du canon plus élevée. Il est possible d’augmenter également la puissance de tir des ennemis en augmentant la cadence ou en autorisant plus d’un tir à la fois.

  • Une autre piste d’augmentation de la difficulté consisterait à blinder certains vaisseaux qui nécessiteraient d’être touchés plusieurs fois par les tirs du canon pour être détruits. Cela pourrait être compensé par une vitesse de déplacement du canon accrue.

  • Gérer des bonus/malus qui tombent à chaque fois qu’un ennemi est détruit et qui doit être ramassé par le joueur à l’aide du canon. Ces bonus et malus peuvent être de types divers et variés, comme par exemple un tir multiple impliquant plusieurs missiles partant en diagonale, des missiles qui continuent leur route...