Animation [Résolu]

Signaler
Messages postés
19
Date d'inscription
jeudi 26 septembre 2019
Statut
Membre
Dernière intervention
12 décembre 2019
-
jun_1393
Messages postés
19
Date d'inscription
jeudi 26 septembre 2019
Statut
Membre
Dernière intervention
12 décembre 2019
-
bonsoir je fais un exercice en javascript ou je veux faire une animation qui va faire disparaître aléatoirement les cellules d'un tableau d'image aléatoirement puis les faire reparaître. la fonction va être lancer par un bouton
je pense que les id des cellules devront être utilisé et faire la fonction d'animation merci de votre aide.

  	// animation qui va indiquer quel image le joueur va cliquer
	 function animation() {
			document.getElementById("tableau").style.visibility= "hidden";
			document.getElementById("tableau").style.visibility= "unhidden";
		}

1 réponse

Bonsoir,
pour faire une animation il faut une durée(début et fin) e votre script ne veut rien dire puisque vous dites de rendre visible puis rendre invisible(avec une faute) quelque chose à 2 lignes d'écart qui auront un résultat en quelques milliardièmes de secondes, donc pas suffisant pour que l’œil humain aperçoive quelque chose. Quand à unhidden ça n'existe pas c'est plutôt 'visible' qu'il faut indiquer. Un peu de recherche sur la propriété CSS "visible" vous l'aurait indiqué.

Autre erreur ou lacune vous parlez de faire l'animation sur les cellules d'un tableau mais ciblez tout le tableau.
Il vous faut donc cibler chaque élément du tableau(cellule) séparément.
Pour déterminer quelque chose d'aléatoire vous avez la fonction random.


Pour l'animation voir Google(ou votre moteur de recherche préféré) avec comme recherche "animation CSS".

Ici on veut bien vous aider gentiment et gracieusement mais pour vous aider il faudrait que vous ayez fait quelque chose. Dans l'état ce que vous avez indiqué ou rien c'est du pareil au même.

Si comme je le pense vous n'avez aucune connaissance des langages (JavaScript , CSS) le mieux serait d'aller faire un ou plusieurs cours débutants qui vous donnera des bases.

Bon travail alors c'est assez simple ce que vous voulez faire. Revenez avec vos travaux si vous avez un soucis mais vous trouverez toutes les réponses facilement sur le web ou même par vous même une fois que vous aurez de meilleures notions de programmation JavaScript et des possibilités d'animer quelque chose sur une page web.
salut,
il faut d'abord retenir cet ordre. Dans un tableau par exemple qui va enregistrer chaque valeur fournie par img_tile_shuffle(); et ensuite faire un autre tableau qui enregistre les clicks sur l'image, un truc du genre:

let tableauClick=[]
elementImage.addEventListener('click', function(e){
//-- détermine l'identifiant de l'image 
let numeroImage =  X;//-- avec this et 'e' on peut obtenir l'élément qui est cliqué, il suffit d'obtenir son numéro
//-- ajouter click
tableauClick.push(e.numeroImage);
//-- comparaison de la dernière image du tableau des clicks
if ( tableauOrdreApparition[tableauClick.length-1] == tableClick[numeroImage.length-1]){
//-- c'est bon on continue au clic suivant
}else{
//-- c'est pas bon on vide le tableau des clicks ou tout autre truc à faire
tableauClick=[];
}

);


Bien sûr rajouter la condition quand on arrive à la dernière image à trouver( tableImage.length = total des images)
jun_1393
Messages postés
19
Date d'inscription
jeudi 26 septembre 2019
Statut
Membre
Dernière intervention
12 décembre 2019

bonsoir encore merci a tous pour votre aide.
la mon code est presque fini sinon pour le jouer je l'ai fait comme sa :
//  Le JOUER
var tab = [];
function joue(e) {
	tab.push(parseInt(e));
	document.getElementById("test2").innerHTML = JSON.stringify(tab);

	if (tab.length == get_id.length) {
		if (JSON.stringify(tab) == JSON.stringify(get_id)) {
			document.getElementById("test3").innerHTML = "bon";
			score++
		}
		else {
			document.getElementById("test3").innerHTML = "mauvais";
		}

	}
}


cependant j'ai voulu ajouté une fonction pour gere le score;
je voulais que mon score soit limité, il aurait commencer à exp: 0/5 et aurais augmenté quans les deux tab sont identique. Je me suis retrouve avec une boucle for qui ne fait rien puisse que je ne vois pas comment le faire tourné
/*function g_score() {
	score = 5
	for (i = 0; i < score; i++) {

	}
}*/


devrais-je fusionner les deux méthodes?
jun_1393
Messages postés
19
Date d'inscription
jeudi 26 septembre 2019
Statut
Membre
Dernière intervention
12 décembre 2019

j'arrivais pas afficher mon score
le probleme etait que mon innerHTML etait dans mon if
score = 0;
var tab = [];
function joue(e) {
	tab.push(parseInt(e));
	document.getElementById("test2").innerHTML = JSON.stringify(tab);

	if (tab.length == get_id.length) {
		if (JSON.stringify(tab) == JSON.stringify(get_id)) {
			document.getElementById("test3").innerHTML = "bon";
			score++;
			tab = [];
			get_id = [];
			generation2();
		}
		else {

			document.getElementById("test3").innerHTML = "mauvais";
			score;
			tab = [];
			get_id = [];
			generation2();
			
		}
	} document.getElementById("divscore").innerHTML = score.toString();

}


voila le code il me reste a donner une limite au score. merci a tous
Salut
let score=0;
function addScore(){ score = score<5 ? score++ : score;}//- opérateur ternaire équivalent d'un if/else

donc
...
document.getElementById("test3").innerHTML = "bon";
addScore();
jun_1393
Messages postés
19
Date d'inscription
jeudi 26 septembre 2019
Statut
Membre
Dernière intervention
12 décembre 2019

merci j'avais finalement fais quelque chose de semblable
tout mon script si sa peut aider quelqu'un
//mélanger le tableau
Array.prototype.img_tile_shuffle = function () {
	var i = this.length, j, temp;
	while (--i > 0) {
		j = Math.floor(Math.random() * (i + 1));
		temp = this[j];
		this[j] = this[i];
		this[i] = temp;
	}
}

//  Le JOUER du joueur
score = 0;
var tab = [];
function joue(e) {
	tab.push(parseInt(e));
	document.getElementById("test2").innerHTML = JSON.stringify(tab);

	if (tab.length == get_id.length) {
		if (JSON.stringify(tab) == JSON.stringify(get_id)) {
			alert("Bravo!")
			tab = [];
			get_id = [];
			uptade();
			generation2();
		}
		else {

			alert("Recommencer!")
			tab = [];
			get_id = [];
			generation2();

		}
	} document.getElementById("divscore").innerHTML = score.toString();
}

function uptade() {
	if (score == 5) {
		alert("TU AS GAGNER")
	}
	else {
		score++
	}
}




/*function show_score() {
	document.getElementById("divscore").innerHTML = score.tostring();
}*/


//Fonction pour créer un tableau
function generation2() {

	var output = ' ';
	img_array.img_tile_shuffle();
	for (var i = 0; i < img_array.length; i++) {
		output += '<div id ="title_' + i + '" onclick="joue(\'' + i + '\')" style= "background-image : url(' + img_array[i] + ')"></div>'
	}
	document.getElementById('grille').innerHTML = output;

}





//fonction pour cacher les images
var get_id = [];
function animation1() {
	var element_id = [];
	var c = img_array.length;

	for (i = 0; i < c; i++) {
		element_id[i] = i;
	}

	setInterval(function () {
		var rnd = Math.floor(Math.random() * Math.floor(element_id.length));

		if (document.getElementById("title_" + element_id[rnd]).style.visibility = "visible") {
			(document.getElementById("title_" + element_id[rnd]).style.visibility = "hidden")
		}

		get_id.push(element_id[rnd]);                                       // recupere les elements dans le nouveau tableau
		element_id.splice(rnd, 1);					//supprime l'element caché
		c--;
		document.getElementById("test").innerHTML = JSON.stringify(get_id)

	}, 800);


	setTimeout(function () {
		for (i = 0; i < img_array.length; i++) {
			if (document.getElementById("title_" + i).style.visibility = "hidden") {
				(document.getElementById("title_" + i).style.visibility = "visible")
			}
		}
	}, 800 * img_array.length + 800)   //attend que la premiere partie fini avant de faire apparaitre les images;


}