Un dancefloor en jQuery

Publié le par

Aujourd’hui, je vais vous expliquer comment créer en jQuery un effet de dancefloor à la Saturday Night Fever (demo).

Tout d’abord, de quoi est composé un tel « plancher de danse » ? Tout simplement de différents carrés/cases, le tout contenu dans une surface définie.

Ici le dancefloor sera une simple <div> avec un identifiant dancefloor, à laquelle on applique en css une largeur prédéfinie, ainsi qu’un overflow non autorisé.

Pour remplir le dancefloor de ses cases, j’ai décidé de procéder en jQuery comme suit:

$('#dancefloor').html('<div class="tile" id="1"></div><div class="tile" id="2"></div>[...]<div class="tile" id="15"></div><div class="tile" id="16"></div>');

Ensuite, pour répartir les cases en 5 lignes de 5 colonnes, on applique aux cases (qui ont toutes la classe tile) le style suivant:

.tile {
    width: 100px;
    height: 100px;
    float: left;
}

Pour définir toutes les couleurs que prendront nos cases, on utilise une variable de type array qui contiendra les codes hexa des couleurs.

var colors = ['#2219B2','#343085',[...],'#FFD240','#FFDE73'];

Maintenant que nous avons défini la grille ainsi que les couleurs, il nous faut maintenant attribuer ces couleurs aux différentes cases. Nous allons procéder de la manière suivante: pour chaque case du tableau, on injecte une couleur de fond, choisie aléatoirement dans le tableau, via CSS.

for(i=1;i<17;i++){
    var Color = Math.floor(Math.random()*20);
    $('#'+i).css({'background-color':colors[Color]});
}

Enfin, pour rafraîchir les couleurs automatiquement, il suffit de répéter régulièrement la fonction ci-dessus à l’aide de la fonction setInterval().

var refresh = setInterval(function(){
    for(i=1;i<17;i++){
        var Color = Math.floor(Math.random()*20);
        $('#'+i).css({'background-color':colors[Color]});
    }
},500);

Au final, le code jQuery complet donne:

$(document).ready(function(){
    //On définit un ensemble de couleurs
    var colors = ['#2219B2','#343085','#0E0874','#554DD8','#7872D8','#580EAD','#522881','#370470','#8742D6','#9C6AD6','#0C5AA6','#26527C','#04396C','#408AD2','#679ED2','#FFC300','#BF9E30','#A67F00','#FFD240','#FFDE73'];
            
    //On peuple la div #dancefloor de cases carrées
    $('#dancefloor').html('<div class="tile" id="1"></div><div class="tile" id="2"></div><div class="tile" id="3"></div><div class="tile" id="4"></div><div class="tile" id="5"></div><div class="tile" id="6"></div><div class="tile" id="7"></div><div class="tile" id="8"></div><div class="tile" id="9"></div><div class="tile" id="10"></div><div class="tile" id="11"></div><div class="tile" id="12"></div><div class="tile" id="13"></div><div class="tile" id="14"></div><div class="tile" id="15"></div><div class="tile" id="16"></div>');
            
    //On définit les couleurs au démarrage
    for(i=1;i<17;i++){
        //On choisit aléatoirement une couleur parmis les 20 définies
        var startingColor = Math.floor(Math.random()*20);
        $('#'+i).css({'background-color':colors[startingColor]});
    }

    //On rafraichit toutes les 0.5 secondes
    var refresh = setInterval(function(){
        for(i=1;i<17;i++){
            var Color = Math.floor(Math.random()*20);
            $('#'+i).css({'background-color':colors[Color]});
        }
    },500);
});

Sur ce, je vous dis à bientôt pour de nouvelles aventures !

Laisser un commentaire