Les exemples de cet article partagent avec vous le jeu "Are You Color Blind" dans le mini-jeu JS Imitation 3366. Défions d'abord.
Objectif du jeu: Choisissez la couleur en fonction de la couleur du texte qui apparaît à l'écran. Ne soyez jamais dérangé par le dilemme des couleurs. Vous devez allumer les yeux. Il y aura 10 points au début du match. Chaque bonne réponse obtiendra un point, et il y aura 10 points au total. Le jeu se terminera une fois le temps utilisé.
Instructions de fonctionnement: cliquez sur la souris pour sélectionner la couleur
1. Picture de reproduction:
Image originale:
imiter:
Code:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tapie> </ title> <style type = "text / css"> .wrap {width: 400px; Hauteur: 600px; Border: 1px noir solide; marge: 0 auto; } .head {largeur: 100%; hauteur: 50px; débordement: caché; } .Time {float: Left; Largeur: 150px; hauteur: 100%; hauteur de ligne: 50px; taille de police: 20px; Texte-aligne: Centre; } .score {width: 150px; hauteur: 100%; flottant: à droite; hauteur de ligne: 50px; taille de police: 20px; / * Text-Align: Centre; * /} .Middle {largeur: 100%; hauteur: 450px; } .Text {largeur: 100%; hauteur: 300px; taille de police: 200px; Texte-aligne: Centre; hauteur de ligne: 300px; } .Alert {largeur: 80%; hauteur: 150px; marge: 0 auto; Texte-indent: 2em; taille de police: 25px; } .bottom {largeur: 100%; hauteur: 100px; débordement: caché; } .bottomtext {largeur: 20%; hauteur: 100px; flottant: à gauche; Texte-aligne: Centre; hauteur de ligne: 100px; taille de police: 70px; curseur: pointeur; } </style> </head> <body> <div> <div> <div> <div> Time: 10s</div> <div> Score: 0</div> </div> <div> <div> Blue</div> <div>Select the correct word from the bottom according to the color of the above word, and start automatically</div> </div> <div>Red</div> <div>Green</div> <div>Black</div> <div> bleu </div> <div> jaune </div> </div> </ body> <script type = "text / javascript"> // Le noyau qui change obtient un tableau hors de commande non répat (la valeur de l'indice dans le tableau) aléatoire (min, max) {return parseInt (math.random () * (max - min + 1)) + min; } // La fonction de tableau non répétitif randomarr () {var arr = []; while (arr.length <5) {var temp = random (0, 4); if (arr.indexof (temp) == -1) {arr.push (temp); }} return arr; } fonction fraîche () {// mot intermédiaire change var textIndex = random (0, 4); ColorIndex = aléatoire (0, 4); TextDiv.InnerHtml = TextArr [TextIndex]; TextDiv.Style.Color = ColorArr [ColorIndex]; // Sortez hors de l'ordre le tableau des indices var textrandoms = randomarr (); var colorrandoms = randomarr (); for (var i = 0; i <bottomDivs.length; i ++) {// Obtenez du texte via des indices hors service et attribuez la valeur à div bottomdivs [i] .innerhtml = textarr [textrandoms [i]]; BottomDivs [i] .style.color = colorarr [colorrandoms [i]]; // Enregistrer les indices hors d'ordre en bas de bottomadivs [i] .Index = textrandoms [i]; }} var textDiv = document.QuerySelector (". Text"); var bottomDivs = document.QuerySelectorAll (". Texte du bas"); var timeDiv = document.QuerySelector (". Time"); var scoreV = document.QuerySelector (". Score"); var alertDiv = document.QuerySelector (". alert"); var textarr = ["rouge", "vert", "bleu", "jaune", "noir"]; var colorarr = ["rouge", "vert", "bleu", "jaune", "noir"]; var colorindex = 0; var timer = null; var Isplaying = false; Var Countdown = 10; score var = 0; frais(); for (var i = 0; i <inter-bottdivs.length; i ++) {bottomdivs [i] .onclick = function () {// juge if (colorIndex == this.index && comptdown! = 0) {// Refresh score ++; Isplaying = true; // augmenter le score frais (); scoreV.innerhtml = "Score:" + score; alertdiv.style.opacity = 0; } else if (colorIndex! = this.index && isplaying) {// diminuez le compte à rebours -; // Mettez à jour le changement de temps timeDiv.innerhtml = "Time:" + Countdown + "S"; // Juge Nettoying Timer if (Countdown <= 0) {ClearInterval (Timer); Isplaying = false; }}}}} // Timer, écoutez le jeu pour Timer = setInterval (function () {if (iSplaying) {Countdown -; timediv.innerhtml = "Time:" + Countdown + "S"; if (Countdown <= 0) {ClearInterval (Timer); Isplaying = false; alert ("jeu sur !!");} }, 1000); </cript> </html>Ce qui précède concerne cet article. J'espère que tout le monde pourra le défier avec succès.