Los ejemplos en este artículo comparten con usted el juego "Are You Color Blind" en el mini juego JS IMitation 3366. Vamos a desafiarlo primero.
Objetivo del juego: elija el color de acuerdo con el color del texto que aparece en la pantalla. Nunca te molestes por el dilema del color. Debes iluminar tus ojos. Habrá 10 puntos al comienzo del juego. Cada respuesta correcta obtendrá un punto, y habrá 10 puntos en total. El juego finalizará después de que se use el tiempo.
Instrucciones de operación: haga clic en el mouse para seleccionar el color
1. Imagen de reproducción:
Imagen original:
imitar:
Código:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> </title> <style type = "text/css"> .wrap {width: 400px; Altura: 600px; borde: 1px negro sólido; margen: 0 auto; } .head {ancho: 100%; Altura: 50px; desbordamiento: oculto; } .Time {float: izquierda; Ancho: 150px; Altura: 100%; Línea de altura: 50px; tamaño de fuente: 20px; Text-Align: Center; } .spore {ancho: 150px; Altura: 100%; flotante: correcto; Línea de altura: 50px; tamaño de fuente: 20px; /*text-align: centro;*/} .middle {ancho: 100%; Altura: 450px; } .Text {ancho: 100%; Altura: 300px; tamaño de fuente: 200px; Text-Align: Center; Línea de altura: 300px; } .alert {ancho: 80%; Altura: 150px; margen: 0 auto; INDENT DE TEXTO: 2EM; tamaño de fuente: 25px; } .bottom {ancho: 100%; Altura: 100px; desbordamiento: oculto; } .bottomText {ancho: 20%; Altura: 100px; flotante: izquierda; Text-Align: Center; Línea de altura: 100px; tamaño de fuente: 70px; cursor: puntero; } </style> </head> <body> <div> <div> <div> <div> tiempo: 10s </iv> <div> stork: 0 </div> </div> <div> <div> azul </div> <div> seleccione la palabra correcta desde el fondo de acuerdo con el color de la palabra anterior y comience automáticamente </div> </div> <div> rojo </div> <iv> green </div> Div> <1/div> <Div> Blue </div> <div> Yellow </div> </div> </body> <script type = "text/javaScript"> // El núcleo cambiante obtiene una matriz fuera de pedido no repetida (valor de subíndice en la matriz) Random (min, max) {return parseint (random () () (max-min + 1) + min; } // La función de matriz sin repetición RandomArR () {var arr = []; while (arr.length <5) {var temp = Random (0, 4); if (arr.indexof (temp) == -1) {arr.push (temp); }} return arr; } function Fresh () {// Intermediate Word Change var TextIndex = Random (0, 4); colorindex = aleatorio (0, 4); textDiv.innerhtml = textarr [textIndex]; textDiv.style.color = colorarr [colorindex]; // Salir de orden Array de subíndice var textrandoms = randomarr (); var colorrandoms = randomarr (); for (var i = 0; i <bottomDivs.length; i ++) {// Obtener texto a través de subíndices fuera de orden y asignar valor a Div BottomDivs [i] .innerhtml = Textarr [textrandoms [i]]; BottomDivs [i] .style.color = colorarr [Colorrandoms [i]]; // Guardar subíndices fuera de orden BottomDivs [i] .index = textrandoms [i]; }} var textDiv = document.querySelector (". Text"); var BottomDivs = document.QueryselectorAll (". BottomText"); var timediv = document.QuerySelector (". Tiempo"); var storeDiv = document.QuerySelector (". Score"); var alertDiv = document.QuerySelector (". Alert"); var textarr = ["rojo", "verde", "azul", "amarillo", "negro"]; var colorarr = ["rojo", "verde", "azul", "amarillo", "negro"]; var colorindex = 0; VAR TIMER = NULL; var isplaying = false; Var Countdown = 10; puntaje var = 0; fresco(); for (var i = 0; i <bottomDivs.length; i ++) {BottomDivs [i] .Onclick = function () {// juzgar if (colorIndex == this.index && Countdown! = 0) {// actualizar puntaje ++; isplaying = true; // aumentar la puntuación fresca (); stORDIV.InnerHTML = "SCUENTA:"+SCUENTO; alertdiv.style.opacity = 0; } else if (colorIndex! = this.index && isplaying) {// disminuir el recuento -; // Actualizar el cambio de tiempo timediv.innerhtml = "Time:" + Countdown + "S"; // juzga el temporizador de limpieza if (Countdown <= 0) {ClearInterval (temporizador); isplaying = false; }}}}} // temporizador, escuche el juego para timer = setInterval (function () {if (isPlaying) {Countdown -; Timediv.innerHtml = "Time:" + Countdown + "S"; if (Countdown <= 0) {ClearInterval (Timer); IsPlaying = FALSE; FALSE; ALERTA! }, 1000); </script> </html>Lo anterior se trata de este artículo. Espero que todos puedan desafiarlo con éxito.