Beaucoup se contentent d'utiliser le CSS au sens premier mais il est étonnant de constater à quel point ce langage est devenu puissant. Ce qui n'était qu'un moyen simple de styliser divers éléments de conception n'a pas cessé d'évoluer au fil des années. Il est aujourd'hui possible de l'utiliser pour gérer facilement des tâches telles que les mises en page et l'animation.
Mais cela peut aller encore bien plus loin. En effet, le CSS est également utilisé pour créer des interfaces utilisateur entièrement interactives. Les opérations qui nécessitaient auparavant le recours à JavaScript peuvent désormais être effectuées avec CSS qui est pris en charge de manière native par tous les navigateurs modernes.
Pour illustrer de manière ludique cette tendance, je vais vous présenter quelques jeux écrits uniquement en CSS. Outre le fait qu'ils soient amusants à jouer, cela vous donne également une idée de ce qui peut être réalisé avec un peu de créativité.
Ces jeux en pur CSS sont hébergés sur CodePen et je vous les affiche ici pour que vous puissiez y jouer directement depuis cette page.
5 jeux en CSS pour vous détendre en ligne
La bataille navale
Prenez un.e ami.e (ou votre collègue de confinement) et affrontez-vous dans une mémorable bataille navale - alimentée uniquement par CSS. Bien qu'elle ne soit pas aussi discrète que la version physique, cette solution offre une belle incursion dans la logique conditionnelle. N'hésitez pas à plongez dans le code pour voir comment cela fonctionne.
See the Pen CSS Game: Battleships by Daniel Schulz
Le Chifoumi (Pierre, Feuille, Ciseaux)
Une petite séance de Chifoumi (Hi Fu Mi, en japonais) est toujours un bon moyen de passer le temps. Si vous n’avez pas de partenaire avec qui jouer, vous pouvez essayer cette version en ligne. Cliquez sur l'arme de votre choix puis sur le bouton Combattre! pour lancer la partie. Que le.la meilleur.e gagne !
Le jeu utilise des boutons radio HTML et les coups de l'adversaire sont générés aléatoirement avec CSS.
See the Pen Pure CSS Game Rock Paper Scissor by Jerry Low
Le démineur (sur GitHub)
Ce jeu associe le très classique jeu du démineur avec le look graphique des contributions de GitHub. Le but de est peindre le maximum de cases sans toucher l'une des mines. Maintenant, c'est à vous de jouer !
Dans cet exemple, CSS est utilisé pour générer aléatoirement les emplacements de chaque mine.
See the Pen CommitSweeper – Pure CSS Game by Stephanie Eckles
Le Tetris
Réminiscence de Tetris, ce jeu vous propose d'empiler des groupes de blocs mobiles les uns sur les autres. Si vous avez joué à tetris, vous savez que cela semble assez facile, mais que cela nécessite un bon timing pour réussir. Cette version CSS devrait vous plaire ;)
See the Pen Pure CSS Game: Stacker by Jerry Low
Le Go
Le jeu de Go est l'un des jeux les plus anciens qui soit et il est également disponible en duo avec cette version pure CSS. Placez vos pierres aux intersection et essayez de contrôler le goban (le plateau) en y construisant des territoires au détriment de votre adversaire.
See the Pen Game "Go" by yoksel
Shoot 'Em Up
Voici un Shoot 'Em Up simple mais amusant dans lequel vous devez zigouiller des démons. Pour éliminer ces satanés bestioles, placez votre curseur sur un démon et cliquez pour le détruire. Descendez-les tous !
Si vous êtes du genre curieux.euse, un rapide coup d'oeil sous le capot vous révèlera que des cases à cocher HTML et des GIF animés font tout fonctionner.
See the Pen Demon Killer II by Mark Sottek
#BONUS - Le Tetris vertical
Encore un autre Tetris mais cette fois-ci, vous jouerez en vue plongeante. Et cette nouvelle perspective changera sans doute beaucoup de chose dans vos décisions.
See the Pen OVPZex by Tomoya KIMURA
Tous ces exemples proviennent de cette
collection Codepen créée par Eric Karkovack. Merci à lui !
A vous de jouer et de vous amuser
Le langage CSS nous offre bien plus qu'un simple moyen de rendre les pages de nos sites Web attrayantes. Ce langage permet également apporter du mouvement et de l'interactivité. Même si les jeux que je vous ai présenté ne sont pas jouables au quotidien, ils vous montrent à quel point ce langage est devenu puissant.
N'hésitez surtout pas à regarder comment ont été construits ces quelques exemples car cela peut vous donner des idées pour créer des expériences plus interactives avec CSS. J'attends vos exemples et vos remarques dans les commentaires ci-dessous.
Beaucoup se contentent d'utiliser le CSS au sens premier mais il est étonnant de constater à quel point ce langage est devenu puissant. Ce qui n'était qu'un moyen simple de styliser divers éléments de conception n'a pas cessé d'évoluer au fil des années. Il est aujourd'hui possible de l'utiliser pour gérer facilement des tâches telles que les mises en page et l'animation.
Mais cela peut aller encore bien plus loin. En effet, le CSS est également utilisé pour créer des interfaces utilisateur entièrement interactives. Les opérations qui nécessitaient auparavant le recours à JavaScript peuvent désormais être effectuées avec CSS qui est pris en charge de manière native par tous les navigateurs modernes.
Pour illustrer de manière ludique cette tendance, je vais vous présenter quelques jeux écrits uniquement en CSS. Outre le fait qu'ils soient amusants à jouer, cela vous donne également une idée de ce qui peut être réalisé avec un peu de créativité.
Ces jeux en pur CSS sont hébergés sur CodePen et je vous les affiche ici pour que vous puissiez y jouer directement depuis cette page.
5 jeux en CSS pour vous détendre en ligne
La bataille navale
Prenez un.e ami.e (ou votre collègue de confinement) et affrontez-vous dans une mémorable bataille navale - alimentée uniquement par CSS. Bien qu'elle ne soit pas aussi discrète que la version physique, cette solution offre une belle incursion dans la logique conditionnelle. N'hésitez pas à plongez dans le code pour voir comment cela fonctionne.
See the Pen CSS Game: Battleships by Daniel Schulz
Le Chifoumi (Pierre, Feuille, Ciseaux)
Une petite séance de Chifoumi (Hi Fu Mi, en japonais) est toujours un bon moyen de passer le temps. Si vous n’avez pas de partenaire avec qui jouer, vous pouvez essayer cette version en ligne. Cliquez sur l'arme de votre choix puis sur le bouton Combattre! pour lancer la partie. Que le.la meilleur.e gagne !
Le jeu utilise des boutons radio HTML et les coups de l'adversaire sont générés aléatoirement avec CSS.
See the Pen Pure CSS Game Rock Paper Scissor by Jerry Low
Le démineur (sur GitHub)
Ce jeu associe le très classique jeu du démineur avec le look graphique des contributions de GitHub. Le but de est peindre le maximum de cases sans toucher l'une des mines. Maintenant, c'est à vous de jouer !
Dans cet exemple, CSS est utilisé pour générer aléatoirement les emplacements de chaque mine.
See the Pen CommitSweeper – Pure CSS Game by Stephanie Eckles
Le Tetris
Réminiscence de Tetris, ce jeu vous propose d'empiler des groupes de blocs mobiles les uns sur les autres. Si vous avez joué à tetris, vous savez que cela semble assez facile, mais que cela nécessite un bon timing pour réussir. Cette version CSS devrait vous plaire ;)
See the Pen Pure CSS Game: Stacker by Jerry Low
Le Go
Le jeu de Go est l'un des jeux les plus anciens qui soit et il est également disponible en duo avec cette version pure CSS. Placez vos pierres aux intersection et essayez de contrôler le goban (le plateau) en y construisant des territoires au détriment de votre adversaire.
See the Pen Game "Go" by yoksel
Shoot 'Em Up
Voici un Shoot 'Em Up simple mais amusant dans lequel vous devez zigouiller des démons. Pour éliminer ces satanés bestioles, placez votre curseur sur un démon et cliquez pour le détruire. Descendez-les tous !
Si vous êtes du genre curieux.euse, un rapide coup d'oeil sous le capot vous révèlera que des cases à cocher HTML et des GIF animés font tout fonctionner.
See the Pen Demon Killer II by Mark Sottek
#BONUS - Le Tetris vertical
Encore un autre Tetris mais cette fois-ci, vous jouerez en vue plongeante. Et cette nouvelle perspective changera sans doute beaucoup de chose dans vos décisions.
See the Pen OVPZex by Tomoya KIMURA
Tous ces exemples proviennent de cette
collection Codepen créée par Eric Karkovack. Merci à lui !
A vous de jouer et de vous amuser
Le langage CSS nous offre bien plus qu'un simple moyen de rendre les pages de nos sites Web attrayantes. Ce langage permet également apporter du mouvement et de l'interactivité. Même si les jeux que je vous ai présenté ne sont pas jouables au quotidien, ils vous montrent à quel point ce langage est devenu puissant.
N'hésitez surtout pas à regarder comment ont été construits ces quelques exemples car cela peut vous donner des idées pour créer des expériences plus interactives avec CSS. J'attends vos exemples et vos remarques dans les commentaires ci-dessous.
