Est javascript / html5 capable de prendre en charge "flash comme" animation et glisser-déposer

Comme dit dans la SOE des réponses ci-dessus, je suis à peu près sûr que je suis sûr J Plugin Draggable / Dressable de la requête < / a> fera le travail pour vous si vous avez juste besoin d'une traînée de base et d'une drop dressez-moi du type de jeu. Premis de base est ceci:

1. Dans l'exemple par défaut, votre avatar à porter les vêtements serait un div avec une image de fond png / gif.jpg d'une fille / garçon quoi que ce soit (au lieu d'une chute d'orange ici arrière-plan) < / li>

2. Les vêtements seront les objets "Drag moi vers mes objectifs" dans l'exemple. Vous pouvez les créer sous forme de divs ou même des étiquettes d'image qui ont la classe draggible dans eux afin que vous puissiez les faire glisser et les déposer dans les boîtiers d'orange / avatars.

3. Vous pouvez enregistrer les données à l'aide d'Ajax, qui est également couverte par les exemples (ou d'autres tutoriels dans le filet, c'est facile)

4. ???

5. bénéfice

   Essayez simplement et voyez par vous-même. Si vous avez besoin d'aide, vous pouvez simplement demander ici à nouveau, mais je pense que les réponses de l'interface utilisateur JQuery sont des réponses valides à votre problème.

   Je n'ai pas d'exemple de site pour vous montrer, mais je suis à peu près sûr de donner des images et des trucs je peux taper quelque chose ... Si j'avais le temps lol.

Dans les vieux navigateurs, vous pouvez imiter Drag'n'drop d'élates de la DOM mais dans de nouveaux navigateurs, vous pouvez également faire glisser les fichiers (comme des images) et il y a des événements pour Il: https://developer.mozilla.org/fr/dragdrop/drag_and_drop

Pour des animations de type flash, il a été possible avec JavaScript pendant une longue période, mais que certains bugs étaient vraiment difficiles et ralentissent souvent la page. Maintenant, il y a une toile et Webgl qui vous permettent de le faire de manière plus convinciale (pour les complexes). Et avec des animations en toile, WebGL, CSS (si vous utilisez le TRIC pour que le navigateur pense qu'il est 3D), vous obtenez un processeur accéléré de sorte que c'est bien plus rapide. Il y a aussi demande-demandeFrame qui permet d'optimiser les réflexions et donc le script.

Le meilleur exemple que je connaisse sur ce qui peut être fait est le port Quake II sur le Web:

• vidéo: http://www.youtube.com/watch?v = Xhmn0wlitlk & fonction = joueur_embedded

• Site du projet: http://code.google.com/p / Quake2-GWT-Port /

Cela va être une longue discussion sur la capacité de HTML5 à concurrencer avec Flash.

À mon avis JQuery n'est pas proche de la performance Flash ou Silverlight Animation donner.

Si la comparaison est en termes de dépose, des déposés de menu, Fadein.fadeout - JQuery est compétitif.

Si je verrai les dessins animés jQuery avec beaucoup de couches et d'objets se déplaçant simultanément - je conviendrai probablement que JQuery a une performance concurrentielle.

Les choses sont comparables à voir la différence:

1. Loupe de loupe sur la photo raster

2. Émulation de fumée / eau / incendie

3. Objets 3D composés tels que les fractales avec des branches profondes

   Lorsque HTML5 l'aura doter - alors je vais accepter qu'il a une performance concurrentielle. Tout ce que je vois aujourd'hui, c'est des diaporamas et un couple de jeux qui fonctionnent sur HTML5.

Vous devriez vérifier Canvasdemos.com . Il a beaucoup de bons exemples de ce qui peut être fait. Vous pouvez jeter un coup d'œil au code source derrière ceux-là - certains vous aident même à cet égard. par exemple. jeu de piscine

D'autres bons exemples incluent le Doom comme "jeu" (vous pouvez marcher autour dans des donjons 3D).

the grenouille journal jeu était le gagnant du 10kb codage challange

aussi Ceci a été le premier résultat de la recherche de < em> démo d'animation HTML5 dans Google. Il a des liens vers 48 démos. Certains d'entre eux sont vraiment cool. Malheureusement, le code pour beaucoup d'entre eux a été minifié, mais ils pourraient toujours vous donner quelques idées sur ce que vous pouvez réaliser.

Donc, c'est bien pour faire de simples jeux de type dressubup. Toutefois, si vous cherchez à faire tout ce qui est de la CPU intensive, vous devez examiner certains points de repère de performance comme Ceci . L'animation basée sur la toile HTML5 / Toile est toujours assez éloignée du flash en termes de performance. Obtenir un comportement cohérent sur les différents navigateurs sera également un problème.

Vous pouvez définitivement faire ces choses "de type flash" maintenant dans les navigateurs Web HTML5. Consultez les exemples à http://www.chromeeilexperiments.com/

En fait, HTML5 / CSS3 / JS peut faire tout ce qui est flash peut faire. Mais il y a un peu d'inconvénient:

• Il n'est pas encore mature. Beaucoup de bugs, beaucoup de différence de mise en œuvre en fonction des navigateurs et de nombreuses personnes n'ont tout simplement pas encore de navigateurs qui le soutiennent.
• Adobe a un très bon ensemble d'outils qui aident à faire des applications flash complexes. Cela n'existe pas (encore?) Au même niveau pour HTML5.

  sur une note latérale, ni flash, ni html5 ne brillera vraiment sur le téléphone mobile. Les gens préfèrent toute façon les applications indigènes. Vous devrez peut-être fournir une version Web, mais vous aurez besoin d'une version d'application (un par gros joueur de téléphone).

  Nous pouvons spéculer sur la manière dont HTML5 gouvernera le mot dans les prochaines années, mais à ce jour, l'impact est limité en dehors de la belle démo qui consomme 100% de la CPU (vraiment, vraiment mauvais pour l'appareil mobile).

  Pour la prise en charge du glisser-déposer, tout le monde peut le faire - dans HTML4 et dans n'importe quel navigateur avec quelques lignes de JavaScript - à l'intérieur d'une page, ou peut penser à le faire entre 2 fenêtres de navigateur du même site Web. Faire glisser-déposer entre le navigateur et toute application de bureau natif est une autre chose.

Pour un excellent exemple de ce que vous pouvez faire avec HTML5 en termes de glisser-déposer, je vous suggère de jeter un coup d'oeil à ce article et en particulier la démonstration courte au début. L'article souligne également quelques autres friandises fournies avec HTML5, telles que localStorage et la toile HTML5.

Pour un tutoriel plus détaillé sur l'API HTML5 Drag-N-Drop Spécifiquement (il s'agit d'une API JavaScript), jetez un coup d'oeil à ce Autre article . Il est daté de décembre 2009 mais toujours valide.

enfin, ce vidéo vous donne une bonne idée de certains des effets visuels cool Que vous puissiez faire avec HTML5 (SVG, Canvas, CSS3, WebGL, ...). Plus d'une vidéo marketing, je vais admettre, mais une bonne illustration de certaines des fonctionnalités HTML5 les plus puissantes (du moins d'un point de vue visuel) et de ce que nous allons commencer à voir dans nos navigateurs dans un avenir pas si lointain ...

Disclaimer: Je ne travaille pas pour Mozilla. J'avais juste des recherches sur ce sujet dans le passé et j'ai constaté que le matériel produit par Mozilla, et en particulier les démos de Paul Rouget, pour être le plus instructif.