Étapes du laboratoire
Note : Le jeu est fonctionnel et vous devez éviter les projectiles en vous déplaçant avec les flèches. Le jeu s'occupera automatiquement d'afficher et de cacher les différents écrans (ex: splash-screen), veuillez simplement, à l'aide d'images et de CSS, décorer le jeu.
- Le menu à gauche doit être centré verticalement et ne doit pas bouger, même s'il y a un défilement de la fenêtre. Il doit être 30% de la hauteur de la fenêtre.
- Le #game-container doit être de 900px par 600px, et centré dans la page.
- La section (#steps), doit être en position fixe, en bas de la page.
- Le #steps-text doit être de 900px de largeur et centré dans la page.
- L'image de fond de la page Web est : background.jpg. Chaque écran (screen) du jeu possède sa propre image de fond.
- Le jeu aura 2 types d'objet : des div.projectile et un div.player. Utilisez du CSS pour les différencier visuellement (ex: background-image). Il est très important de définir une largeur et hauteur à ces éléments.
- Ces 2 types d'objet doivent être positionnés de façon absolue par rapport à l'écran de jeu (game-screen).
- Vous pouvez trouvez des images de vaisseau et des images de fond dans le dossier "img".
- Les pointages seront placés automatiquement dans les spans, veuillez simplement les styliser avec du CSS.
- Terminer de styliser le jeu afin de le rendre plus attrayant visuellement (incluant une police de Google Fonts).