Catégories
Plugin et site web

8 jeux CSS purs auxquels vous pouvez jouer dans votre navigateur

Nous pouvons prendre le CSS pour acquis, mais il est incroyable de penser à quel point il est devenu puissant. Ce qui a commencé comme un moyen simple de styliser divers éléments de conception s'est transformé en bien plus encore. Nous utilisons maintenant le langage pour gérer facilement des tâches telles que les mises en page et l'animation – et sans arrière-pensée.

Mais cela ne s’arrête pas là. CSS est également utilisé pour créer des interfaces utilisateur entièrement interactives. Les choses qui nécessitaient désormais JavaScript peuvent désormais être effectuées avec du code pris en charge nativement dans tous les navigateurs Web modernes.

Parmi les meilleurs exemples de cette tendance figurent la multitude de jeux CSS purs qui apparaissent. Ils sont amusants à jouer et nous donnent une idée de ce qui peut être réalisé avec un peu de créativité.

Voici un aperçu de certains des meilleurs jeux CSS purs sur CodePen. Ils vont du simple stupéfiant au "wow, CSS peut faire ça?" – prendre plaisir!

La boîte à outils Web Designer

Téléchargements illimités: plus de 1 000 000 modèles Web, thèmes, plug-ins, éléments de conception et bien plus encore!

Pierre papier ciseaux

Une séance de pierre, de papier, de ciseaux est toujours un excellent moyen de vaincre l'ennui. Si vous n’avez pas de partenaire avec qui jouer, vous pouvez essayer cette version virtuelle. Cliquez sur l'arme de votre choix puis sur le bouton «Combattre!» pour voir comment vous avez fait. Le jeu utilise des boutons radio HTML et du CSS aléatoire pour alimenter le match.

Voir les ciseaux à papier Pen Pure CSS Game Rock de Jerry Low

Démineur pour les commits Git

Ce jeu combine la prémisse classique du démineur avec l'aspect d'un graphique de contribution GitHub. Voyez combien de carrés vous pouvez peindre avant de toucher l'une de ces mines embêtantes. Encore une fois, CSS est utilisé pour générer des emplacements «aléatoires» pour chaque mine.

Voir le Pen CommitSweeper – Pure CSS Game par Stephanie Eckles

Sauvez le monde des démons

Voici un jeu de tir simple qui vous demande d'éliminer des sbires démoniaques (non, pas ceux minions). Placez votre curseur sur un démon et cliquez pour l'envoyer emballer. Un rapide coup d'œil sous le capot révèle que les cases à cocher HTML et les GIF animés font tout fonctionner.

Voir le stylo
Demon Killer II par Mark Sottek

Vous voulez du gâteau? Vous feriez mieux de le gagner.

Bien sûr, tout le monde veut du gâteau. Mais ce jeu peut vous rendre fou dans sa poursuite, car il prend une certaine dextérité avec votre souris. Survolez une petite boîte et évitez les petites miettes et les pépites. Si vous réussissez, vous serez récompensé. Déplacez votre curseur trop loin, cependant, et vous devrez tout recommencer.

Voir le jeu Pen Pure CSS Cake 100 × 50 🎂🎉 par Jhey

Devinez le film

Ce petit jeu de type trivia / pendu utilise intelligemment le CSS :valid et :invalid pseudo-classes pour vous guider vers une réponse correcte. Tout d'abord, vous voyez un ensemble d'emoji représentant un film. À partir de là, vous devez taper le nom du film. Mais chaque entrée de formulaire n'a qu'une seule lettre valide. CSS vous dira si vous avez entré le bon (ou vous pouvez simplement regarder le code source).

See the Pen Guess The Movie – un mini jeu CSS par Inès

Je n’ai pas peur des fantômes

Voici un autre jeu de tir – mais avec une touche. Cette fois-ci, nous traquons les fantômes dans une configuration de type whack-a-mole. La différence ici est que vous n'avez que 15 secondes pour travailler. C’est une bonne démonstration des animations de synchronisation avec CSS. Combien pouvez-vous exploser?

Voir le jeu de Pen Pure CSS ghost bustin avec des variables CSS 👻🕹 # CodePenChallenge par Jhey

Empilez-les haut

Réminiscence de Tetris, ce jeu vous met au défi d'empiler des groupes de blocs mobiles les uns sur les autres. Cela peut sembler assez facile, mais nécessite un timing précis pour bien faire. Maintenant, si je pouvais juste trouver mon ancien Game Boy …

Voir le jeu CSS Pen Pure: Stacker par Jerry Low

Vous avez coulé mon cuirassé

Prenez un ami (ou votre alter ego) et jouez à un jeu fougueux de Battleship – alimenté uniquement par CSS. Bien qu'elle ne soit pas aussi secrète que la version physique, elle offre une belle incursion dans la logique conditionnelle. Jetez un œil au code pour voir comment cela fonctionne.

Voir le jeu CSS Pen: Battleships de Daniel Schulz

Jouer avec CSS

CSS nous offre plus qu'un simple moyen de rendre nos sites Web attrayants. Cela peut également apporter du mouvement et de l'interactivité.

Et, bien que les jeux de cette collection ne soient pas pratiques pour un usage quotidien, ils démontrent à quel point le langage est devenu puissant. L'étude de ces exemples peut vous donner une idée de la façon d'utiliser CSS pour créer des expériences plus interactives.

Envie de jouer un peu plus? Découvrez notre collection CodePen pour des jeux CSS encore plus purs!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *