Petite animation Mario Kart en JS

développement - mars 2018

Pour égayer un classement ou pour voir un peu plus loin.

HTML

<a class="perso" title="10"><img src="prono/22.gif" /><span><b>1<sup>er</sup></b> pseudo<br /><b>10 points</b></span></a>
<a class="perso" title="20"><img src="prono/10.gif" /><span><b>2<sup>ème</sup></b> pseudo<br /><b>20 points</b></span></a>
<a class="perso" title="30"><img src="prono/9.gif" /><span><b>3<sup>ème</sup></b> pseudo<br /><b>30 points</b></span></a>
<a class="perso" title="40"><img src="prono/7.gif" /><span><b>4<sup>ème</sup></b> pseudo<br /><b>40 points</b></span></a>
<a class="perso" title="50"><img src="prono/6.gif" /><span><b>5<sup>ème</sup></b> pseudo<br /><b>50 points</b></span></a>
<a class="perso" title="60"><img src="prono/5.gif" /><span><b>6<sup>ème</sup></b> pseudo<br /><b>60 points</b></span></a>
<a class="perso" title="70"><img src="prono/4.gif" /><span><b>7<sup>ème</sup></b> pseudo<br /><b>70 points</b></span></a>
<a class="perso" title="80"><img src="prono/3.gif" /><span><b>8<sup>ème</sup></b> pseudo<br /><b>80 points</b></span></a>
<a class="perso" title="90"><img src="prono/2.gif" /><span><b>9<sup>ème</sup></b> pseudo<br /><b>90 points</b></span></a>
<a class="perso" title="100"><img src="prono/1.gif" /><span><b>10<sup>ème</sup></b> pseudo<br /><b>10 points</b></span></a>
<div id="route"></div>

CSS

#route {
background-image: url('prono/0a.gif');
background-size: contain;
}
.perso {
position: absolute;
}
.perso>img {
width: 100%;
}
.perso:hover span, .perso:focus span{
transform: scale(1) rotate(0);
opacity: 1;
}
.perso span {
position: absolute;
color: rgb(255,255,255);
background: rgba(0,0,0,.8);
padding: 10px;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0,0,0,.5);
transform: scale(0) rotate(-12deg);
transition: all .25s;
opacity: 0;
z-index: 101;
}

JS

var taille, pixels, posX, posY, liste, i;
var obj = document.getElementById("route");
var perso = document.getElementsByClassName('perso');
inforesize();
window.onresize = inforesize;
setInterval(frame, 33); // 33 ms = ~ 30 frames / seconde

function init_ () { // positionne
liste = new Array ();
for (i = 0; i < perso.length; i++) {
var v = pixels / 100 * perso[i].getAttribute('title');
perso[i].style.left = (posX + v)+'px';
perso[i].style.top = (posY)+'px';
liste[i] = new Array (
(posX + v),
posY,
(posX + v),
posY
);
}
}

function inforesize () { // redimensionne
taille = obj.clientWidth;
pixels = Math.round(taille * 0.75);
posX = obj.offsetLeft;
obj.style.height = obj.style.marginTop = taille * 0.05;
for (i = 0; i < perso.length; i++) {
perso[i].style.width = taille * 0.05;
perso[i].getElementsByTagName('span')[0].style.marginTop = taille * 0.05 * 1.5;
perso[i].getElementsByTagName('span')[0].style.marginLeft = -taille * 0.05 * 1.5;
}
posY = obj.offsetTop - (taille * (0.05 / 4));
init_();
}

function posrand (ob1, ob2, ecart) { // déplacement random (actuelle, origine, ecart)
var t = Math.round(Math.random() * (ob1+3 - ob1-1) + ob1-1);
if (t > ob2 + ecart)
t--;
else if (t < ob2 - ecart)
t++;
return t;
}

function frame () {
for (i = 0; i < perso.length; i++) {liste[i][2] = posrand(liste[i][2], liste[i][0], 20); //x
perso[i].style.left = liste[i][2]+'px';
liste[i][3] = posrand(liste[i][3], liste[i][1], 5); //y
perso[i].style.top = liste[i][3]+'px';
perso[i].style.zIndex = liste[i][3];
}
}