15 jeux et expériences en HTML 5

Jeux HTML5

Les technologies HTML 5 et WebGL, remplissent bien leur rôle « d’accélérateurs » du web, en donnant la possibilité aux agences et aux talentueux développeurs de créer des expériences inédites.

Des sites riches, interactifs et inédits

Ne pas laisser l’utilisateur passif, tel peut-être le mot d’ordre des sites interactifs basés sur les nouvelles technologies du web. Par simple envie d’exploration technologique ou pour un but réellement marketing, les capacités des langages web modernes permettent de mettre au jour des sites inédits.

Le mot HTML5 reste un raccourci pour désigner toutes les technologies rattachées comme Three.js, WebGL, Javascript, etc. Depuis plusieurs semaines, je sélectionne les sites qui m’en mettent littéralement plein la vue, tout ça pour les partager avec vous.

Comme vous allez pouvoir le découvrir, il y a beaucoup de 3D dans cette sélection, comme dans cet ancien article. Les navigateurs modernes contribuent au support grandissant de la 3D, pour le plus grand plaisir de nos yeux. Je vous laisse découvrir ces quelques sites, pour ensuite vous donner quelques ressources, si vous vous sentez prêt à expérimenter.

Say Viget

Un mini-jeu de plate-forme pour apprendre à prononcer le nom de l’agence Viget. Une réalisation fluide et propre qui a d’ailleurs remporté un Awwwards.

Expérience HTML5

Mission Rosapark

Développé par l’agence parisienne Rosapark, le jeu sert de plate forme de recrutement. Le but du jeu : mettre les candidats au défi en subtilisant les budgets des autres agences comme Publicis ou BETC. Durant l’opération, chaque mois, l’agence a reçu les personnes avec les meilleurs scores.

Un concept intéressant pour se passer des CV papiers.

Experience HTML 5

Cube Slam

Une expérience Google Chrome, sous la forme d’un pong en 3D. Jouez contre un ours ou un ami avec webcam dans un univers polygonal et coloré.

Pour satisfaire votre âme de geek, un site dédié détaille les technologies utilisées.

Experience HTML5

Pearl Boy

Pearl Boy est une expérience basée sur Gooengine. La démo est constituée d’un univers en 3D, avec lumières, sons et interactions. Le tout avec un chargement rapide, c’est assez impressionnant ! Je vous laisse juger par vous-même :

Experience HTML 5

Hello Run

Un jeu carrément sympathique dans un univers 3D futuriste. Passez les portes et tentez d’aller le plus loin possible.

Hello RUN

Danger Dirt

Un jeu 3D dans une arène. Armé de votre fusils, anéantissez les différentes vagues d’ennemis qui cherchent à vous nuire. L’univers simpliste est basé sur de grossiers polygones, mais l’interactivité et le fun sont au rendez-vous.

Experiences HTML5

Urban Galaxy Online

Un MMORPG basé sur WebGL : voici ce qui résume Urban Galaxy Online. Le jeu se déroule sur Anassin, capitale du domaine appelé « Solar Empire double« , située sur la planète Cotricon.

Pour l’instant en version pre-alpha, l’expérience vaut le détour.

HTML 5

MapDive

Comme son nom l’indique, il s’agit d’une expérience basée sur Google Maps. Contrôlez PegMan, le célèbre personnage de Street View, dans une chute libre vers un objectif précis.

Plus d’informations sur la technologie sur ce site dédié.

HTML5 Expérience

Epic Citadel

Une expérience inédite basée sur le moteur de jeux Unreal. Sûrement la démo la plus poussée de cette sélection, je n’ai pas les mots pour décrire le site, essayez, vous verrez !

They Will Eat You

Un univers 3D sombre, des sons étranges et des zombies ! Fuyez pauvres fous ! They will eat you…

Experience HTML5

Morph Target

Jouez avec les paramètres pour créer un morphing de visage. Déplacez votre souris et le modèle suit votre trajectoire.

Experience HTML5

The Cathedral

La cathédrale de Lyon, rendue en 3D. Utilisez la souris ou votre clavier pour commencer une petite balade dans ce lieu sacré.

The Cathedral

Face Tron

Une expérience 3D « basique » de contrôle de véhicule.

Face Tron

Banana Bread

Sorti il y a plus d’un an, vous devez probablement connaître Banana Bread. Pour faire simple, c’est tout simplement du lourd, du très lourd : un jeu en FPS multiplayer en 3D basé sur du Javascript et Web GL. À tester ab-so-lu-ment !

Experiences HTML5

Zen Photon Garden

Tracez des lignes pour jouer avec la lumière. Une réalisation originale à tester.

Experience HTML5

Ressources :

Pour vous lancer dans la création d’expériences digitales du genre, je vous propose quelques liens vers les différents outils :

Goo Engine

ThreeJS

Doc Mozilla WebGL

Tutoriel pour commencer le développement de jeux HTML5

Une introduction à la modélisation et à ThreeJS

500 Chrome Experiments

Pour conclure :

Au delà des côtés geek et techniques, ces expériences ne sont pas vaines, bien au contraire. Elles permettent d’ouvrir le web au futur. Imaginez l’un des concepts ci-dessus appliqué à du commerce en ligne par exemple ? Ou à un réseau social ? Ou encore utilisés pour des jeux créés pour des marques ? Je parle de futur, mais le futur est déjà aux portes de nos navigateurs

Quel est l’expérience qui vous a le plus marqué ?



Vous aimerez aussi :

Cette entrée a été publiée dans Concept Web, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.

17 commentaires sur 15 jeux et expériences en HTML 5

  1. Choco dit :

    Je crois bien que tu viens de me faire perde ma journée… ^^
    Très bon article.

    Merci !

  2. WDTrends dit :

    Haha, il aurait fallu préciser « perte de productivité en vue » en début d’article ;)

  3. Vraiment un super article, avec de super applications.

  4. Agence WEBQAM dit :

    C’est vrai que niveau productivité on est pas au top mais en ce qui concerne l’innovation et les idées, l’article est très sympa !

  5. WDTrends dit :

    @Agence WEBQAM : Et c’est peut-être le plus important !

  6. Agence WEBQAM dit :

    @ WDTrends. Pour sortir des exemples d’exploration technologique, on peut mettre le html 5 au service du marketing et l’utiliser pour mettre en avant des produits comme vous pouvez le voir sur ce site que nous avons réalisé : http://pinceaux.makeupforever.fr/

  7. Fabien dit :

    Epic Citadel était en effet la toute première demo de Infinity Blade pour iOS utilisée pour démontrer la puissance du nouveau iPhone (4 si je me souviens bien).

  8. WDTrends dit :

    @Fabien : Je ne savais pas mais oui effectivement. Merci pour l’info et Epic Citadelle est disponible pour Iphone / Ipad. Ce n’est pas un jeu bien sûr, mais ce que l’on pourrait appeler une démo technique de haut vol.

  9. Ping : Le meilleur du web #60: liens, ressources, tutoriels et inspiration | Design Spartan : Art digital, digital painting, webdesign, illustration et inspiration…

  10. Brendan dit :

    j’en ai testé plusieurs sur mon téléphone et la plupart ne démarre pas.

    pour la demo de l’épic citadel, elle ne marche pas non plus :(

    par contre en cherchant sur le site j’ai trouvé 1 autre version
    http://www.unrealengine.com/flash/
    qui elle fonctionne partout (même internet explorer !)

  11. Ping : 15 jeux et expériences en HTML5 | Moving'O'Web

  12. gabrielleQ dit :

    …La Nuit T0us Les Chats Sont Gris…

  13. Ping : Les ressources web du lundi #65 | BlogTn

  14. Ping : 15 jeux et expériences en HTML 5 | Webde...

  15. Ping : Doriane Mouhé | Pearltrees

  16. Ping : 15 jeux et expériences en #HTML 5 | Web-...

  17. Ping : 15 jeux et expériences en #HTML 5 | Les ...

Laissez votre impression, réagissez à l'article !

L'adresse de contact ne sera pas publiée.

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>