Animation

Résolu/Fermé
jun_1393 Messages postés 28 Date d'inscription jeudi 26 septembre 2019 Statut Membre Dernière intervention 2 juin 2020 - 26 sept. 2019 à 02:23
jun_1393 Messages postés 28 Date d'inscription jeudi 26 septembre 2019 Statut Membre Dernière intervention 2 juin 2020 - 4 oct. 2019 à 18:53
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";
		}
A voir également:

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.
0
jun_1393 Messages postés 28 Date d'inscription jeudi 26 septembre 2019 Statut Membre Dernière intervention 2 juin 2020
1 oct. 2019 à 04:05
bonsoir, sa fait un moment.
hum, j'ai fait un peut de recherche sur le javascript et je viens de finir la fonction qui va caché mes images Et les faire reparaître. cependant je me demandais comment faire pour que, un individu puisse cliquer sur les images dans l'ordre dans lequel elle ont disparut pour gagné des point. Merci pour vos future conseille et passer une bonne soiré.
PS: voici ou je suis arriver dans mon code
//Fonction pour créer un tableau
function generation2() {
	img_touche = 0;
	var output = ' ';
	img_array.img_tile_shuffle();
	for (var i = 0; i < img_array.length; i++) {
		output += '<div id ="title_' + i + '" onclick="imgFlipTile(this, \'' + img_array[i] + '\')" style= "background-image : url(' + img_array[i] + ')"></div>';
	}
	document.getElementById('grille').innerHTML = output;
}

//fonction pour cacher les images

function animation1() {
	var element_id = [];
	var c = img_array.length;
	score = 0;

	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")
		}
		element_id.splice(rnd, 1);					//supprime l'element caché
		c--;
	}, 2000);

	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")
			}
		}},2000*img_array.length+3000)   //attend que la premiere partie fini avant de faire apparaitre les images;

}
0
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)
0
jun_1393 Messages postés 28 Date d'inscription jeudi 26 septembre 2019 Statut Membre Dernière intervention 2 juin 2020
3 oct. 2019 à 04:52
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?
0
jun_1393 Messages postés 28 Date d'inscription jeudi 26 septembre 2019 Statut Membre Dernière intervention 2 juin 2020
3 oct. 2019 à 20:49
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
0
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();
0