[RPG-MAKER.FR] Oniromancie: tout l'univers de RPG Maker en français - Les forums

J'en ai encore "entendu" parler dans les Blala d'Hiver et ça m'as donné envie de retoucher le script de neige.

Avec ce script mis à jour il n'est plus possible de voir un flocon sortir de l'écran qui agrandirais la page et il n'est plus possible de cliquer par mégarde sur le lien mort "http://espacejavascript.com/" (j'ai laissé le lien mais j'ai mis un pointer-events:none dans le css du bloc pour que le clic ne soit plus possible).

Alors j'ai peut être perdu mon temps si ça ne plaît pas mais j'ai aussi créé une fonction 'toggleSnow()' qui permet d'activer ou de désactiver sans rafraichissement la chute des flocons de neige.
Pour que ce soit pris en compte côté serveur j'ai laissé en commentaire dans "toggleSnow()" un code Ajax prêt à l'emploi (avec une petite sécurité anti "spam de clic") qui envoie à un script PHP la variable $_POST["enableSnow"].
Si les flocons sont désactivés côté serveur et que l'utilisateur veut les réactiver sans rafraichir la page il faut quand même insérer le script JS mais initialiser la valeur "animateSnow" à false (c'est la toute première variable déclaré dans le script).

Pour que tout fonctionne sans soucis il faudrait aussi changer l'actuel lien pour activer/désactiver la neige de : <a href="index.php?neige=chgdeux">Désactiver<br>la neige</a>
à : <a id="snowButton" onclick="toggleSnow();" href="#">Désactiver<br>la neige</a> (et si la neige est désactivé côté serveur le lien devra évidemment être : <a id="snowButton" onclick="toggleSnow();" href="#">Activer<br>la neige</a>.

C'est tout ! Ça ne changera rien pour le lag de certain je pense et on perd le support de NetScape (c'est pas très grave je pense, si ?).
J’espère que l'idée vous branchera, sinon... beh tant pis

!

Code du Script JS Complet (je me suis permis de mettre mon pseudo pour l'édition du script et j'ai bien sur laissé le nom de l'auteur original. Si vous voulez kicker mon pseudo parce-que déjà pas mal de personnes y avait déjà touché, pas de soucis !) :

<script>
/******************************************
* Snow Effect Script- By Altan d.o.o. (snow@altan.hr, http://www.altan.hr/snow/index.html)
* Edited by Keilrod 2019 for Oniromancie
******************************************/
 
var animateSnow = true;//Peut etre initalise a false pour pouvoir reactiver l animation apres.
//Configure below to change URL path to the snow image
var snowsrc="interface/neige.gif"
// Configure below to change number of snow to render
var no = 10;
 
var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
 
doc_width = window.innerWidth;
doc_height = window.innerHeight;
 
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
  
function snowStartAnimate(){
        for (i = 0; i < no; ++ i) {
                dx[i] = 0;                                      // set coordinate variables
                xp[i] = Math.random()*(doc_width-75);  // set position variables
                yp[i] = Math.random()*doc_height;
                am[i] = Math.random()*20;         // set amplitude variables
                stx[i] = 0.02 + Math.random()/10; // set step variables
                sty[i] = 0.7 + Math.random();     // set step variables
 
                var snowElem = document.createElement('div');
                if (i == 0) {
                        snowElem.id = "dot"+ i;
                        snowElem.innerHTML = "<a href=\"http://www.espace<b></b>java<b></b>script<b></b>.com\"><img src='"+snowsrc+"' border=\"0\"><\/a>";
                        snowElem.style.position = "absolute";
                        snowElem.style.zIndex = i;
                        snowElem.style.visibility = "visible";
                        snowElem.style.top = 15;
                        snowElem.style.left = 15;
                        snowElem.style.pointerEvents = "none";
                } else {
                        snowElem.id = "dot"+ i;
                        snowElem.innerHTML = "<img src='"+snowsrc+"' border=\"0\"><\/a>";
                        snowElem.style.position = "absolute";
                        snowElem.style.zIndex = i;
                        snowElem.style.visibility = "visible";
                        snowElem.style.top = 15;
                        snowElem.style.left = 15;
                        snowElem.style.pointerEvents = "none";
                }
                document.body.appendChild(snowElem);
        }
        snowAnimate();
}
 
function snowAnimate() {  //main animation function
        if(!animateSnow){
                return;
        }
        for (i = 0; i < no; ++ i) {  // iterate for every dot
                yp[i] += sty[i];
                if (yp[i] > doc_height-50) {
                        xp[i] = Math.random()*(doc_width-am[i]-30);
                        yp[i] = 0;
                        stx[i] = 0.02 + Math.random()/10;
                        sty[i] = 0.7 + Math.random();
                        doc_width = window.innerWidth;
                        doc_height = window.innerHeight;
                }
                dx[i] += stx[i];
 
                var leftPx = parseInt(xp[i] + am[i]*Math.sin(dx[i]));
                if(leftPx > doc_width-75){
                        leftPx = doc_width-75;
                }
 
                document.getElementById("dot"+i).style.top = parseInt(yp[i]) + "px";
                document.getElementById("dot"+i).style.left = leftPx + "px";
        }
        setTimeout("snowAnimate()", 10);
}
 
var spamFlag = false;
function toggleSnow(){ //toggle between animation and no animation
        if(spamFlag == false){
                spamFlag = true;
                if(animateSnow){
                        for (i = 0; i < no; ++ i) {
                                var snowElement = document.getElementById("dot"+i);
                                snowElement.parentNode.removeChild(snowElement);
                        }
                        animateSnow = false;
                        document.getElementById("snowButton").innerHTML = "Activer<br/>la neige";
                }
                else{
                        animateSnow = true;
                        snowStartAnimate();
                        document.getElementById("snowButton").innerHTML ="Désactiver<br/>la neige";
                }
 
                //Note pour Oniro : Ici on pourrait lancer de l Ajax pour ne plus afficher le script de neige grace au php, la valeur booleenne "animateSnow" peut etre utilise comme valeur a envoyer.
                
                //$.ajax({
                //      url : 'snowToggle.php',
                //      type : 'POST',
                //      data : {enableSnow , animateSnow},//dans le script php il faudra récupérer  : $_POST["enableSnow"]
                //      dataType : 'html',
                //      success : function(){
                //              console.log("Snow changes success !);
                spamFlag = false;//il faut bien laisser cette ligne dans le success de l ajax
                //      },
 
                //      error : function(request, status, error){
                //              console.log("Snow changes failed ! Response : " + request.responseText);
                //      }
                //});
        }
 
}
 
if(animateSnow){
        snowStartAnimate();
}
 
</script>