Ajax JavaScript CSS HTML 5 Firefox

Applications et jeux sur Canvas

Quelles applications peut avoir Canvas? Quelques exemples pour montrer les possibilités de la nouvelle balise HTML...

Ces scripts en JavaScript fonctionnent sur les navigateurs supportant Canvas, donc Firefox, Chrome, Safari et non sous IE. Cliquer sur l'image pour la démo.

Crystal Galaxy jeu

Crystal Galaxy

Jeu de plateau horizontal avec audio (ce qui manque quelquefois à HTML 5).

Angry Birds

Le jeu de lancer de projectiles, représentés par des oiseau qui a connu un grand succès sur mobiles est maintement implémenté sur Canvas et fonctionne avec le navigateur Chrome, et un compte utilisateur.

Labyrinthe 3D

Le code d'un labyrinthe 3D est donné en exemple sur le manuel de Mozilla, et quelques améliorations lui ont été ajoutées ici.
Etonnant, Castle Wolfenstein revient en JavaScript!

Le jeu Wolfenstein 3D complet est aussi disponible dans le navigateur.

Car Navigation

C'est un mashup de plusieurs technologies qui utilise Canvas comme surface de rendu. Les outils utilisés sont Mario Kart, OpenStreetMap et l'effet 3D est obtenu par une combinaison d'appels de drawImage. Plus de détails sur le site...

Free Civ

Une implémentation du jeu Civilisation sur Canvas, fonctionnant en ligne en mode mono ou multi joueurs.

Quake II

Utilisant la librairie graphique 3D, WebGL, donc OpenGL, HTML 5 audio et localStorage, nettement plus rapide que Doom, avec 60 fps annoncés.

Bert

Un jeu de plateforme dans le style des anciens jeux d'Apogée en 2D, avec le génie des décors en moins.

Effets d'éclairage (Lightning effects)

Avec JavaScript et Canvas, des effets de lumières basé sur l'ombrage de Phong sont appliqués sur une image. La zone sur laquelle on passe la souris s'éclaire.
Pour réaliser l'effet, on utilise deux texture d'une même image, l'une contenant les formes, l'autre les couleurs.
Le code source est disponible.

Asteroïdes

Le jeu classique.

Galactic Plunder

Un jeu de tir spatial en JavaScript avec son et musique.

Démonstration et code source

© 2008-2013 Xul.fr