image a emplacement aléatoire Résolu/Fermé

Question

Bonjour,

Ne connaissant pas grand chose au javascript, j'aimerais savoir si quelqu'un pourrais m'aiguiller sur une chose que j'aimerais mettre en place sur mon jeu en ligne.

Je m’explique, j'aimerais qu'une image apparaisse n'importe ou sur la page aléatoirement et que à chaque rechargement de la page il y ai une chance que l'image apparaisse à l'écran.

Je sais pas trop si je suis claire et dans le cas contraire, n'hésitez pas à me demander, j'essayerais de m'expliquer le plus précis possible.
J'ai pensé au javascript plus qu'au php.

Merci à vous pour votre aide.

jordane45 · Answer

Bonjour,

Un peu de random
un if/esle
un peu de css avec la proprieté display

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/if...else 
 https://www.journaldunet.fr/web-tech/developpement/1202637-comment-afficher-masquer-une-div-en-javascript/

.

David987 · Answer

Merci pour ta réponse rapide Jordan45.

Je vois bien comment faire, mais c'est en php là c'est bien ça ? 
Mais je ne vois pas comment faire apparaître l'image n'importe ou sur la page en css c'est possible ça ?

David987 · Answer

Ah d'accord désolé j'ai pensé au phph avec rand(), if, else ...etc.

Je regarde tes liens, je test un petit script et si je bloque, je reviens avec le code.

Merci à toi.

David987 · Answer

Alors voila ce que je peux en ressortir pour le moment :

Le problème que j'ai maintenant, c'est que l'image apparaît à chaque fois alors que le rand n'est pas toujours égale à 5 puisqu'il peut être de 1 à 10. Une idée ? (je cherche toujours en attendant bien entendu)

jordane45 · Answer

Avec des quotes autour des propriétés... ça marche mieux...

Voici le code amélioré et corrigé

document.addEventListener("DOMContentLoaded", function(){
      // on s'assure que la page a terminée de se charger...
      displayImg();
      
    });

//fonction du random
    function selec_rand(max) {
      return Math.floor(Math.random() * max);
    }

David987 · Answer

function rand_style(min, max) {
   return Math.random() * (max - min) + min;
  }
  
  function position_top(){
   var TOP = rand_style(10, 90);
   var LEFT = rand_style(10, 90);
   var e = document.getElementById('image_event');
    e.style.top = TOP;
    e.style.left = LEFT;
    console.log('top',TOP); // affichage dans la console du navigateur 
    console.log('left',LEFT); // affichage dans la console du navigateur 
  }

J'ai fais ça pour le moment, donc ma fonction est bien appelée puisque c'est le même nom que pour l'affichage aléatoire.
Sauf que dans la console, il me met toujours rien.

Tu as une idée ?

David987 · Answer

J'ai fais ça pour le moment, donc tous ce que je veux qui s'affiche dans la console s'affiche correctement, sauf que l'image ne se positionne pas forcément là ou elle doit etre. Tu as une idée ?

David987 · Answer

Effectivement ça marche mieux

document.addEventListener("DOMContentLoaded", function(){
   // on s'assure que la page a terminée de se charger...
   displayImg();
  });

//fonction du random
  function selec_rand(max) {
   return Math.floor(Math.random() * max);
  }
  
  function rand_style(min, max) {
   return Math.random() * (max - min) + min;
  }
  
  function displayImg(){
   var IMG = document.getElementById('image_event');
   var random = selec_rand(10);
   var TOP = rand_style(10, 90);
   var LEFT = rand_style(10, 90);
   var RIGHT = rand_style(10, 90);
   var BOTTOM = rand_style(10, 90);
   console.log('random',random); // affichage dans la console du navigateur
   console.log('top',TOP); // affichage dans la console du navigateur 
   console.log('left',LEFT); // affichage dans la console du navigateur
   console.log('right',RIGHT); // affichage dans la console du navigateur 
   console.log('bottom',BOTTOM); // affichage dans la console du navigateur
   if (random >= 0) {
    //Affichage de l'image
    IMG.style.display = 'block';
    IMG.style.top = TOP+'%';
    IMG.style.left = LEFT+'%';
    IMG.style.right = RIGHT+'%';
    IMG.style.bottom = BOTTOM+'%';
    IMG.style.position = 'relative';
    IMG.style.zIndex = '1';
   } else {
   //Masquage de l'image
   IMG.style.display = 'none';
   }
  }

Par contre, l'image s'affiche en haut de la page aléatoirement mais toujours en haut.

C'est normal sachant que les valeurs sont toujours différentes ?

EDIT : Sur chrome ça marche nickel mais sur firefox elle reste aléatoire qu'en haut de la page

David987 · Answer

Ah mince, j'avais voulu testé avec relative mais j'ai pas remis absolute.

Tous fonctionne nickel, merci à toi pour ton aide.
Je met mon code ici (code javascript seulement) si quelqu'un à le même besoin que moi.

document.addEventListener("DOMContentLoaded", function(){
			// on s'assure que la page a terminée de se charger...
			displayImg();
		});

//fonction du random
		function selec_rand(max) {
			return Math.floor(Math.random() * max);
		}
		
		function rand_style(min, max) {
			return Math.random() * (max - min) + min;
		}
		
		function displayImg(){
			var IMG = document.getElementById('image_event');
			var random = selec_rand(10);
			var TOP = rand_style(10, 80);
			var LEFT = rand_style(10, 80);
			var RIGHT = rand_style(10, 80);
			var BOTTOM = rand_style(10, 80);
			console.log('random',random); // affichage dans la console du navigateur
			console.log('top',TOP); // affichage dans la console du navigateur	
			console.log('left',LEFT); // affichage dans la console du navigateur
			console.log('right',RIGHT); // affichage dans la console du navigateur	
			console.log('bottom',BOTTOM); // affichage dans la console du navigateur
			if (random >= 0) {
				//Affichage de l'image
				IMG.style.display = 'block';
				IMG.style.top = TOP+'%';
				IMG.style.left = LEFT+'%';
				IMG.style.right = RIGHT+'%';
				IMG.style.bottom = BOTTOM+'%';
				IMG.style.position = 'absolute';
				IMG.style.zIndex = '1';
			} else {
			//Masquage de l'image
			IMG.style.display = 'none';
			}
		}

Image a emplacement aléatoire

9 réponses

Discussions similaires