Pacmanimation : une animation de Pac-Man tout en HTML5 et CSS3
Avec le temps, Pac-Man est devenu un jeu incontournable et culte. On pourrait croire que faire se balader un camembert à l’intérieur d’un labyrinthe pour bouffer des points est assez limité et pourtant on continue d’y jouer de nos jours. Aujourd’hui, nous avons donc droit à une animation mettant en scène le célèbre jeu, une animation un peu spéciale étant donné qu’elle n’utilise aucun JavaScript et est constituée uniquement de HTML5 et de CSS3.
Une fois sur la page de l’animation, vous vous retrouvez donc face à un Pac-Man qui ouvre et ferme la bouche, mais sans avancer. En réalité, l’animation utilise les media queries, qui permettent de créer différents comportements CSS en fonction de certaines données comme la dimension de la fenêtre. Ainsi, il va vous falloir réduire la largeur de la fenêtre de votre navigateur : en y allant progressivement jusqu’à atteindre 460 pixels, vous verrez ainsi Pac-Man manger les différents points et la cerise mais vous le verrez aussi se faire poursuivre par un fantôme.
Le truc impressionnant également, c’est de voir le score augmenter en fonction des points avalés, le tout avec une police de caractères bien rétro rendue possible toujours grâce à CSS3 qui permet d’importer ses propres polices.
Juste en-dessous de l’animation, nous pouvons voir un court texte décrivant rapidement ce qui a été utilisé pour créer cette animation. Si vous allez jusqu’aux 460 pixels, vous pourrez voir apparaître un autre texte vous relatant quelques anecdotes concernant un des jeux les plus connus au monde. Enfin pour finir, on précisera que l’animation est parfaite sous Firefox mais les propriétés utilisées restant assez nouvelles, elles ne rendent pas forcément bien sur d’autres navigateurs.
