Tuto : Un damier de couleurs aléatoires

damier

Je reviens avec un petit tuto simple à réaliser pour faire un damier de couleurs aléatoires. Un truc totalement inutile et qui fait mal aux yeux.

Alors pourquoi me direz vous réaliser une chose qui n’a pas vraiment d’utilité et qui fait mal aux yeux ?

Réponse : parce qu’on peut le faire alors pourquoi s’en priver ?

Pour réaliser ce tuto vous n’aurez besoin d’aucune image, juste du code et uniquement du code. Le tout est une combinaison de PHP, HTML, CSS et Javascript.

Commençons par poser les bases avec le HTML(+PHP)/CSS :

Créer une page .php pour accueillir votre code et copiez/collez le code suivant entre vos balises <body></body> :

<div id= »container »>
<?php
for ($i=0;$i<=2399;$i++) {
echo'<div class= »damier » id= »‘.$i.' »></div>';
}
?>
</div><!–end container–>

C’est tout ?

Oui ! C’est tout ce dont vous aurez besoin, le script en PHP créera pour vous le HTML dont vous aurez besoin. Il va écrire 2400 ligne de code HTML avec à chaque fois une div portant la class « damier » et une id différente numérotée de 0 à 2399. Cela va nous servir à attribuer une couleur différente aléatoirement par la suite.

Dans votre page .css, copiez/collez le code suivant :

* { margin:0; padding:0; }
body { background:#000; }
#container { width:600px; height:400px; margin:300px auto; }
.damier { width:10px; height:10px; float:left; }

Encore une fois, pas beaucoup de code, juste l’essentiel qui positionne nos div au centre de la page pour l’id « container » et qui va coller en float nos petites divs les une aux autres à l’intérieur de la grande div.

Pour la page .js, voici le code à copier/coller :

window.onload = animeDamier;
function animeDamier() {
for (var i=0;i<=2399;i++) {
var bgDamier = document.getElementById(i);
var r = Math.floor((Math.random()*255)+1);
var g = Math.floor((Math.random()*255)+1);
var b = Math.floor((Math.random()*255)+1);
bgDamier.style.backgroundColor = « rgb(« +r+ », »+g+ », »+b+ ») »;
}
}
var timer=setInterval(« animeDamier() », 100);

Edit: Pour faire communique la page .js et la page .php, mettre ce code entre les balise <head></head> de votre page .php :

<script type= »text/javascript » src= »Damier.js »></script>

Rien de très compliqué non plus encore une fois, on appelle une fonction au chargement de la page, on décrit cette fonction qui va pour chaque div avec les id numérotées de 0 à 2399 attribuer aléatoirement un backgroundColor en donnant une valeur comprise entre 0 et 255 au rouge, au vert et au bleu. Puis pour finir, on va déterminer un « timer » qui va réinitialiser la fonction tous les 10ème de seconde pour créer un magnifique effet de carrés multicolors qui clignotent en changeant de couleur.

Le résultat en live ici.

Je vous l’avez promis en début de post, mal aux yeux garanti si vous fixer trop longtemps le damier.

Alors, ne vous arretez pas là, imaginer les possibiltés que vous avez en adaptant cette fonction à vos propres projets : vous avez la possibilités de créer des fond aléatoires en couleurs entièrement en code, sans image…

Libre à vous d’utiliser ce code pour d’autres créations ;-)

 

8 réflexions au sujet de « Tuto : Un damier de couleurs aléatoires »

    • Bonjour Benjamin,
      Edit : J’ai éditer l’article pour répondre à ta question.
      Merci de m’avoir fait partager ton expérience sur ce tuto et d’avoir permis de l’améliorer.
      Au plaisir de te retrouver sur mon blog :)

  1. Meilleurs voeux. J’aimerai vous proposer des idées de jeux…mon niveau de porgrammation ne me permet pas de les réaliser moi-même..Seriez vous intéressé par ces idées ?? merci de me contacter

    • Olender, merci pour vos voeux, je vous souhaite également le meilleur pour 2015, je vous répondrai sur votre email même si je suis plutôt web designer que programmateur de jeux.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>