18041 sujets

Questions générales et questions de débutants

[Résolu] Animation créé en fonction de la position d'un clic

Bonjour,
Je ne savais pas bien ou poser ce topic, car après de longues heures de recherches, j'ai avancé, mais peut être pas tout à fait dans la bonne direction bien que ce fut intéressant. J'aurais donc besoin soit d'une réponse, soit (et surtout) de direction à prendre, de mot clef pertinent pour ma recherche, et d'éclaircissements.

Tout d'abord, ce que je veux faire est parfaitement présent sur cookie clicker: Quand on clique sur le cookie, il y a un +1 qui apparait en fonction de la variable associé. Ainsi, si le clic rapporte 1cookie, on aura +1, si ça rapporte +30, on aura +30.
Lien de cookie clicker: http://orteil.dashnet.org/cookieclicker/

De mon côté, j'ai suivis ce tutoriel pour m'inspirer de la position de la souris:
http://ahklefe.free.fr/clients/damienalexandre.fr/Info-Bulle-en-Javascript.html

dont l'exemple du code est ici:
http://ahklefe.free.fr/clients/damienalexandre.fr/share/info-bulle-javascript.html

Actuellement, j'ai une grosse div. Quand on passe la souris dessus, l'infobulle transformée qu'on appellera quand même infobulle suit ma souris pour m'indiquer combien va me rapporter 1clic. Mon idée était de déclencher une animation d'opacité et de position de l'infobulle au clic de ma grosse div...Mais suite à un test sur un code trouvé et modifié en ligne sur je ne sais plus quel site, je me rend compte qu'il y aura un soucis de position, ainsi que d'information en doublon qui viendront parasiter la position/opacité...et je suis plutôt dos au mur niveau recherche, vue que je ne sais plus quel mot clef utilisé.

Ce que j'aimerais, c'est que quand on clic à une position donné sur la grosse div, une animation +variable soit non pas enclenché mais créé à cette position, et arrête de suivre ma souris, histoire que si on clic 3fois très rapidement, à trois endroits différents, on puisse voir la même animation, à ces 3endroits différents, avec le même décalage de temps que le décalage de temps utilisé pour cliquer les 3 fois.

Auriez vous des conseils ? Des mots clefs ? Des directions à suivre ?

(Merci d'avance, même si je dirais surement encore merci dans mes réponses ^^)

Je vous met également mon code (les meuhro, c'est le nom temporaire de la money):

CSS:

.infobulle{
	position: absolute;	
	visibility : hidden;
	padding: 0px;
	font-family: Montserrat, Verdana, Arial;
	font-size: 30px;
}

#clicker_001_clic{
	display:block;
	position:absolute;
	height:460px;
	width:550px;
	top:70px;
	left:42px;
	-moz-transition-duration:0.5s;
	-ms-transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	background-color:grey;
}




Javascript: (J'ai laissé les annotations du tuto cité au dessus)

function get_meuhro(number){
	meuhro = meuhro + meuhroclic * 1;
	document.getElementById("meuhro").innerHTML = Math.round(meuhro);
};


function GetId(id){
	return document.getElementById(id);
}

var i=false; // La variable i nous dit si la bulle est visible ou non
				
function move(e) {
	if(i) {  // Si la bulle est visible, on calcul en temps reel sa position ideale
		if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
			GetId("curseur").style.left=e.pageX + 20+"px";
			GetId("curseur").style.top=e.pageY + -50+"px";
		 }
		 else { // Modif proposé par TeDeum, merci à lui
		
			if(document.documentElement.clientWidth>0) {			      		
				GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
				GetId("curseur").style.top=-10+event.y+document.documentElement.scrollTop+"px";
			}
			 else {
				GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
				 GetId("curseur").style.top=-10+event.y+document.body.scrollTop+"px";
			 }
		 }
	 }
}
				

function montre(text) {
	if(i==false) {
		GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
	 i=true;
	 }
}
				
function cache() {
	if(i==true) {
		GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache
		i=false;
	}
}

document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.




HTML:
<div id="clicker_001_clic" onclick="get_meuhro()" onmouseover="montre('');" onmouseout="cache();">
</div>

<div id="curseur" class="infobulle">+<span id="meuhroclic">1</span></div>


Et pour tester le code déjà présent, mais pas isolé du reste, c'est ici, mais comme vous le voyez, avec cette démarche, je suis pas du tout dans le même principe du +1 de cookie clicker Smiley ohwell
http://julienperez.fr/clickerworld/
(Juste, faut cliquer 10fois sur ce satané bouton pour accédé à la bonne page...c'était des test de chargement pour découvrir un peu les conditions en javascript)
Modifié par Ceyji (13 Dec 2016 - 10:02)
Bonsoir Ceyji,
j'aimerai savoir : de quoi le visiteur sera instruit meilleurement ?

Sinon toi. Et en quoi ?
Modifié par pictural (13 Dec 2016 - 01:51)
Modérateur
Salut Ceyji,

Au moment ou tu détecte le click (en même temps que tu rajoutes des points) il faudrait juste capter les coordonnées X et Y de ton click et rajouter un élément HTML (un div par exemple) au vol dans le DOM en utilisant createElement() et appendChild() : https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild
(Tu peux ne créer qu'une seul fois l'élément et à chaque click faire un appendChild() puis lui donner les coordonnée du click)

Une fois créé tu lui donne les coordonnées en absolute ou fixed et tu l'anime.

Pour l'étape d'après il faudra que tu penses à "comment les supprimer" ! Sinon tu va te retrouver avec une montagne de div invisibles ^^
Alors pour répondre à ta question, pictural:

Pour le visiteur, ça lui donnera un retour sur le clic, car actuellement, il n'a rien d'autre que ses pièces qui augmente. Ce serait suffisant si 1clic=1pièce durant tout le jeu, mais ne n'est pas le cas, et il faut donc quelque chose pour l'utilisateur afin d'avoir un retour sur ce qu'il fait, surtout qu'avec les incrémentations, plus on avance, moins on arrive à savoir combien donne le clic. De plus, ça ajoute de l’interaction, et ça, c'est important, car ça stimule l'envie de cliquer (Bon, on est d'accord que sans graphisme, pas trop mais là n'est pas la question).
Et c'est soit l'idée que j'aimerais développer et que je demande, qui fait plutôt esthétique, joli, pratique...Soit le mettre quelque part dans un coin, fixe, affichant juste la variable et c'est mon idée de secours, mais ce serait vraiment dommage visuellement.
La première incrémentation sur la droite qui n'est qu'à peine codé donne actuellement 0.2 pièce par seconde par achat, et à partir de 5, débloque un achat coutant 100 et transformant le rendement du clic de 1 pièce en 3pièces. (puis à 10 achats de la 1ère incrémentation sur la droite, un nouvel achat, dont les infos sont aussi non codé, mais déjà en place transformant la valeur du clic de 3 à 10).

Quant à moi, étant du milieu du graphisme et non du code, ça me donnerait 2 choses: Comme dit, je ne demande pas forcément la solution, mais des directions/mots clefs afin de chercher.
D'abord, ça me donnerait la possibilité de faire des informations scores. pas forcément sur un clicker game comme ici (qui m'a énormément apprit sur les variables, les conditions, les fonctions et la modification CSS par les fonctions, car c'est encore tout nouveau pour moi).
Ensuite, cette possibilité de lancer autant de fois l'animation simultanément par le clic pourrait être un outil fort intéressant comme idée d’interactions pour faire de l'animation web.
Enfin, et tout simplement, ça me permettrait de comprendre comment le faire. ça parait bête, mais ça m'intéresse tout simplement. Le clicker game que je réalise n'a pour but que de me faire apprendre le javascript et de tester des choses dans un exemple concret. Rien de moins, rien de plus.

(Bon cependant, en y ayant réfléchis toute la nuit, j'ai peut être trouvé un moyen de contourner ce que je veux faire pour faire presque exactement la même chose, sauf que ce sera limité car je ne vois vraiment pas comment je pourrais créer autant de [div associé à ses variable position] que de clic durant le temps de 1animation (entre 0.5sec et 1sec). De plus, je pense que ma solution n'est pas une solution codé "proprement" donc si vous avez ne serait-ce qu'un nom de ce que je veux entreprendre, en français ou anglais, je suis preneur pour poursuivre mes recherches)

Merci d'avance,

EDIT: Ho une réponse pendant que j'écrivais ma réponse =O Merci infiniment de ta réponse Smiley smile Je vais aller regarder/apprendre et tester autour de tout ça Smiley smile Merci beaucoup _Laurent =)
Modifié par Ceyji (13 Dec 2016 - 10:01)
Modérateur
Yo,

Je me suis trompé tout à l'heure en te disant que tu pouvais le creer qu'une fois et l'appen plusieur fois. Il faut en creer autant que de différent.

Voila un petit exemple avec un remove au bout de 8 secondes. Je ne sais pas si la facon dont j'ai fait le remove c'est la bonne façon de faire je ne suis pas expert en Js mais ça à l'air de fonctionner.
https://jsfiddle.net/Undless/ukgzw0ws/2/

Restera plus qu'a positionner tout ca sur tes position de click et à animer (en CSS Smiley cligne ) !

bonne journée
Sujet clos
Aller à