0% ont trouvé ce document utile (0 vote)
73 vues18 pages

Jeu de couleurs en JavaScript

Le document décrit plusieurs variantes d'un jeu en JavaScript qui affiche des noms de couleurs de manière aléatoire. Le but est de lire les couleurs affichées ou de nommer les couleurs dont le nom est en majuscules. Le code contient des listes de couleurs et affiche des résumés des couleurs lues.
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
0% ont trouvé ce document utile (0 vote)
73 vues18 pages

Jeu de couleurs en JavaScript

Le document décrit plusieurs variantes d'un jeu en JavaScript qui affiche des noms de couleurs de manière aléatoire. Le but est de lire les couleurs affichées ou de nommer les couleurs dont le nom est en majuscules. Le code contient des listes de couleurs et affiche des résumés des couleurs lues.
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

J AVA S C R I P T (Programmation Internet)

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga


+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
diasfb@[Link]

Voici un petit jeu vous demandant de lire ou de donner le nom d’une cou-
leur mal identifiée :

<style>
<!--
span {
font-family:tahoma;font-size:23;font-weight:900;
border:solid 2;padding:1 5;line-height:1.5
}
//-->
</style>

<script type="text/javascript"> "use strict";


<!--
var cptr=0,listelm=[];
const colors=[
"black","navy","crimson","red","green",
"blue","cyan","yellow","orange","brown",
"magenta","violet","purple","indigo"
];
const ncolors=[Link];
[Link](
`<fieldset style=`+
`'border: solid 2;background:#A6AFA0'>`+
`<div>(I). LISEZ les noms des couleurs `+
`affichées.</div>`);

for(let k=0,n=ncolors*5;k<n;k++) {
let c=[Link]([Link]()*ncolors);
listelm[cptr++]=colors[c];
[Link](
`<span style='color:${colors[c]}'>`+
`${colors[c]} </span>`
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
);
}

[Link](
`<hr>(II). <fieldset style='background:#9F9690'>`
);

for(let k=0;k<ncolors;k++) {
let c=[Link]([Link]()*ncolors);
let n=[Link]([Link]()*ncolors);
[Link](
`<span style='color:${colors[c]}'>`+
`${colors[n].toUpperCase()} </span>`
);
}
[Link](
`</fieldset><div>(1). Indiquez les <u>NOMS</u> `+
`DE COULEUR qui manquent dans cette section `+
`vs celle d'au-dessus.<br>`+
`(2). Indiquez aussi les <u>COULEURS</u> qui `+
`manquent dans cette section vs la section `+
`d'en haut.</div></fieldset>`);

(function(){
var indivelm=[],nindivelm=0;
const listlength=[Link];
let exist;
for(let l=0;l<listlength;l++){
exist=0;
for(let i=0,il=[Link];i<il;i++){
if(indivelm[i]===listelm[l]) {
exist=1;break;
}
}
if(!exist)indivelm[nindivelm++]=listelm[l];
}
[Link](
"(III). Les ${ncolors} Couleurs de départ : <br>");

for(let k=0;k<ncolors;k++)
[Link](
`<span style=`+
`'color:${colors[k]}'>${colors[k]} </span>`
);

Palettes couleurs Hexa - 2 / 18 - mardi, 22. janvier 2019 (7:39 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
[Link](`<hr>(IV). Les ${nindivelm} Couleurs `+
`individuelles de la liste (I) d'en haut : <br>`
);

for(let k=0;k<nindivelm;k++)
[Link](
`<span style='color:${indivelm[k]}'>`+
`${indivelm[k]} </span>`
);

if(ncolors!==nindivelm)
[Link](
`<br>(3). Retrouvez la/les couleur(s) qui `+
`manque(nt) dans (IV) vs (III).`);
})(listelm);
//-->
</script>

Palettes couleurs Hexa - 3 / 18 - mardi, 22. janvier 2019 (7:39 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Une autre version de ce programme :

<style>
<!--
span {
font-weight:900;border:solid 2;padding:5;
font-size:25;line-height:1.5
}
//-->
</style>

<script type="text/javascript"> "use strict";


<!--
var lc=[],
colors=[
"black","navy","crimson","red","green",
"blue","cyan","yellow","orange","brown",
"magenta","violet","purple","indigo"
],
cl=[Link];
[Link](
`<fieldset style='border:solid 2;`+
`background:#969F90'>`+
`<div>LISEZ <u>les noms</u> des `+
`couleurs affichées.</div>`
);
let cptr=0;
for(let k=0,n=cl*5;k<n;k++) {
let c=[Link]([Link]()*cl);
lc[cptr++]=colors[c];
[Link](

Palettes couleurs Hexa - 4 / 18 - mardi, 22. janvier 2019 (7:39 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
`<span style='color:${colors[c]}'>`+
colors[c]+
` </span>`);
}
[Link]("<hr>");
for(let k=0;k<cl;k++) {
let c=[Link]([Link]()*cl);
let n=[Link]([Link]()*cl);
[Link](
`<span style='color:${colors[c]}'>`+
`${colors[n].toUpperCase()} </span>`
);
}
[Link](
`<div>Indiquez aussi les couleurs qui manquent `+
`dans cette section vs la section d'en haut.`+
`</div></fieldset>`
);

(function(){
let dc=[],cc=0;
dc[0]=lc[0];
const cl2=[Link];
let exist;
for(let a=0;a<cl2;a++){
exist=0;
for(let p=0;p<[Link];p++){
if(dc[p]===lc[a]) {
exist=1;break;
}
}
if(!exist) dc[++cc]=lc[a];
}
[Link](
`Les ${cl} Couleurs de départ : <br>`
);
for(let k=0;k<cl;k++)
[Link](
`<span style='color:${colors[k]}'>`+
`${colors[k]} </span>`
);

[Link](
`<hr>Les ${++cc}` +
` Couleurs individuelles de la liste `+
Palettes couleurs Hexa - 5 / 18 - mardi, 22. janvier 2019 (7:39 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
`d'en haut : <br>`
);
for(let k=0;k<cc;k++)
[Link](
`<span style='color:${dc[k]}'>`+
`${dc[k]} </span>`
);
})();
//-->
</script>

Palettes couleurs Hexa - 6 / 18 - mardi, 22. janvier 2019 (7:39 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Une autre variante de ce programme:

<style>
<!--
span {
font-family:tahoma;font-size:21;font-weight:900;
border:solid 2;padding:1 5;line-height:1.5
}
//-->
</style>

<script type="text/javascript"> "use strict"


<!--
var cptr=0,listelm=new Array();
const colors=[
"black","navy","crimson","red","green",
"blue","cyan","yellow","orange","brown",
"magenta","violet","purple","indigo"
];
const ncolors=[Link];
[Link](
"<fieldset style='border:solid
2;background:#A6AFA0'>"+
"<u>LISEZ</u> les noms des couleurs affichées."+
"<div>(I).</div>"
);
for(let k=0,n=ncolors*5;k<n;k++) {
const c=[Link]([Link]()*ncolors)
listelm[cptr++]=colors[c]
[Link](
"<span style='color:"+colors[c]+"'>"+colors[c]+
" </span>")
Palettes couleurs Hexa - 7 / 18 - mardi, 22. janvier 2019 (7:39 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
}
[Link](
"<hr>(II). Donnez LE NOM de la couleur :"+
"<fieldset style='background:#9F9690'>"
)

for(let k=0;k<ncolors;k++) {
const c=[Link]([Link]()*ncolors)
const n=[Link]([Link]()*ncolors)
[Link](
"<span style='color:"+colors[c]+"'>"+
colors[n].toUpperCase()+" </span>")
}

[Link](
"</fieldset><div>(1). Indiquez les noms de couleur "+
"qui manquent dans cette section vs celle "+
"d'au-dessus.<br>(2). Indiquez aussi les couleurs "+
"qui manquent dans cette section vs la section d'en "+
"haut.</div></fieldset>"
);

(function(){
var indivelm=new Array(),nindivelm=0;
const listlength=[Link];
for(let l=0;l<listlength;l++){
if(exist(listelm[l],indivelm)==-1)
indivelm[nindivelm++]=listelm[l];
}
[Link](
"<hr>(III). Les "+ncolors+" Couleurs de départ :"+
"<br>");
for(let k=0;k<ncolors;k++)
[Link](
"<span style='color:"+colors[k]+"'>"+
colors[k]+" </span>"
);
[Link](
"<hr>(IV). Les "+ nindivelm +
" Couleurs individuelles de la liste (I) "+
"d'en haut :<br>");
for(let k=0;k<nindivelm;k++)
[Link](
"<span style='color:"+indivelm[k]+"'>"+
indivelm[k]+" </span>"
Palettes couleurs Hexa - 8 / 18 - mardi, 22. janvier 2019 (7:39 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
);
if(ncolors!=nindivelm)
[Link](
"<br>(3). Retrouvez la/les couleur(s) "+
"qui manque(nt) dans (IV) vs (III).");
})(listelm);

function exist(el,list){
var exist=0,p;
for(let p=0,ll=[Link];p<ll;p++){
if(el==list[p]) {
exist=1;break;
}
}
if(exist)return p;
else return -1;
}
//-->
</script>

Palettes couleurs Hexa - 9 / 18 - mardi, 22. janvier 2019 (7:39 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Une variante de ce jeu [d’esprit] :

<style>
<!--
span {
font-family:tahoma;font-size:21;font-weight:900;
border:solid 2;padding:1 5;line-height:1.5
}
//-->
</style>

<script type="text/javascript"> "use strict"


<!--
var cptr=0,listelm=new Array();
const colors=[
"black","navy","crimson","red","green",
"blue","cyan","yellow","orange","brown",
"magenta","violet","purple","indigo"
];
const ncolors=[Link];
[Link](
`<fieldset style=`+
`'border:solid 2;background:#A6AFA0'>`+
Palettes couleurs Hexa - 10 / 18 - mardi, 22. janvier 2019 (7:39 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
`<u>LISEZ</u> les noms des couleurs affichées.`+
`<div>(I).</div>`
);
for(let k=0,n=ncolors*5;k<n;k++) {
const c=[Link]([Link]()*ncolors)
listelm[cptr++]=colors[c]
[Link](
`<span style='color:${colors[c]}'>`+
`${colors[c].toUpperCase()} </span>`)
}
[Link](
"<hr>(II). <fieldset style='background:#9F9690'>"
)

for(let k=0;k<ncolors;k++) {
const c=[Link]([Link]()*ncolors)
const n=[Link]([Link]()*ncolors)
[Link](
"<span style='color:"+colors[c]+"'>"+
colors[n]+" </span>")
}

[Link](
"</fieldset><div>(1). Indiquez les noms de couleur "+
"qui manquent dans cette section vs celle "+
"d'au-dessus.<br>(2). Indiquez aussi les couleurs "+
"qui manquent dans cette section vs la section d'en "+
"haut.</div></fieldset>"
);

(function(){
var indivelm=new Array(),nindivelm=0;
const listlength=[Link];
for(let l=0;l<listlength;l++){
if(exist(listelm[l],indivelm)==-1)
indivelm[nindivelm++]=listelm[l];
}
[Link](
"<hr>(III). Les "+ncolors+" Couleurs de départ :"+
"<br>");
for(let k=0;k<ncolors;k++)
[Link](
"<span style='color:"+colors[k]+"'>"+
colors[k]+" </span>"
);
Palettes couleurs Hexa - 11 / 18 - mardi, 22. janvier 2019 (7:39 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
[Link](
"<hr>(IV). Les "+ nindivelm +
" Couleurs individuelles de la liste (I) "+
"d'en haut :<br>");
for(let k=0;k<nindivelm;k++)
[Link](
"<span style='color:"+indivelm[k]+"'>"+
indivelm[k]+" </span>"
);
if(ncolors!=nindivelm)
[Link](
"<br>(3). Retrouvez la/les couleur(s) "+
"qui manque(nt) dans (IV) vs (III).");
})(listelm);

function exist(el,list){
var exist=0,p;
for(let p=0,ll=[Link];p<ll;p++){
if(el==list[p]) {
exist=1;break;
}
}
if(exist)return p;
else return -1;
}
//-->
</script>

Palettes couleurs Hexa - 12 / 18 - mardi, 22. janvier 2019 (7:39 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Enfin :

<style>
<!--
span {font-weight:900;border:solid 2;padding:5;font-
size:33;line-height:1.5}
//-->
</style>

<script type="text/javascript"> "use strict";


<!--

Palettes couleurs Hexa - 13 / 18 - mardi, 22. janvier 2019 (7:39 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
const colors=[
"black","crimson","red","green","blue",
"yellow","brown","cyan","magenta",
"violet","purple","navy","indigo","orange"
];
const cl=[Link];

[Link](
`<div>LISEZ les couleurs affichées.</div>`
)
for(let k=0;k<cl;k++) {
[Link](`<span style='color:${colors[k]}'>`
+`${colors[k]} </span>`
)
}

[Link]("<br><br><hr><br>");

let s=
[Link]([Link]()*1)%2
? "DONNEZ"
: "LISEZ";
s+=" le <u>NOM</u> de la couleur :<br>";

[Link](`${s}`);
for(let k=0;k<cl;k++) {
let c=[Link]([Link]()*cl),
n=[Link]([Link]()*cl);

[Link](
`<span style='color:${colors[c]}'>`+
`${colors[n].toUpperCase()} </span>`);
}

[Link](
`<div><hr>Indiquez aussi les couleurs qui `+
`manquent dans cette section vs la section `+
`d'en haut.</div>`);
//-->
</script>

Palettes couleurs Hexa - 14 / 18 - mardi, 22. janvier 2019 (7:39 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II

Kinshasa, le mardi 22 janvier 2019 - [Link] AM

Palettes couleurs Hexa - 15 / 18 - mardi, 22. janvier 2019 (7:39 )


J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
Mots-clés :

Jeu de couleurs, couleurs HTML aléatoires, échantillon. Balises, div,


styles, font-family, width, height, attribut, getElementById, array, digits
hexadécimaux, accès indexé, éléments, chaîne de caractères, notation
hexadécimale, nombres, méthodes, substring, substr, objet, String,
innerHTML, padEnd, fonction eval

DIASOLUKA Nz. Luyalu


Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Études humanités : Scientifique - Mathématiques & Physique.
Informaticien-amateur, Programmeur et WebMaster.

Chercheur indépendant, autonome et autofinancé, bénévole, sans


aucun conflit d’intérêt ou liens d'intérêts ou contrainte
promotionnelle avec qui qu’il soit ou quelqu’organisme ou
institution / organisation que ce soit, étatique, paraétatique ou privé,
industriel ou commercial en relation avec le sujet présenté.

+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818

diasfb@[Link]

Autre Lecture :
[Link]
Creation
Palettes couleurs Hexa - 16 / 18 - mardi, 22. janvier 2019 (7:39 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
D’autres publications pouvant aussi intéresser :

• [Link]
Medicaments-en-Cac-Cas
• [Link]
Thermometres-Non-contact-a-Infrarouge
• [Link]
Aux-Fonctions-JavaScript
• [Link]
Pour-Quoi-Faire
• [Link]
angulaire
• [Link]
• [Link]
en-JS
• [Link]
Objets-JavaScript
• [Link]
• [Link]
de-La-Creation
• [Link]
IMC-indice-de-doduite-Selon-Dr-Diasoluka
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
Reflexes-Pupillomoteurs
• [Link]
Anthropometriques
• [Link]
• [Link]
du-Traitement-de-La-Malaria
• [Link]
Oxymetrie-Et-Type-Respiration
Palettes couleurs Hexa - 17 / 18 - mardi, 22. janvier 2019 (7:39 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-II
• [Link]
Medicaments
• [Link]
Heresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
• [Link]
Oxymetrie-Et-Type-Respiration

Palettes couleurs Hexa - 18 / 18 - mardi, 22. janvier 2019 (7:39 )

Vous aimerez peut-être aussi