Die Beispiele in diesem Artikel teilen mit Ihnen das Spiel "Bist You Color Color Blind" im JS Imitation 3366 Mini -Spiel. Fordern wir es zuerst heraus.
Spielziel: Wählen Sie die Farbe gemäß der Farbe des Textes, der im Bildschirm angezeigt wird. Niemals durch das Farbdilemma gestört werden. Sie müssen Ihre Augen beleuchten. Zu Beginn des Spiels wird es 10 Punkte geben. Jede korrekte Antwort erhält einen Punkt und insgesamt 10 Punkte. Das Spiel endet nach der Zeit.
Betriebsanweisungen: Klicken Sie auf die Maus, um Farbe auszuwählen
1. Reproduktionsbild:
Originalbild:
imitieren:
Code:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <titels> </title> <style type = "text/csS"> .wrap {width: 400px; Höhe: 600px; Grenze: 1PX Solid Black; Rand: 0 Auto; } .head {width: 100%; Höhe: 50px; Überlauf: versteckt; } .time {float: links; Breite: 150px; Höhe: 100%; Zeilenhöhe: 50px; Schriftgröße: 20px; Text-Align: Mitte; } .score {width: 150px; Höhe: 100%; float: rechts; Zeilenhöhe: 50px; Schriftgröße: 20px; /*text-align: center;*/} .middle {width: 100%; Höhe: 450px; } .Text {Breite: 100%; Höhe: 300px; Schriftgröße: 200px; Text-Align: Mitte; Zeilenhöhe: 300px; } .alert {width: 80%; Höhe: 150px; Rand: 0 Auto; textindent: 2em; Schriftgröße: 25px; } .bottom {width: 100%; Höhe: 100px; Überlauf: versteckt; } .bottomtext {width: 20%; Höhe: 100px; float: links; Text-Align: Mitte; Zeilenhöhe: 100px; Schriftgröße: 70px; Cursor: Zeiger; } </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> blau </div> <div> Gelb </div> </div> </body> <script type = "text/javaScript"> // Der sich ändernde Kern erhält eine nicht wiederholende Array außerhalb des Bestellen (MATH.RANDOM () -Funktion im Array) random (min, max) {math.random () * (max-min + 1) + min; } // die nicht wiederholende Array-Funktion randomarr () {var arr = []; while (arr.length <5) {var temp = random (0, 4); if (arr.indexof (temp) == -1) {arr.push (tempus); }} return arr; } Funktion frisch () {// Intermediate Word ändern var textIndex = random (0, 4); colorIndex = random (0, 4); textDiv.innerhtml = textarr [textIndex]; textDiv.Style.color = colorarr [ColorIndex]; // Verlassen Sie den Bestell -Abschluss Array var textrandoms = randomarr (); var colorrandoms = randomarr (); für (var i = 0; i <bottomDivs.length; i ++) {// Text durch außerordentlicher Einweisungen abrufen und Div-bottivs zuweisen [i] .innerhtml = textarr [textrandoms [i]]; bottomdivs [i] .style.color = colorarr [colorrandoms [i]]; // Auslagerungen außerhalb der Bestellungs BottomDivs [i] .Index = textrandoms [i]; }} var textDiv = document.querySelector (". Text"); var bottomdivs = document.querySelectorAll ("bottoText"); var Timediv = document.querySelector (". Zeit"); var ScoreIV = document.querySelector (". Score"); var AlertDiv = document.querySelector (". alert"); var textarr = ["rot", "grün", "blau", "gelb", "schwarz"]; var colorarr = ["rot", "grün", "blau", "gelb", "schwarz"]; var colorIndex = 0; var timer = null; var iSplaying = false; var Countdown = 10; var Score = 0; frisch(); für (var i = 0; i <bottomDivs.length; i ++) {bottomDivs [i] .onclick = function () {// Richter if (colorIndex == this.index && countdown! = 0) {// aktualisieren Score ++; isplaying = true; // Erhöhen Sie die Punktzahl frisch (); ScoreVIV.InnerHtml = "Score:"+Score; alertdiv.style.opacity = 0; } else if (colorIndex! // Zeitänderung aktualisieren timediv.innerhtml = "Zeit:" + Countdown + "S"; // Richter Reinigungs -Timer if (Countdown <= 0) {ClearInterval (Timer); isplaying = false; }}}}} // Timer, hören Sie sich das Spiel für Timer = setInterval (function () {if (isplaying) {Countdown -; Timediv.innnerHtml = "Zeit:" + Countdown + "S"; if (Countdown <= 0) {Clearinterval (Timer). }, 1000); </script> </html>Das obige dreht sich alles um diesen Artikel. Ich hoffe, jeder kann es erfolgreich herausfordern.