11499 sujets

JavaScript, DOM et API Web HTML5

Bonsoir,

Je cherche à faire un jeu "de clic" c'est-à-dire qu'il y a quelques images de fond fixes et des images qui "arrivent". Le but est, selon l'image qui arrive, cliquer sur la bonne image "de fond".

Je pensais utiliser canvas mais la gestion du clic sur image n'est pas terrible. J'ai donc pensé à du html "simple" pour les images de fond (avec id & cie) et du canvas pour les images qui changent... Mais j'ai un doute, est-ce qu'il n'existe pas quelque chose de mieux que ça ?

Merci d'avance
Bonjour.

Je pense que ça dépendra de la complexité du truc, mais je ne pense pas que tu aurais besoin de canvas pour ton jeu.

Un peu de jQuery devrait suffire.
Je ne connaissais pas <map> et <area> merci du conseil, je cours voir ce que c'est...
(oui je préfère apprendre en fonction de projets que lire des tutos en entier d'abord^^)

jQuery ? Je ne suis pas sûre de savoir ce que c'est... Et d'après ce que j'ai compris, je ne préfère pas l'utiliser

Merci à vous en tout cas !!

Edit : Après lecture de map et area

Si je comprends bien, map et area servent si j'ai une image et que cliquer dans tel coin doit faire ci alors que cliquer dans un autre coin doit faire autre chose c'est ça ? (à utiliser pour les poubelles, images "fixes")

Mais que puis-je utiliser pour faire apparaitre les déchets (images à ranger dans les poubelles) ? A savoir que j'aimerais (pour l'instant du moins) qu'il n'y ait qu'un déchet à la fois...
Merci encore
Modifié par Ccile13 (19 Aug 2013 - 16:50)
Je rejoins SolidSnake avec jQuery, tu peux aller voir du côté de Mootools également.

Mootools et jQuery sont des librairies JavaScript. Elles facilitent le développement et notamment la création d'animation et d'interactivité (principe de base d'un jeu).
D'après ce que je comprends, ton jeu n'a rien de compliqué, mais cela nécessite quelques connaissances tout de même. N'hésites pas à expliquer un peu plus le principe interactif et la mise en forme si tu veux une aide plus précise dans ta prog.
Exemple d'utilisation Mootools avec le Drag and Drop: http://mootools.net/demos/?demo=Drag.Drop

La solution est clairement Javascript, ça améliorera l'interactivité, les animations, et le jeu finalement ! Pas besoin de canvas, trop complexe pour ça (à noter que Canvas est contrôlé ensuite via JavaScript aussi). A mon avis <map> et <area> seront un peu limités... Ok pour la position des blocs / images etc. mais ça ne suffira pas pour rendre ton jeu ludique.

Pour faire apparaitre tes images, gérer les différentes possibilités lors du clic, éventuellement compter des points ou quelque chose comme ça, animer tes images pour que le jeu soit assez vivant, animer les actions de l'utilisateur... Smiley eek la solution est JavaScript et donc jquery / mootools t'aideront vraiment.
Le principe peut être simple pour commencer. Tu place tes images et tes éléments dans ta page en HTML et CSS, en position "fixe" (sans animation). Et ensuite tu ajoute du Javascript pour faire apparaître / disparaître certaines images et gérer les actions de l'utilisateur en fonction (si l'utilisateur clique sur l'image numéro 2 alors c'est bon, sinon c'est pas bon Smiley lol ).

N'hésites pas à nous montrer un exemple de ce que tu cherches à faire !
Modifié par AH_creation_site (20 Aug 2013 - 10:54)
Merci beaucoup ^^

Je n'ai pas d'exemple de ce que je veux faire, mais je pense avoir toutes les clés en main sauf les dessins... Smiley decu

Dès que j'ai fait quelque chose, je le poste ^^