Rapport de stage Genie Logiciel HEUFFA NDJAYA PATRICK JORDAN Encadreur - Kamleu Noumi Emeric.pdf

REPUBLIQUE DU CAMEROUN REPUBLIC OFCAMEROON
Paix-Travail-Patrie Peace-Work-Fatherland
*********** ************
Ministère de l’enseignement secondaire Ministry of Higher Education
BP: 3185 Douala- Cameroun BP: 3185 Douala- Cameroun
Site Web: www.etudes.digital Site Web: www.Maaron.education
E-mail : E-mail : it@maarontraining.com
Rapport de stage effectué du 05 juillet au 04 Septembre 2023 à NOVATEC
OPTION : Génie Logiciel
Rédigé et présenté par :
HEUFFA NDJAYA PATRICK JORDAN
(Etudiant en deuxième année BTS)
Encadreur professionnel :
M. KAMLEU NOUMI Emeric
(Ingénieur des Travaux de Télécommunications)
Encadreur académique :
M.NGANDEU
ANNEE SCOLAIRE : 2023/2024
CREATION D’UN JEU VIDEO WEB 2D

Création d’un jeu vidéo en 2D
Rédigé par HEUFFA NDJAYA PATRICK JORDAN
1
DEDICACE
A MON PAPA
NDJAYA FRANCOIS
ET A MA MAMAN
CHEUNGO CHANTAL

2
REMERCIEMENTS
La réalisation de ce projet a nécessité la participation de plusieurs personnes.
C’est la raison pour laquelle nous saisissons cette occasion particulière et à
travers cet ouvrage pour exprimer notre profonde gratitude à l’égard de tous
ceux qui m’ont soutenu et encouragé durant notre formation
professionnelle.
De ce fait, nous adressons nos profonds remerciements :
❖ A DIEU LE TOUT PUISSANT pour la force, la capacité et la santé qu’il me
donne pour la réalisation de ce projet.
❖ A NOTRE ENCADREUR Professionnel, M. KAMLEU NOUMI Emeric pour
l’orientation et le soutien lors de la conception de projet.
❖ A NOTRE ENCADREUR académique, Mr NGANDEU pour l’aide et aux
efforts fournis dans la rédaction de ce document.
❖ A TOUT NOS ENSEIGNANTS D’ISETAG pour la meilleure qualité des cours
dispensés, ceux en quoi notre projet en dépend vraiment.
❖ A MA MAMAN, pour son soutien, son amour inconditionnel ses
encouragements à la fois morale, et économique.
❖ A MA FAMILLE, pour leur soutien apporté pour la réussite de ce projet.
❖ A tous ceux dont leurs noms ne figurent pas ici mais gravés en cœur pour
leurs contributions et leurs soutiens multiformes

3
AVANTS-PROPOS
Le gouvernement camerounais par arrêté ministériel N°90/E/58 du 24/12/1971
crée un cycle de BREVET DE TECHNICIEN SUPERIEUR en abrégé BTS, dans le but
de promouvoir le développement de la jeunesse camerounaise et faciliter leur
intégration au monde de la vie professionnelle. Cette politique s’inscrit dans
l’ordre du jour de l’institut supérieur évangélique des technologies appliquées et
de gestion (ISETAG), avec pour agrément N°17/00048/MINSUP/du 17 janvier
2017.
L’ISETAG regroupe de nos jours une multitude de spécialités telle que :
 Filière du génie informatique
o Maintenance des Systèmes Informatiques (MSI)
o Génie logiciel (GL)
o Infographie et web design
o E-commerce et marketing numérique
o Réseaux et télécoms o Télécommunication
o Réseaux et sécurité
 Filière du génie mécanique et productique
o Mécatronique Automobile (MKA)
o Chaudronnerie et Soudure (CHS)
o Construction Mécanique (CME)
o Maintenance Après-vente automobile (MAVA)
o Fabrication mécanique (FME)
o Froid et climatisation
 Filière du génie civil o Bâtiment (BAT)
o Travaux publics (TPU)
o Géomètre topographe
 Filière du génie électrique
o Electrotechnique
 Filières de gestion
o Gestion logistique et transport (GLT)
o Gestion des ressources humaines (GRH)
o Comptabilité et Gestion d’Entreprise (CGE)

4
o Banque et Finance (BF)
• Filières commerciales
o Vente Commerce international
o Marketing commerce vente
• Filières eau et environnement
o Menuiserie et ébénisterie (MEB)
• Filière de la section anglophone
o Accounting
o Software engineering
O Transport and logistic
Les candidats au BTS sont tenus d’effectuer un stage académique à l’issu duquel
un rapport sera rédigé et soutenu devant un jury en vue de l’obtention du
diplôme de fin de cycle. C’est pour répondre à cette exigence académique que
nous avons focalisé notre attention sur le thème : « CONCEPTION ET
RÉALISATION D’UN JEU VIDEO WEB EN 2D »
Loin d’être un chef d’œuvre, ce travail n’est que le résultat de notre modeste
contribution dans le champ de la recherche. Ainsi nous restons attentifs et
réceptifs à toutes les remarques constructives en vue de son amélioration.

5
LISTE DES ABREVIATIONS
BTS : Brevet de Technicien Supérieur.
CSS: Cascading Style Sheet.
FTP: File Transfer Protocol
HTML: Hyper Text Markup Language.
MOA : Maître d’ouvrages
MOE : Maitre d’œuvre
PHP : PHP HyperText Pré processor
SQL : Structured Query Language
SGBD : Système de Gestion des Base de Données
IDE : Integreted développement environnement
IHM : Interface Homme Machine
IT : Information Technology

6
RESUME
Cette recherche a pour but de rendre compte sur les logiciels permettant de
créer les jeux en vue de l’insertion socio-professionnelle. Nous notons qu’après
une longue période de formation académique mise à notre disposition, il revient
à l’apprenant d’effectuer un stage de deux mois en entreprise dans l’optique de
mettre en pratique les connaissances théoriques reçues et de toucher du bout
des doigts les réalités du monde professionnel. C’est la raison pour laquelle nous
avons effectué un stage allant du 05 juin au 04 septembre au sein de l’entreprise
NOVATEC.
Tout au long de cette période, nous avons eu à développer un thème qui était
centré sur : « CREATION D’UN JEU DE SERPENT EN 2D ».

7
ABSTRACT
The purpose of this research is to report on the software used to create games
with a view to socio-professional integration. We note that after a long period of
academic training made available to us, it is up to the learner after a two-month
internship in a company with the aim of putting into practice the theoretical
knowledge received and of touching the realities of the professional world. This
is the reason why we carried out a stage from 05 June to 04 September within
the company NOVATEC.
Throughout this period, we had to develop a theme, which was centred on:
"CREATION OF A 2D VIDEO GAME”

8
INTRODUCTION GENERALE
Si concevoir un jeu était avant synonyme d'outils complexes, de langages
opaques et de solides connaissances préalables, les éditeurs de logiciels se sont
penchés sur des fonctionnalités et des interfaces simplifiant le développement
d'un jeu. Les développeurs peuvent également trouver de nouvelles sources
d'amélioration de leurs créations avec le financement participatif et les publier
avec, entre autres, des plateformes comme Steam avec son programme Steam
Direct. Après une longue période d’études académique, il est nécessaire
d’effectuer plusieurs semaines de stage en entreprise ; le but étant pour moi la
découverte du monde de l’entreprise et l’application de mes connaissances
acquises dans l’entreprise. J’ai opté pour l’entreprise ETS NOVATEC pour
perfectionner mes connaissances en développement logiciel. Mon travail
consistait à développer un jeu vidéo en 2D. Cependant, nous nous posons la
question de savoir comment choisir le meilleur moteur de développement pour
son jeu. Dans le souci de répondre à cette préoccupation, nous organiserons
notre travail en présentant premièrement l’objectif de notre jeu et ensuite en
présentant les différentes étapes jusqu’à sa création.

9
PREMIERE PARTIE :
PRESENTATION DE
L’ENTREPRISE ET ETUDE
PREALABLE

10
CHAPITRE 1 : PRESENTATION
DE L’ENTREPRISE
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

11
SECTION 2 : DEROULEMENT DU STAGE
I. PRESENTATION GENERALE DU STAGE
La date du 24 juin 2023 marque le début de notre stage dans l’entreprise ETS
Novatec située à ndogpassi 2 au niveau du carrefour saint Nicolas pour une
durée de 2 mois dans le domaine de la programmation et le développement
d’application utile pour résoudre les problèmes de la société et même des
entreprises. Ce jour-là nous avons été reçu par l’ingénieur en chef de cette
entreprise M. KAMLEU NOUMI Emeric qui nous a présenté le local et nous
expliqué le rôle de son entreprise ; après cela il nous a proposé les différents
projets à réaliser tout au long de notre stage académique et nous donnait la
démarche à suivre pour le réaliser. L’entreprise ouvrait ses portes de lundi à
samedi à 8h du matin et les fermait à 17h du soir, pendant ce laps de temps nous
effectuions les tâches qui nous étaient confiées.
II. OBJECTIFS DU STAGE
Afin d’effectuer notre stage de manière objective, nous nous sommes fixés
plusieurs objectifs parmi lesquels :
 Gagner en expérience.
 Mettre en pratique les enseignements théoriques reçus à l’établissement.
 Être encore meilleur dans notre spécialisation.
 Faire face au monde professionnel et savoir s’adapter.
 Concevoir notre projet.
III. APPORTS DU STAGE
Durant notre période de stage nous avons pu mettre en pratique nos
connaissances théorique acquises au cours de l’année en plus de cela nous avons
acquis des compétences sur le plan professionnel, personnel, socio-économique
et aussi académique :
Sur le plan professionnel, ce stage nous a permis de :

12
 Développer nos capacités en adéquation avec le milieu professionnel.
 D’avoir le sens du leadership.
 D’avoir l’esprit d’équipe.
 Concevoir un jeu vidéo web en 2D.
 Renforcer notre aptitude à écouter les différents besoins de la clientèle.
Sur le plan personnel il nous a permis de :
 Développer le sens du respect, de la ponctualité de la courtoisie, du
dynamisme et de l’ouverture d’esprit qui semble être important dans la
vie en entreprise.
 De nous familiariser au monde de l’emploi.
 De rencontrer des professionnels du métier.
 De mieux gérer le stress et les émotions en milieu professionnel.
CONCLUSION PARTIELLE
En outre, nous touchons actuellement la fin de notre présentation de
l’entreprise. Ici, il était question pour nous de présenter l’environnement
externe de l’entreprise, mais aussi de donné une idée sur le déroulement de
notre stage au sein de l’entreprise. Ainsi par la suite nous allons cheminer avec
l’étude préalable.

13
CHAPITRE 2 : ETUDE
PREALABLE
INTRODUCTION PARTIELLE
En informatique, l’étude préalable est une action exercée en vue d’approfondir
l’analyse et de recenser le maximum d’informations possible dans la réalisation
d’un projet en cours d’élaboration. Ainsi, il sera question pour nous de présenter
les opportunités que ce projet nous donnera, d’élaborer dans ce chapitre le
cahier de charge propre à ce projet, de faire une critique de l’existant, et enfin
de passer à l’implémentation et à la réalisation du projet.
SECTION 1 : ANALYSE DU BESOIN
I. ETUDE D’OPPORTUNITE
ETS Novatec est l’entreprise où nous avons effectué notre stage, à cet effet celle-
ci ayant un domaine spécialisé dans la formation des jeunes débutants
informaticiens, nous avons donc reçu une formation rigoureuse dans notre
spécialité qui est le développement d’application ; c’est pourquoi nous avons
trouvé une opportunité d’entrer dans le monde du gaming et de concevoir un
simple jeu de serpent qui ne nécessiterait aucun téléchargement et qu’on
pourrait intégrer dans les ordinateurs comme logiciel système. Cela permettra
également aux utilisateurs de s’épanouir et de se détendre
II. ETUDE DE L’EXISTANT
1. DESCRIPTION DE L’EXISTANT
Les jeux vidéo sont des formes de divertissements interactives qui impliquent
des interactions avec une interface utilisateur graphique pour générer des
rétroactions visuelles sur l’écran. Ils peuvent être joués sur une variété de
plateformes, y compris les consoles de jeux, les ordinateurs personnels, les
appareils mobiles et les navigateurs web. Les jeux vidéo peuvent être classés en

14
différentes catégories en fonction de leur genre, tels que les jeux de rôle, les jeux
de stratégie, les jeux de sport etc. Ils peuvent également varier en termes de
complexité, de durée de jeu, de graphisme et d’histoire. Les jeux vidéo sont
devenus une forme de divertissement dans le monde entier, attirant des millions
de joueurs de tous âges. Ils offrent aux joueurs la possibilité de s’immerger dans
le monde virtuel, d’explorer des histoires captivantes et de relever des défis
stimulants. De nos jours, les jeux vidéo sont devenus une industrie lucrative, avec
des studios de développement majeurs produisant des titres à gros budget et
des tournois e-sport attirant des millions de spectateurs en ligne et hors ligne.
2. CRITIQUE DE L’EXISTANT
Il est vrai que l’industrie de jeu vidéo n’est pas un exemple de critique. Certains
joueurs et observateurs soulignent que de nombreux jeux modernes se
concentrent davantage sur les aspects visuels et la technologie de pointe au
détriment de l’innovation et du Game Play. Cette tendance peut parfois conduire
à des jeux qui privilégient le style sur la substance, ce qui peut laisser certains
joueurs insatisfaits. De plus la montée en puissance des micro transactions et
des modèles économiques basés sur les achats in-Game peut parfois être perçue
comme une forme d’exploitation des joueurs, les incitant à dépenser davantage
pour progresser dans le jeu. Cette pratique peut également créer des
déséquilibres entre les joueurs qui dépensent de l’argent réel et ceux qui ne le
font pas, ce qui peut affecter l’équité et l’équilibre du jeu. En outre certains jeux
modernes peuvent souffrir de problèmes tels que des bugs, des mises à jour mal
planifiées, des contenus payants excessifs ou des politiques de gestion
controversées. Ces éléments peuvent nuire à l’expérience globale du joueur et
contribuer à une perception négative de l’industrie du jeu vidéo.
3. SOLUTIONS PROPOSEES
La solution à ces problèmes pourrait être de revenir aux racines des jeux vidéo
en mettant l’accent sur les jeux vidéo en 2d. Les jeux web 2d offrent une
esthétique rétro et simplifiée qui met l’accent sur le Game Play et la mécanique
du jeu plutôt que sur des graphismes ultra-réalistes. De nombreux jeux en 2D
sont également loués pour leur Game Play addictif et leur conception de niveau
créative.
Les jeux en 2D peuvent offrir une expérience de jeu accessible et immersive pour
les joueurs de tous âges. Ils peuvent permettre aux développeurs de se

15
concentrer sur des histoires intéressantes, des puzzles complexes et des défis
stimulants sans être limités par des exigences graphiques élevées.
En fin de compte, les jeux en 2D peuvent offrir une alternative rafraîchissante
aux titres modernes et rappeler aux joueurs l’importance du Game Play solide et
de la créativité dans l’industrie du jeu vidéo
III. PRESENTATION DU PROJET
1. QU’EST-CE QU’UN JEU WEB 2D
Un jeu web en 2D est un jeu vidéo qui est joué directement dans un navigateur
web, sans nécessiter de téléchargement ni d’installation supplémentaire. Il
utilise des graphismes et des animations en deux dimensions, ce qui signifie que
les éléments du jeu sont représentés sur un plan sans profondeur ou perspective
tridimensionnelle. Contrairement aux jeux 3D qui utilisent des modèles 3D et des
environnements tridimensionnels, les jeux 2D se déroulent généralement sur un
plan horizontal ou vertical. Les personnages, les objets et les décors sont
représentés sous formes de sprites, qui sont les images bidimensionnelles
affichées à l’écran.
2. AVANTAGES ET INCONVENIENTS D’UN JEU WEB 2D
a. AVANTAGES
En étant un jeu web, il sera facilement accessible aux joueurs, sans nécessiter de
téléchargement ni d’installation supplémentaire. Les joueurs pourront y accéder
depuis n’importe quel appareil disposant d’un navigateur internet. En raison de
sa disponibilité en ligne et de son accessibilité, le jeu pourrait toucher un large
public. Il pourrait être partagé facilement via les réseaux sociaux et les
plateformes de jeu en ligne, ce qui pourrait contribuer à sa popularité et à son
succès. En tant que jeu web, il sera relativement facile de proposer des mises à
jour régulières et d’ajouter de nouveaux contenus ou fonctionnalités. Cela
permettra de maintenir l’intérêt des joueurs sur le long terme et de prolonger la
durée de vie du jeu.
b. INCONVENIENTS

16
Les jeux web en 2D peuvent être limités par les capacités des navigateurs
internet, ce qui peut restreindre certaines fonctionnalités avancées ou des
graphismes complexes. Il faudra donc prendre en compte ces limitations lors de
la conception du jeu.
III. OBJECTIFS DU PROJET
L’objectif principal du projet est de concevoir un jeu web en 2D qui offre aux
joueurs une expérience de jeu captivante, stimulante et divertissante. Le jeu
devra être conçu de manière à inciter le joueur à revenir régulièrement et à
prolonger leur expérience de jeu. L’objectif est de rendre le jeu facile à prendre
à main pour les joueurs de tous niveaux. L’interface du jeu devra être conviviale,
les contrôles intuitifs pour permettre au joueur de s’immerger rapidement dans
le jeu.
SECTION 2 : ELABORATION DU CAHIER DE CHARGES
Définition
Le cahier de charge : est un document technique élaboré généralement par le
MOA et qui vise à recenser exactement le fonctionnement de la nouvelle
solution informatique a réalisé par le MOE.
I. DESCRIPTION DE LA SITUATION ACTUELLE
Le monde du gaming a connu une véritable révolution au cours des dernières
décennies. Autrefois considéré comme un passe-temps de niche, les jeux vidéo
sont désormais devenus une forme de divertissement populaire et un véritable
phénomène culturel. Les avancées technologiques, l’émergence de nouvelles
plateformes et l’évolution de l’attente des joueurs ont transformé le paysage du
gaming. L’industrie de jeu vidéo est aujourd’hui l’un des secteurs les plus lucratifs
du divertissement, rivalisant avec l’industrie cinématographique en termes de
recettes générées. Des titres à gros budget aux productions indépendantes, une
multitude de jeu sont disponibles sur diverses plateformes, notamment les
consoles de salon, les ordinateurs, les smartphones et les tablettes. De plus les
plateformes de jeu en streaming ont gagné en popularité, permettant aux
joueurs de diffuser et de regarder des parties en direct. Les jeux ne se limites
plus à un simple divertissement. Ils sont devenus un moyen d’expression

17
artistique, offrant des narrations complexes, des graphismes époustouflants et
une immersion totale. Les jeux vidéo peuvent raconter des histoires captivantes,
transmettre des messages profonds ou servir de plateformes pour la créativité
et la collaboration. Parallèlement aux avancées technologiques, les attentes des
joueurs ont également évolué ; les joueurs recherchent des expériences de jeu
immersives, des graphismes réalistes, des mondes ouverts vastes et des
mécaniques de jeu complexes. Cependant, il existe également un marché pour
les jeux les plus simples et accessibles, qui rappellent les jeux rétro et offrent un
Game Play rapide et intuitif.
C’est dans ce contexte que les jeux web en 2D trouvent leur place ; ils présentent
de nombreux avantages notamment leur accessibilité et leur compatibilité
multiplateforme. Ils peuvent être joués directement à partir d’un navigateur
web, éliminant ainsi la nécessité de téléchargements ou d’installations
supplémentaires. Les joueurs peuvent y accéder depuis n’importe quel appareil
disposant d’un navigateur web, ce qui leur permet de jouer où et quand ils le
souhaitent.
II. DELIMITATION DU PERIMETRE DU PROJET
Le périmètre du projet représente l’ensemble d’élément nécessaire à la
réalisation de notre projet ; nous avons donc entre autre :
 Gestion du jeu
 Gestion du niveau de jeu
III. DELIMITATION DU SYSTÈME D’INFORMATION
Le système d’information soumis à notre étude est celui de la gestion de
l’implémentation d’un jeu de serpent en 2D dont les sous-objectifs sont :
 Gestion du serpent
 Gestion de la pomme
 Gestion du score

18
IV. SPECIFICATIONS FONCTIONNELS
1. BESOINS FONCTIONNELS
Le jeu de serpent web en 2D que nous avons implémenté devra inclure les
fonctionnalités ci-contre :
 Déplacement du serpent
 Génération de fruits
 Détection des collisions
 Gestion du score
 Interface utilisateur
 Gestion de fin de partie
a. Déplacement du serpent
Le serpent doit pouvoir se déplacer dans les quatre directions (haut, bas, gauche,
droite) de manière fluide. Le mouvement du serpent doit être contrôlé par les
commandes de l’utilisateur préalablement définis dans le code.
b. Génération de fruits
Les fruits doivent être générés de manière aléatoire sur l’écran, à des positions
qui ne chevauchent pas avec le serpent. Les fruits doivent également être visible
pour les joueurs, généralement sous forme d’objets colorés, et ils doivent être
régénérés à des intervalles réguliers ou après avoir été collectés par le serpent.
c. Détection des collisions
Le jeu doit détecter les collisions entre la tête du serpent et les fruits. Lorsque le
serpent entre en collision avec un fruit, il doit le collecter et augmenter le score
du joueur. Le jeu doit également détecter les collisions entre le serpent et les
bords de l’espace de jeu ou avec lui-même ce qui entraînera la fin du jeu.
d. Gestion du score
Le jeu doit maintenir un score qui représente la performance du joueur ; chaque
fois que le serpent collecte un fruit, le score doit être augmenté d’une valeur
prédéfinie. Le score doit être afficher à l’écran en temps réel, permettant au
joueur de suivre sa progression
e. Interface utilisateur

19
Le jeu doit avoir une interface utilisateur claire et intuitive. Un écran de
démarrage doit être présent, permettant au joueur de commencer une nouvelle
partie. Les indications de niveau, le score et d’autres informations pertinentes
doivent être affichées à l’écran de manière claire et lisible.
f. Gestion de fin de partie
Le jeu doit détecter les conditions de fin de partie, telles que la collision du
serpent. Lorsque le jeu se termine, un écran de fin de partie doit être affiché,
montrant le score final du joueur et lui permettant de quitter la partie.
2. BESOINS NON FONTIONNELS
a. Sécurité
L’application doit respecter les règles de confidentialité des données attribuées
à chaque joueur, afin de rendre pérenne la sauvegarde des données de manière
à ne pas modifier le contenu.
b. Fiabilité
L’application doit pouvoir fonctionner de manière cohérente, sans erreur et doit
satisfaire aux besoins de ces différents utilisateurs et de l’entreprise.
c. Extensibilité et portabilité
La solution doit être extensible sur plusieurs supports de stockages de façon à
être facilement installé sur plusieurs postes de travail.
d. Les erreurs
Les ambiguïtés doivent être signalées par des messages d’erreurs bien organisés
pour guider l’utilisateur et le familiariser avec notre application.
e. Ergonomie et bonne interface
L’application doit être adaptée à l’utilisateur sans qu’il ne fournisse aucun effort
(utilisation claire et facile) du point de vue navigation entre les différentes pages.
f. Evolutive
L’application doit pouvoir récence les informations propres au mode de
fonctionnement des utilisateurs afin d’évoluer dans le temps.

20
g. Aptitude à la maintenance et à la réutilisation
Le logiciel doit être clair et conforme à une architecture standard et logique
permettant sa maintenance.
V. RESPONSABILITES ET RÔLES RESPECTIFS DES
PARTIES ENGAGEES PAR L’INTERVENTION
Le projet informatique soumis à notre étude fait intervenir deux grandes parties
à savoir le maître d’ouvrage représenté par l’entreprise ETS Novatec et le maître
d’œuvre représenté par moi-même. Ces derniers ont différents rôles et
différentes responsabilités que nous allons représenter dans le tableau ci-
dessous.
Tableau 2 : Rôles et responsabilités des parties
PARTIES RÔLES RESPONSABILITES
 ETS NOVATEC
 Fournir les
moyens
nécessaires pour
la réalisation de
ladite solution.
 Participer à la
spécification du
fonctionnelle.
 Valider les
différentes
études effectuées
par rapport au
projet.
 Fournir la totalité
des informations
utiles pour
l’étude du besoin
 Assister et
participer aux
tests de
vérification et de
validation de la
solution.
 Assurer tous les
payements liés à
la solution
réalisée

21
 MOA
 Analyser de façon
détaillé le besoin
spécifié dans le
cahier de charge.
 Réaliser
l’application
conformément au
cahier de charge.
 Assurer la
maintenabilité et
l’évolution du
logiciel.
 Se rassurer de la
disponibilité et
de la sécurité du
logiciel.
VI. EVALUATION DES CONTRAINTES
1. Contrainte financière du projet ou évaluation du coût de
possession de l’informatique
L’évaluation du coût de possession informatique est la partie qui consiste à
prendre en compte les dépenses effectuées pour la conception et la réalisation
de notre projet. Vu que notre projet est le développement d’un jeu web qui
fonctionne en local et ne nécessite pas un hébergement ou un nom du domaine,
les coûts pour son déploiement seront peu élevés. Dans le tableau ci-dessous,
on présentera une estimation des coûts pour la réalisation du projet.
Tableau3 : évaluation du coût de possession
Désignation Montant en FCFA
Analyse de besoin 50000
Conception détaillée 150000
Codage 200000
Test de vérification 50000
Déploiement 25000
Maintenance 25000
Coût total 500 000
2. Contraintes techniques
Une contrainte technique fait référence à une limitation ou à une exigence liée
aux capacités techniques ou aux ressources disponibles pour la réalisation d’un

22
projet. Dans ce projet de création de jeu de serpent web en 2D, les exigences
peuvent être :
 Moteur de jeu ou framework : on devra choisir un moteur de jeu ou
framework adapté au développement de jeu web en 2D. Par exemple on
pourrait opter pour vs code, bracket… La contrainte technique serait donc
de se familiariser avec le framework choisi et de travailler sur ses
fonctionnalités et ses limitations spéciﬁques.
 Programmation : on devra utiliser des langages de programmation
adaptés au développement web, tels que le javascript, html et css pour
créer notre jeu en 2D. La contrainte technique consistera à maîtriser ces
langages et à les utiliser efficacement pour gérer la logique du jeu et
autres.
 Mécanisme du jeu : on devra implémenter les mécanismes de jeu de
serpent, tels que le déplacement du serpent, la génération de la pomme,
la gestion des collisions et règles de sécurité. La contrainte sera d’utiliser
des mécanismes de manière à utiliser efficacement notre framework
 Compatibilité avec les navigateurs : on devra tester et nous assurer que
notre jeu fonctionne aussi bien sur différents navigateurs tels que firefox,
edge, safari etc. Il sera question ici de gérer les différences de
comportement et de compatibilités entre les navigateurs en appliquant
des correctifs ou des alternatives lorsque cela est nécessaire.
3. Contraintes humaines
Il est important de prendre en compte les contraintes humaines lors de la
réalisation d’un projet. En ce qui concerne ce projet les exigences humaines
peuvent être :
 Compétences et connaissances : il faudra s’assurer que l’équipe de
développement devra posséder les connaissances nécessaires pour
concevoir et mettre en œuvre le jeu. Cela peut inclure une connaissance
approfondie des langages de programmation web, des Framework, ainsi
que des compétences en conception graphique et en animation.
 Temps et disponibilité : il faudra gérer efficacement le temps et de
s’assurer que les membres de l’équipe peuvent consacrer assez de temps
pour la réalisation du projet.

23
 Communication et collaboration : il s’agit là d’établir une communication
claire et efficace, à partager les idées, à coordonner les tâches et résoudre
les problèmes de manière collaborative.
 Test et feedback : il est question ici de faire des tests et d’apporter des
ajustements si possibles.
4. Contraintes temporelles ou planification du projet
Pour parvenir à concrétiser un projet jusqu’à terme et dans un délai respecter,
nous ne saurons néanmoins nous passer des techniques et méthodes de
planification automatique de projets. Dans notre cas la figure ci-dessous
représente notre plan de planifications.
Figure 2 : Planning du projet diagramme Gantt
5. Contraintes technologiques
La réalisation de ce projet a nécessité les technologies suivantes :
 Un outil de modélisation (Win design)
 Un IDE (Vs code)
 Un outil de planification (Gantt projet)
 Un navigateur internet (Google chrome)

24
VII. Evaluation des mesures de succès
Après la réalisation de cette application informatique, nous allons nous appuyer
sur les critères permettant d’évaluer le taux de réussite de cette application. Ci-
dessous est représenté quelques critères majeurs pour le déploiement de notre
application.
- Les tests de vérifications et les tests de validation. Ces différents tests feront
intervenir simultanément le MOA et MOE
Dans cette partie nous avons présenté dans un premier temps l’étude
d’opportunité, dans un second temps l’élaboration du cahier de charge, ensuite
de faire des critiques de l’existant, puis évalués les différentes contraintes liées
au projet. Cependant nous allons nous attarder actuellement sur la seconde
partie qui porte sur l’étude conceptuelle et l’implémentation de notre
application, en mentionnant toutes les étapes d’analyse possibles.

25
DEUXIEME PARTIE :
CONCEPTION
IMPLEMENTATION ET
TEST

26
CHAPITRE 3 : ANALYSE ET
CONCEPTION DE
L’APPLICATION
Dans l’ingénierie logicielle, toute conception d’un projet informatique nécessite
une analyse basée sur un bon fondement. De ce fait cela passe par la réalisation
du cycle de vie du projet. Raison pour laquelle la conception représente une
phase primordiale et déterminante dans la production d’un logiciel de haute
qualité. C’est pendant cette phase que nous parvenons à visualiser globalement
le logiciel d’une manière logique, ensuite de décrire l’architecture générale que
nous allons utiliser dans la partie implémentation de notre projet. Enfin, de
détailler notre choix conceptuel à travers différents types de diagrammes.
SECTION 1 : CONCEPTION GENERALE
I. CYCLE DE VIE
1. Définition
Le cycle de vie d’un logiciel est l’ensemble de toutes les étapes allant de la
naissance jusqu’à sa disparition. Cette façon de faire c’est avérer utile dans la
conception, car elle offre la possibilité de valider le développement du logiciel,
et la vérification de son processus de développement. Cependant l’origine du
découpage provient du constat que les erreurs ont un coût élevé si elles sont
détectées tardivement dans le processus de réalisation. En outre, le cycle de vie
permet de détecter les erreurs le plus tôt possible.
2. Etapes du cycle vie
Le cycle de vie propre à un projet de réalisation d’une application de gestion de
stock, comprend généralement les activités ci-dessous :

27
 Analyse du besoin et faisabilité : elle permet de recueillir et formaliser le
maximum d’information et l’ensemble des contraintes puis l’estimation
de la faisabilité des besoins du client.
 Spécification du besoin : elle consiste ici a analysé et a bien cerné les
finalités du projet de la solution à mettre en place.
 Conception générale : il s’agit ici de représenter l’architecture générale du
logiciel.
 Conception détaillé : elle consiste à définir et formaliser respectivement
chaque partie du logiciel. - Implémentation ou codage : elle consiste à
traduire dans un langage de programmation toutes les fonctionnalités du
logiciel préalablement établi dans la phase de conception.
 Test unitaire : les tests déterminent les bugs techniques, les bugs
fonctionnels et la qualité du logiciel ils permettent de s’assure que chaque
fonctionnalité du logiciel fonctionne exactement tel que décrit dans la
conception.
 Test d’intégration : elle consiste à se rassurer que le logiciel corresponde
exactement au cahier de charge du projet afin de mettre à la disposition
des utilisateurs le manuel d’utilisation.
 Mise en production : c’est le déploiement général du logiciel. -
Maintenance : elle correspond à toutes les actions correctives
(maintenance corrective) et évolutives (maintenance évolutive) sur le
logiciel.
3. Modèle de cycle de vie d’un logiciel
a. Modèle de cycle de vie en cascade
Figure 3: Modèle de cycle de vie en cascade

28
Le model en cascade, ou « waterfall » en anglais, est une organisation des
activités d’un projet sous forme de phases linéaires et séquentielles, où chaque
phase correspond à une spécialisation des tâches et dépend des résultats de la
phase précédente. C’est à dire que chaque phase se termine à une date précise
par la production de certains documents ou logiciels.
L’inconvénient majeur du modèle de cycle de vie en cascade est que, la
vérification du bon fonctionnement du système est réalisée trop tardivement :
lors de la phase d’intégration, ou pire, lors de la mise en production.
b. Modèle de cycle de vie en V
Figure 4: Modèle de cycle de vie en v
Le cycle de vie en V est un modèle d’organisation des activités d’un projet qui se
caractérise par un flux d’activité descendant qui détaille le produit jusqu’à sa
réalisation, et un flux ascendant, qui assemble le produit en vérifiant sa qualité.
Il demeure actuellement le cycle de vie.
Les avantages du modèle de cycle de vie en V sont les suivants :
 La qualité de la mise en œuvre des tests.
 Modèle éprouvé dans l’industrie.
 Normalisé (ISO-12207, MILSTD-498…).
 Deux types de tâches sont réalisés en parallèle : Verticalement on prépare
l’étape suivante et Horizontalement on prépare la vérification de la tâche
en cours.
Ces inconvénients sont :
 La validation finale par le client très tardive augmente les risques de
dépassement de délai et donc l’augmentation du coût.
 Phases séquentielles.

29
 Rigidité face à une évolution du besoin.
c. Modèle de cycle de vie en spirale
Figure 5: modèle de cycle de vie en spirale
Le modèle en spirale est un modèle de cycle de vie qui reprend les différentes
étapes du cycle de vie en V. Par implémentation des versions successives, puis le
cycle recommence en proposant un produit de plus en plus complet. Il met
cependant plus l’accent sur la gestion des risques que le cycle en V.
4. Notre choix
Afin de concevoir et développer notre logiciel, nous avons opté pour le modèle
de cycle de vie en V, car parce que dans sa structure l’on évolue tout en vérifiant
directement chaque étape ce qui offre la possibilité de corriger rapidement les
erreurs avant de se lancer vers l’étape suivante.
II. MÉTHODOLOGIES DE CONCEPTIONS
Pour parfaire les fonctionnalités que doivent offrir le logiciel, La modélisation de
ce projet s’est vue implémenté par la méthode UML.
UML : est une méthode de conception et de réalisation des systèmes
d’information en représentant les interactions entre différents composants à
travers les diagrammes existant dans le langage.
UML fait avant tout partie d’une méthode de la programmation orienté objets
basé sur le type de spécification semi-formelle. Cependant les méthodes
utilisées dans les années 1980 pour organiser la programmation impérative
notamment MERISE étaient fondées sur la modélisation séparée des données et
des traitements.

30
C’est ainsi que en 1990 la nécessité d’une méthode qui lui soit bien adapter
devient évidente. D’où la création de la méthode unifier. Ce pendant UML se
base sur l’analyse et la bonne compréhension des données d’un système, pour
faire ressortir ainsi ces différents diagrammes.
La méthode UML préconise trois diagrammes à savoir :
 Le diagramme des classes qui est l’un des types les plus populaires en
langage UML qui permet de documenter l’architecture du logiciel, mais
décrit aussi ce qui doit être présent dans le système à modélisé.
 Le diagramme des cas d’utilisation qui a pour objectif de représenter la
façon dont un utilisateur peut interagir avec un système. Sans trop
s’attarder sur l’ordre d’exécution des taches, il donne une vue d’ensemble
des relations existante entre les cas d’utilisations et les acteurs du système.
 Le diagramme des séquences qui est une solution populaire de
modélisation dynamique en langage UML, car il se concentre plus
précisément sur les lignes de vie, les processus et les objets qui vivent
simultanément, et les messages qu’ils échangent entre eux pour exercer
une fonction avant la fin de la ligne de vie.
SECTION 2 : CONCEPTION DÉTAILLÉE
I. DIAGRAMME DES CAS D’UTILISATIONS
1. Identification des acteurs
Tableau 4 : acteur intervenant dans le système
ACTEUR TÂCHE
Utilisateur
Valider le niveau de jeu
Diriger le serpent
Manger la pomme
Éviter les collisions
2. Elaboration du diagramme des cas d’utilisation
Les acteurs du système étant énumérés, Nous vous présenterons le diagramme
de cas d’utilisation qui présente une vue globale du comportement fonctionnel

31
de notre application. La figure ci-dessous présente le diagramme de cas
d’utilisation globale de l’application.
Figure : Diagramme de cas d’utilisation global
3. Description textuelle des cas d’utilisation
Cette description doit nous permettre de décrire exactement la façon dont un
acteur utilise l’application pour atteindre l’objectif.
Pour chaque cas nous allons identifier les éléments suivants :
 Les acteurs : qui réalisent les cas d’utilisations.
 Le pré conditions : présentes l’état que doit être le système avant que le
cas d’utilisation soit déclenché.
 Les post conditions : décrit l’état du système à l’issue du scénario.
 Le scénario nominal : présente l’échange d’événements entre l’acteur et
le système lorsque le cas d’utilisation se termine avec succès.
 Les alternatives : ce sont les scénarios ou étapes différentes liées aux
choix de l’utilisateur. (Étapes liées à des conditions).
 Le scénario d’exception : c’est le scénario d’échec ou autrement une
étape pourrait être perturbée à cause d’un événement anormal.
Tableau 5 : Description textuelle des cas d’utilisation

32
Titre Déroulement du jeu
Objectif Manger la pomme
Description des enchaînements
Précondition Valider le niveau de jeu
post condition Éviter les collisions
Scénario nominal
L’utilisateur valide le niveau de jeu puis dirige le
serpent et le fait manger la pomme pour
grandir
Scénario alternatif
Après avoir validé le niveau de jeu l’utilisateur
peut décider de diriger le serpent sans manger
la pomme
Scénario d’exception
L’utilisateur fait un collision avec le mur ou avec
une partie de son corps
 Explication du cas d’utilisation
Lorsque l’utilisateur va entrer dans le jeu, l’interface de validation du niveau
de jeu va s’afficher et il pourra donc entrer manuellement le niveau qu’il veut
(facile, moyen, difficile). Après cette étape la page de jeu apparaîtra et il
pourra diriger le serpent pour manger la pomme et grandir (but du jeu) selon
certaines conditions :
- Lorsque le serpent va à droite, il ne peut aller que dans deux directions qui
sont haut et bas ; c’est pareil lorsque le serpent va à gauche
- Lorsque le serpent va en haut ou en bas il ne peut suivre que deux
directions qui sont gauche ou droite
II. DIAGRAMME DES CLASSES
Un diagramme de classe est un type de diagramme de modélisation utilisé en
génie logiciel pour représenter les classes, les attributs, les méthodes et les
relations entre les différentes classes d'un système logiciel. Il fait partie du
langage de modélisation unifié (UML) et est largement utilisé pour concevoir et
documenter la structure statique d'un système orienté objet.
Un diagramme de classe permet de visualiser les entités clés du système, les
relations entre ces entités et les caractéristiques de ces entités. Il capture la
structure du système en définissant les classes qui le composent, les attributs et

33
les méthodes de ces classes, ainsi que les relations entre les classes, telles que
l'héritage, l'association, la composition, etc.
Voici les principaux éléments présents dans un diagramme de classe :
 Classe : Une classe représente un concept ou un objet du système logiciel.
Elle est représentée sous forme de rectangle avec trois sections : la
première pour le nom de la classe, la deuxième pour les attributs de la
classe et la troisième pour les méthodes de la classe.
 Attribut : Un attribut est une variable associée à une classe. Il décrit les
caractéristiques ou les propriétés de la classe. Les attributs sont
généralement représentés dans la deuxième section du rectangle de la
classe, avec leur nom et leur type de données.
 Méthode : Une méthode est une fonction associée à une classe. Elle
représente le comportement ou les actions que la classe peut effectuer.
Les méthodes sont généralement représentées dans la troisième section
du rectangle de la classe, avec leur nom, leurs paramètres et leur type de
retour.
 Relation : Les relations entre les classes sont représentées par des lignes
qui relient les classes. Les types de relations courants incluent l'association
(relation entre deux classes), l'héritage (relation entre une classe parente
et une classe enfant), la composition (relation entre une classe tout et une
classe partie), etc.
Un diagramme de classe fournit une vue statique du système logiciel, en se
concentrant sur la structure des classes, des attributs et des méthodes. Il est
largement utilisé lors de la phase de conception pour organiser et représenter
les entités du système avant de passer à l'implémentation. Il facilite la
communication entre les membres de l'équipe de développement et sert de
base pour générer du code source, des schémas de base de données, des
documentations, etc.
Le diagramme suivant représente les éléments et la structure de la base de
données de notre logiciel.
 La classe "Score" représente les scores des joueurs. Elle contient l’attribut
values(valeur). Les méthodes incrementscore (incrémenter le score),
restoreScore (restaurer le score).
 La classe "Snake" représente le serpent du jeu, comme décrit
précédemment. Elle contient les attributs "length" (longueur) et

34
"direction" (direction), ainsi que les méthodes "move ()" (déplacer),
"changeDirection(newDirection: int)" (changer la direction) et
"eatApple()" (manger une pomme).
 La classe "Apple" représente une pomme dans le jeu, comme décrit
précédemment. Elle contient les attributs "positionX" (position en X) et
"positionY" (position en Y), ainsi que les méthodes "getPositionX()"
(obtenir la position X), "getPositionY()" (obtenir la position Y) et
"generateNewPosition()" (générer une nouvelle position).
Figure : Diagramme de classe
III. DIAGRAMME DES SÉQUENCES
Le diagramme de séquence fait partie des diagrammes comportementaux plus
précisément des diagrammes d’interaction. Son principal objectif est de
représenter les échanges entre les différents objets et acteurs du système en
fonction du temps.

35
NB : À moins que le système à modéliser soit extrêmement simple, alors nous ne
pouvons pas modéliser le dynamisme global du système dans un seul
diagramme. Dès lors nous ferons donc appel à un ensemble de diagramme de
séquence chacun correspondant à une sous-fonction du système, généralement
d’ailleurs pour illustrer un cas.
1. Présentation des concepts clés et formalisme
a. Formalisme
Le diagramme de séquence est placé dans un rectangle qui dispose d’une
étiquette « SD » en haut, à gauche (qui signifie séquence Diagram) suivi du nom
du diagramme et dans lequel sont représentés les différents échanges entre les
acteurs et les objets pour illustrer un cas de gestion.
b. Concepts clés
Le diagramme de séquence est un recueil d’information montrant les données
circulantes entre les différents acteurs et objets du système. En effet, ces
communications sont représentées par des flèches spécifiques.
c. Les objets
L’Objet est représenté par un rectangle dans lequel figure son nom. Ce nom est
généralement souligné.
d. Les acteurs
Un acteur est une personne physique d’un système. Il assure l’exécution des
différentes tâches.
e. Les messages
Un message est la communication d’un objet vers un autre objet. La réception
d’un message est considérée par l’objet récepteur comme un événement qu’il
faut traiter (ou pas). Dès lors, plusieurs types de message existent et les plus
communs sont :
- Les messages synchrones : ceux-ci provoquent chez leurs récepteurs
i souvent porte le même nom que le message).
Ces derniers sont représentés par une flèche avec un triangle plein à son
extrémité.
- Les messages asynchrones : ici, l’expéditeur du message n’a pas besoin
d’attendre la fin de l’activation de la méthode chez le destinataire. Parfois

36
ce sont les acteurs ou les périphériques qui envoient des signaux,
typiquement utilisé dans la gestion événementielle d’une IHM graphique.
On les représente par une simple flèche.
- Les messages retour : qui désignent les réponses envoyées par le
récepteur ou le destinataire d’un message synchrone ou asynchrone. Et il
représenté par une simple flèche en pointillés.
2. Elaboration du diagramme des séquences
Figure : Diagramme de séquence
Nous venons de terminer cette partie de conception, qui consiste à déterminer
aussi bien les méthodes de travail à mettre en place pour formaliser les
différentes fonctionnalités propres à l’application. Dans le chapitre suivant nous
allons aborder la partie réalisation proprement dite de notre application, en se
basant sur les mécanismes et les solutions déterminés dans la phase de
conception.

37
CHAPITRE 4 :
IMPLEMENTATION ET
PRESENTATION DE
L’APPLICATION
Ce chapitre présente la solution informatique réalisé. En effet, Nous
présenterons dans un premier temps les outils utilisés au cours du
développement et dans un deuxième temps la solution informatique.
Dans ce module, il sera question pour nous de vous présenter les différents outils
qui ont permis à la réalisation de notre projet tout en vous spécifiant également
l’environnement dans lequel nous avons pu développer cette solution
informatique.
SECTION 1 : IMPLÉMENTATION DE L’APPLICATION
1. ENVIRONNEMENT MATERIEL
L’environnement de travail est l’ensemble des outils, logiciel et langage utilisés
pour l’implémentation d’une solution informatique. Pour concevoir notre
application nous avons utilisé un laptop de caractéristiques suivantes :
➢ Ordinateur Lenovo X70
➢ Mémoire vive : 8 Go
➢ Disque dur : 256 Go
➢ Processeur : Intel Core i7-6600U CPU 2.60Ghz 2.81Ghz
➢ Windows 10 professionnel

38
2. ENVIRONNEMENT LOGICIEL
Lors du développement de notre logiciel nous avons utilisé plusieurs
environnements de développement parmi lesquels :
 XAMP : pour créer la base de données
 WIN DESIGN : pour l’analyse de notre projet
 VISUAL STUDIO CODE : pour programmer notre application
 GOOGLE CHROME : pour tester notre application
3.LANGAGE ET TECHNOLOGIE UTILISÉE
Les technologies utilisées pour un projet d'application web peuvent varier en
fonction des besoins spécifiques du projet, des compétences de l'équipe de
développement et des contraintes techniques. Cependant, voici quelques
technologies couramment utilisées dans le développement d'applications web :
a. Système de gestion de base de données : MySQL
MySQL est une SGBD relationnelle libre qui a vu le jour en 1995 et très employée
dans le développement des applications, souvent en association avec PHP
(langage) et Apache (serveur web). MySQL fonctionne indifféremment sur tous
les systèmes d'exploitation (Windows, Linux, Mac OS notamment). Le principe
d'une base de données relationnelle est d'enregistrer les informations dans des
tables, qui représentent des regroupements de données par sujets (table des
clients, table des fournisseurs, table des produits, par exemple). Les tables sont
reliées entre elles par des relations. Le langage SQL (acronyme de Structured
Query Language) est un langage universellement reconnu par MySQL et les
autres bases de données et permettant d'interroger et de modifier le contenu
d'une base de données. Les autres SGBD utilisées en informatique sont
essentiellement Microsoft SQL Server et Oracle.
b. Serveur apache
Logiquement parlant il est impossible pour nous de parler de MySQL sans
toutefois faire une flache sur Apache. En effet Apache est le serveur le plus
répandu sur Internet. Il fonctionne principalement sur les systèmes
d'exploitation UNIX (Linux, Mac OS X, Solaris, BSD et UNIX). Il est utilisé par de
nombreux produits, dont WebSphere d'IBM, ainsi que par Oracle Corporation. Il

39
est également supporté d'une façon ou d'une autre par les outils de
développement Borland Delphi et Kylix.
c. Xampp
XAMPP est un ensemble de logiciels permettant de mettre en place facilement
un serveur Web confidentiel, un serveur FTP et un serveur de messagerie
électronique. Il s'agit d'une distribution de logiciels libres (Apache MySQL Perl
PHP) offrant une bonne souplesse d'utilisation, réputée pour son installation
simple et rapide. Ainsi, il est à la portée d'un grand nombre de personnes
puisqu'il ne requiert pas de connaissances particulières et fonctionne, de plus,
sur les systèmes d'exploitation les plus répandus. Il est distribué avec différentes
bibliothèques logicielles qui élargissent la palette des services de façon notable
: Open SSL, Expat (parseur XML), PNG, SQLite, zlib… ainsi que différents modules
Perl et Tomcat. Nombre de ces extensions étant inutiles aux débutants, une
version allégée « version lite » est en conséquence aussi proposée. Pour notre
travail nous avons utilisé la version 7.3.31-3.
d. PhpMyAdmin
PhpMyAdmin est un outil qui facilite l'administration de MySQL sur le web. Il est
écrit en PHP et permet notamment de créer / supprimer des bases de données,
de créer / modifier / supprimer des tables ou enregistrements, d'exécuter des
requêtes SQL, d'importer et d'exporter des structures ou données de votre base
de données MySQL, et bien plus.
e. Langage de programmation
 HTML (HyperText Markup Language) :
HTML est le langage de balisage standard utilisé pour créer et structurer
le contenu des pages web. Il utilise des balises pour décrire la structure
logique et le formatage des éléments sur une page web. Voici quelques
points clés à retenir sur HTML :
 HTML utilise une syntaxe basée sur des balises qui sont entourées
de chevrons (< >).
 Les balises HTML sont utilisées pour définir différents types
d'éléments tels que les titres, les paragraphes, les images, les liens,
les tableaux, les formulaires, etc.
 HTML utilise une syntaxe en arborescence (DOM) pour représenter
la structure hiérarchique des éléments dans une page web.

40
 Les attributs peuvent être ajoutés aux balises pour fournir des
informations supplémentaires sur les éléments, tels que les classes,
les identifiants, les styles, etc.
 HTML est un langage statique, ce qui signifie que les pages web
créées en HTML sont généralement statiques et n'ont pas
d'interactivité dynamique.
Figure 6 : logo de html
 CSS (Cascading Style Sheets) :
CSS est un langage de feuille de style utilisé pour définir la présentation et le
style des éléments sur une page web. Il permet de contrôler l'apparence visuelle
des éléments HTML. Voici quelques points clés à retenir sur CSS :
 CSS utilise une syntaxe basée sur des sélecteurs et des propriétés.
 Les sélecteurs CSS permettent de cibler des éléments spécifiques
dans une page web, tels que les balises HTML, les classes, les
identifiants, etc.
 Les propriétés CSS sont utilisées pour définir les styles visuels des
éléments, tels que la couleur, la taille, la police, la marge, le
rembourrage, etc.
 CSS permet d'appliquer des styles de manière sélective à différents
éléments, en utilisant des classes et des identifiants.
 CSS offre la possibilité de créer des mises en page responsives et
adaptatives, en utilisant des techniques telles que les médias
queries.

41
Figure 7 : logo de css
 JavaScript :
JavaScript est un langage de programmation de script utilisé pour
ajouter de l'interactivité et de la dynamique aux pages web. Il permet
de manipuler le contenu HTML, de réagir aux événements utilisateur,
de valider les formulaires et bien plus encore. Voici quelques points
clés à retenir sur JavaScript :
 JavaScript est un langage de programmation orienté objet, léger et
interprété.
 Il peut être utilisé pour manipuler et modifier le contenu HTML et
les styles CSS d'une page web en utilisant le modèle objet du
Document Object Model (DOM).
 JavaScript permet de réagir aux interactions de l'utilisateur, tels que
les clics de souris, les saisies clavier, les survols, etc., en utilisant des
gestionnaires d'évènements.
 Il peut être utilisé pour valider les formulaires et effectuer des
opérations de calcul et de manipulation de données.
 JavaScript est également utilisé pour créer des applications web
plus avancées, en utilisant des Framework tels que React, Angular,
ou Vue.js.

42
Figure 8 : logo de JavaScript
 PHP
PHP, acronyme de "PHP: Hypertext Preprocessor", est un langage de
programmation côté serveur spécialement conçu pour le développement web.
Il est largement utilisé pour créer des applications web dynamiques et
interactives. PHP est un langage de script interprété, ce qui signifie qu'il est
exécuté sur le serveur avant d'envoyer le résultat au navigateur web.
Voici quelques caractéristiques et points clés du langage PHP :
o Syntaxe : La syntaxe de PHP est similaire à celle des langages de
programmation tels que C, Java et Perl. Les instructions PHP sont
généralement incluses dans des balises <? PHP et ?>, ce qui permet
d'alterner facilement entre le code PHP et le code HTML.
o Types de données : PHP prend en charge plusieurs types de données, tels
que les entiers, les nombres à virgule flottante, les chaînes de caractères,
les tableaux, les booléens, etc. Il offre également des fonctionnalités pour
la manipulation des chaînes de caractères, la conversion de types et
d'autres opérations courantes.
o Programmation orientée objet : PHP prend en charge la programmation
orientée objet (POO), ce qui permet d'organiser le code en classes,
d'utiliser l'héritage, d'encapsuler des données et de définir des méthodes.
o Intégration HTML : PHP est souvent utilisé pour générer du contenu HTML
dynamique. Il peut être intégré directement dans du code HTML, ce qui
permet de mélanger du code PHP avec des balises HTML et de générer du
contenu personnalisé en fonction des conditions et des données.
o Fonctions prédéfinies : PHP dispose d'une vaste bibliothèque de fonctions
prédéfinies qui facilitent le développement web. Ces fonctions couvrent
un large éventail de tâches courantes, telles que la manipulation de

43
chaînes, la gestion des fichiers, les opérations sur les bases de données, la
manipulation d'images, etc.
o Base de données : PHP offre une prise en charge native pour de nombreux
systèmes de gestion de bases de données, tels que MySQL, PostgreSQL,
Oracle, SQLite, etc. Il fournit des extensions et des fonctions pour se
connecter à une base de données, exécuter des requêtes SQL et récupérer
les résultats.
o Communauté et documentation : PHP bénéficie d'une vaste communauté
de développeurs et d'une documentation complète. Il existe de
nombreuses ressources, tutoriels, forums et bibliothèques disponibles
pour faciliter le développement PHP et résoudre les problèmes éventuels.
PHP est largement utilisé dans les applications web, des sites web simples aux
grandes plates-formes et aux systèmes de gestion de contenu (CMS) populaires
tels que WordPress, Drupal et Joomla. Il est également utilisé dans les
frameworks web tels que Laravel, Symfony et CodeIgniter, qui facilitent le
développement d'applications web robustes et évolutives.
En résumé, PHP est un langage de programmation côté serveur puissant et
populaire, spécialement conçu pour le développement web. Il offre une syntaxe
facile à comprendre, une intégration transparente avec HTML, une prise en
charge des bases de données et une vaste communauté de développeurs.
Figure : Logo de PHP

44
4. IDE : VISUAL STUDIO CODE
Un éditeur de code source est un programme d’édition de texte spécialement
conçu pour l’édition de code d’un programme informatique. Pour notre projet
nous avons choisis Visual studio code pour écrire notre code, c’est pourquoi nous
allons faire une présentation de l’IDE et ressortir quelques fonctionnalités qu’il
peut avoir.
a. Présentation
Visual Studio Code est présenté lors de la conférence des développeurs Build
d'avril 2015 comme un éditeur de code multiplateforme, open source et gratuit,
supportant une dizaine de langages.
Il est basé sur Electron, une structure utilisée pour déployer des
applications Node.js pour le bureau exécuté sur le moteur Blink. Bien qu'il utilise
le framework Electron, le logiciel n'utilise pas Atom mais utilise le même
composant éditeur (nommé Monaco) utilisé dans Azure DevOps (anciennement
appelé Visual Studio Online et Visual Studio Team Services).
Le code source est fourni sous la licence libre MIT sur le site du projet
sur Github. En revanche, l'exécutable est proposé sur le site officiel de Microsoft
sous une licence propriétaire. Le projet VSCodium propose une compilation du
logiciel sans les outils de télémétrie inclus dans les binaires fournis par
Microsoft.
b. Fonctionnalités
Visual Studio Code est un éditeur de code source qui peut être utilisé avec une
variété de langages de programmation,
notamment Java, JavaScript, Go, Node.js et C++. Il est basé sur le cadre Electron,
qui est utilisé pour développer des applications Web Node.js qui s'exécutent sur
le moteur de présentation Blink. Visual Studio Code utilise le même composant
d'éditeur (nom de code Monaco) utilisé dans Azure DevOps (anciennement
appelé Visual Studio Online et Visual Studio Team Services). Le logiciel prend en
charge le Windows Subsystem for Linux et, permet ainsi par exemple, de
programmer facilement en C/C++ depuis un ordinateur Windows 10.
Figure 9 : interface principale de visual studio code

45
SECTION 2 : PRESENTATION DES INTERFACES
Dans cette partie, nous allons présenter les différentes interfaces de notre qui
était la création d’un jeu de serpent en 2D qui fonctionne sur navigateur web ;
nous aurons donc une interface de la validation du niveau de jeu, interface de
jeu et l’interface de fin de jeu.
I. VALIDATION DU NIVEAU DE JEU
L’interface de validation du niveau de jeu est la première interface qui s’affiche
lors du lancement de notre jeu. Elle permet à l’utilisateur d’entrer dans le jeu
avec un certain niveau. La validation du niveau de difficulté est une
fonctionnalité essentielle de notre projet de jeu. Elle permet aux joueurs de
sélectionner le niveau de difficulté qui correspond le mieux à leurs compétences
et à leurs préférences, offrant ainsi une expérience de jeu personnalisée et
adaptée à chaque joueur.
Lorsque les joueurs accèdent au menu principal du jeu, une section dédiée à la
validation du niveau de difficulté est disponible. Cette section peut comporter
plusieurs éléments parmi lesquels :
- un texte qui explique clairement le but de cette section
- un champ de saisi pour entrer le niveau de difficulté au clavier
- un bouton OK pour valider la saisie et un bouton ANNULER pour annuler
la saisie

46
Concernant les niveaux de difficulté de notre jeu, nous avons 3 niveaux de
difficulté à savoir :
*facile : lorsque l’utilisateur choisit ce niveau, le déplacement du serpent se fait
dans un écart de 1000 millisecondes ou une seconde
*moyen : le déplacement du serpent se fait dans un écart de 100 millisecondes
*difficile : le déplacement du serpent se fait dans un écart de 50 millisecondes
Figure 10 : interface de validation du niveau de jeu
II. INTERFACE DE JEU
Le jeu de serpent est un classique intemporel dans le domaine des jeux vidéo. Il
met les joueurs au défi de contrôler un serpent qui se déplace à travers un
espace clos, en mangeant des objets pour grandir tout en évitant les collisions
avec les murs du jeu ou avec son propre corps. Le jeu se déroule généralement
dans une grille en deux dimensions et propose une expérience simple et
addictive.
Le but du jeu de serpent est de guider le serpent pour qu'il mange des objets
(souvent représentés par des fruits) qui apparaissent aléatoirement sur la grille
de jeu. Chaque fois que le serpent mange un objet, sa taille augmente, ce qui
rend le jeu de plus en plus difficile.
Cependant, le joueur doit faire preuve de prudence, car le serpent ne peut pas
se heurter aux murs du jeu ou à son propre corps. Si cela se produit, la partie est
terminée et le joueur doit recommencer depuis le début.

47
Le jeu de serpent est souvent basé sur un système de score, où les joueurs sont
récompensés en fonction du nombre d'objets consommés. Plus le serpent est
long, plus le score augmente. Certains jeux de serpent incluent également des
bonus spéciaux, des obstacles ou des ennemis pour ajouter de la diversité et des
défis supplémentaires.
Le défi principal du jeu de serpent réside dans la gestion de l'espace limité et
dans la planification des mouvements pour éviter les collisions. Les joueurs
doivent anticiper les déplacements du serpent et réfléchir stratégiquement pour
maximiser leur score tout en évitant les pièges.
Le jeu de serpent est facile à comprendre et à jouer, mais il peut devenir
rapidement addictif. Les joueurs peuvent se lancer des défis pour obtenir le
meilleur score possible ou simplement jouer pour se divertir et passer le temps.
L’interface de fin de jeu est une composante essentielle du jeu vidéo, offrant
une conclusion et un récapitulatif de l’expérience du jeu du joueur. Elle est
conçue pour fournir des informations clés et des options de redémarrage du jeu.
Concernant le redémarrage du jeu nous avons implémenté dans notre code une
touche à l’occurrence espace pour redémarrer notre jeu.
Figure 12 : interface de jeu
Dans ce chapitre de réalisation, nous avons été appelés à présenter les outils et
moyen utiliser pour aboutir à la concrétisation de la solution informatique
étudier plus haut ; ainsi que de présenter les différentes interfaces de la dites
application.

48
AMÉLIORATIONS
Ce projet, très pratique m’a permis de mieux comprendre le JavaScript et le
développement d’un jeu à travers le JavaScript. Toutefois, la période de notre
stage était courte pour nous permettre de réaliser toutes les missions qui nous
ont été confiées par mon encadreur. Je continuerai à travailler sur ce projet et à
l’améliorer pour me perfectionner.
Comme pistes d’améliorations pour ce projet :
1) Nous avons réalisé et fait fonctionner notre jeu. Maintenant nous devons
le mettre en ligne pour permettre à nos collègues et utilisateurs de
pouvoir y jouer. Ainsi, la suite consiste à héberger ce jeu sur un téléphone
mobile jouant le rôle de serveur et constamment connecté à internet
permettant ainsi aux joueurs de s’y connecter et jouer à distance.
2) Mettre en place un forum en ligne permettant au jouer d’échanger
pendant une rencontre et de partager leurs expériences.
3) Intégrer une IA pour augmenter la difficulté du jeu en déconcentrant le
joueur.

49
CONCLUSION GÉNÉRALE
En conclusion de notre rapport de stage, cette expérience a été extrêmement
enrichissante et a permis d'acquérir de précieuses compétences et
connaissances dans le domaine professionnel. Tout au long de ce stage, nous
avons pu observer et participer activement à divers projets et tâches qui ont
contribué à notre développement personnel et professionnel.
Nous avons été exposés à un environnement de travail dynamique et stimulant,
ce qui nous a permis de mettre en pratique les connaissances théoriques
acquises au cours de notre formation. Nous avons pu travailler en équipe,
collaborer avec des collègues et apprendre à gérer efficacement les délais et les
priorités.
Ce stage nous a également permis de nous familiariser avec les différents aspects
du domaine professionnel dans lequel nous nous sommes spécialisés. Nous
avons pu approfondir nos compétences techniques et développer une
compréhension plus approfondie des processus et des pratiques de l'industrie.
En termes de développement personnel, ce stage nous a permis d'améliorer nos
compétences en communication, en gestion du temps et en résolution de
problèmes. Nous avons également appris à nous adapter rapidement à de
nouvelles situations et à travailler de manière autonome ce qui nous a permis de
concevoir notre projet.
Notre projet est une réalisation passionnante qui combine plusieurs éléments
essentiels pour offrir une expérience de jeu captivante et immersive. Nous avons
travaillé sur la création d’un jeu de serpent classique, en mettant l’accent sur des
fonctionnalités telles que la validation du niveau de difficulté et l’interface de fin
de jeu. En combinant les fonctionnalités clés avec un gameplay solide et une
conception artistique attrayante, notre projet offre une expérience de jeu
complète et divertissante. Avec attention aux détails, une exécution soignée et
une vision globale, notre projet a le potentiel de captiver les joueurs et de se
démarquer dans l’industrie du jeu vidéo
NB : A défaut de temps nous n’avons pas pu développer toutes les
fonctionnalités requises dont notre application aura besoin

50
REFERENCES BIBLIOGRAPHIQUE
Bibliographie
 Support de cour de Mr DOUMI Serge portant sur les Systèmes
d’information et sur la modélisation UML
 Support de cour de Mr SONAGOU sur la gestion des bases de
données.
Webographie
 Site internet open Classroom: www.openclassroom.com
 Tutoriel sur la création du jeu de serpent : www.youtube.com
 https://gist.github.com/straker/ff00b4b49669ad3dec890306d348adc
4
 https://www.geeksforgeeks.org/create-a-snake-game-using-html-css-
and-javascript/
 https://github.com/patorjk/JavaScript-Snake
 https://www.freecodecamp.org/news/how-to-build-a-snake-game-in-
javascript/

Rapport de stage Genie Logiciel HEUFFA NDJAYA PATRICK JORDAN Encadreur - Kamleu Noumi Emeric.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a Rapport de stage Genie Logiciel HEUFFA NDJAYA PATRICK JORDAN Encadreur - Kamleu Noumi Emeric.pdf

Similar a Rapport de stage Genie Logiciel HEUFFA NDJAYA PATRICK JORDAN Encadreur - Kamleu Noumi Emeric.pdf (20)

Más de Emeric Kamleu Noumi

Más de Emeric Kamleu Noumi (19)

Rapport de stage Genie Logiciel HEUFFA NDJAYA PATRICK JORDAN Encadreur - Kamleu Noumi Emeric.pdf