Os exemplos deste artigo compartilham com você o jogo "Are You Curcling" no JS IMITATION 3366 MINI GAME. Vamos desafiá -lo primeiro.
Objetivo do jogo: escolha a cor de acordo com a cor do texto que aparece na tela. Nunca seja perturbado pelo dilema da cor. Você deve iluminar seus olhos. Haverá 10 pontos no início do jogo. Cada resposta correta receberá um ponto e haverá 10 pontos no total. O jogo terminará após o tempo for usado.
Instruções de operação: Clique no mouse para selecionar a cor
1. Imagem de reprodução:
Imagem original:
imitar:
Código:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style type = "text/css"> .wrap {width: 400px; Altura: 600px; borda: 1px preto sólido; margem: 0 automático; } .head {width: 100%; Altura: 50px; estouro: oculto; } .Time {float: esquerda; Largura: 150px; Altura: 100%; altura da linha: 50px; Size da fonte: 20px; Alinhamento de texto: centro; } .Score {Width: 150px; Altura: 100%; Float: Certo; altura da linha: 50px; Size da fonte: 20px; /*text-align: Center;*/} .middle {width: 100%; Altura: 450px; } .text {width: 100%; Altura: 300px; Size de fonte: 200px; Alinhamento de texto: centro; altura de linha: 300px; } .alert {width: 80%; Altura: 150px; margem: 0 automático; Indente de texto: 2em; Size da fonte: 25px; } .bottom {width: 100%; Altura: 100px; estouro: oculto; } .bottomText {width: 20%; Altura: 100px; flutuar: esquerda; Alinhamento de texto: centro; altura da linha: 100px; Size da fonte: 70px; Cursor: Ponteiro; } </style> </ad Head> <body> <div> <div> <div> <div> tempo: 10s </div> <div> pontuação: 0 </div> </div> <div> <div> azul </div> <div> Selecione a palavra correta do fundo de acordo com a cor da palavra acima e inicie automaticamente <div> azul </div> <div> amarelo </div> </div> </body> <script type = "text/javascript"> // O núcleo de mudança obtém uma matriz fora de ordem não repetida (valor do subscrito na função ARRAY) Random (min, max) {return parseint (math.random () * (max)- } // a função da matriz não repetida Randomarr () {var arr = []; while (arr.length <5) {var temp = aleatório (0, 4); if (arr.IndexOF (temp) == -1) {arr.push (temp); }} retornar arr; } função fresh () {// intermediário alteração de palavra var textIndex = aleatória (0, 4); colorindex = aleatório (0, 4); textDiv.innerhtml = textarr [textIndex]; textdiv.style.color = colorarr [colorindex]; // saia da matriz subscrita do pedido var textrandoms = aleatomarr (); var colorrandoms = randomarr (); for (var i = 0; i <bottomdivs.length; i ++) {// Obtenha texto por meio de subscritos fora da ordem e atribua valor ao DIV BottomDivs [i] .innerhtml = textarr [textrandoms [i]]; BottomDivs [i] .style.color = colorarr [colorrandoms [i]]; // salvar subscritos fora da ordem BottomDivs [i] .Index = textrandoms [i]; }} var textDiv = document.QuerySelector (". Texto"); var BottomDivs = document.QuerySelectorAll (". BottomText"); var timediv = document.QuerySelector (". Time"); var scorediv = document.QuerySelector (". Score"); var alertDiv = document.QuerySelector (". Alert"); var textarr = ["vermelho", "verde", "azul", "amarelo", "preto"]; var colorarr = ["vermelho", "verde", "azul", "amarelo", "preto"]; var colorIndex = 0; Var Timer = NULL; var isPlaying = false; var contingDown = 10; var pontuação = 0; fresco(); for (var i = 0; i <bottomdivs.length; i ++) {BottomDivs [i] .OnClick = function () {// JULGE IF (COLORIndex == this.index && contagemdown! = 0) {// Score de refresco ++; isPlaying = true; // aumenta a pontuação fresca (); scorediv.innerhtml = "pontuação:"+pontuação; alertdiv.style.Opacity = 0; } else if (colorindex! = this.index && isPlaying) {// diminui a contagem regressiva -; // Atualizar tempo Alterar tempo timediv.innerhtml = "time:" + contagemdown + "s"; // Juiz Timer de limpeza se (contagem regressiva <= 0) {ClearInterval (Timer); isPlaying = false; }}}}} // Timer, ouça o jogo para timer = setInterval (function () {if (isPlaying) {contagemdown -; timediv.innerhtml = "time:" + countdown + "s"; if (contagemdown <= 0) {clearinterval (timer); isPlaying = "; }, 1000); </script> </html>O acima é tudo sobre este artigo. Espero que todos possam desafiá -lo com sucesso.