この記事の例は、JS Imitation 3366ミニゲームで「あなたの色盲人」ゲームを共有しています。最初に挑戦しましょう。
ゲームの目的：画面に表示されるテキストの色に応じて色を選択します。色のジレンマに邪魔されることはありません。あなたはあなたの目を明るくしなければなりません。ゲームの開始時には10ポイントがあります。それぞれの正解は1つのポイントを獲得し、合計で10ポイントがあります。ゲームは、時間が使い果たされた後に終了します。
操作手順：マウスをクリックして色を選択します
1。複製画像：
オリジナル画像：
模倣：
コード：
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style type = "text/css"> .wrap {width：400px;高さ：600px;ボーダー：1pxソリッドブラック。マージン：0 Auto; } .head {width：100％;高さ：50px;オーバーフロー：隠し; } .time {float：left;幅：150px;高さ：100％;ラインハイト：50px;フォントサイズ：20px;テキストアライグ：センター; } .Score {width：150px;高さ：100％;フロート：そうです;ラインハイト：50px;フォントサイズ：20px; /*TEXT-ALIGN：center;*/} .Middle {width：100％;高さ：450px; } .text {width：100％;高さ：300px;フォントサイズ：200px;テキストアライグ：センター;ラインハイト：300px; } .Alert {width：80％;高さ：150px;マージン：0 Auto;テキストインデント：2em;フォントサイズ：25px; } .bottom {width：100％;高さ：100px;オーバーフロー：隠し; } .bottomText {width：20％;高さ：100px;フロート：左;テキストアライグ：センター;ラインハイト：100px;フォントサイズ：70px;カーソル：ポインター; } </style> </head> <body> <div> <div> <div> <div>時間：10s </div> <div>スコア：0 </div> </div> <div> <div> <div> div> div> div>上記の単語の色に応じて正しい単語を選択し、自動的に開始し、自動的に開始</div> div> </div> </div> <div> blue </div> <div> yellow </div> </div> </body> <script = "text/javascript"> //変化するコアは、非回復外のアレイアレイ（アレイのサブスクリプト値）を取得します。 } //非回復配列関数randomarr（）{var arr = []; while（arr.length <5）{var temp = random（0、4）; if（arr.indexof（temp）== -1）{arr.push（temp）; }} return arr; } function fresh（）{//中間ワード変更var textindex = random（0、4）; colorIndex = random（0、4）; textdiv.innerhtml = textarr [textindex]; textdiv.style.color = colorarr [colorindex]; //順番に脱出します。 var colorrandoms = randomarr（）; for（var i = 0; i <bottonddivs.length; i ++）{//順序外の添え字でテキストを取得し、div bottomdivs [i] .innerhtml = textarr [textrandoms [i]]に値を割り当てます。 bottomdivs [i] .style.color = colorarr [colorrandoms [i]]; //オーバーアウトオブオーダーサブスクリプトBottomDivs [i] .index = textrandoms [i]; }} var textdiv = document.queryselector（ "。テキスト"）; var bottonddivs = document.queryselectorall（ "。bottomtext"）; var timediv = document.queryselector（ "。time"）; var scorediv = document.queryselector（ "。スコア"）; var alertdiv = document.queryselector（ "。alert"）; var textarr = ["red"、 "緑"、 "青"、 "Yellow"、 "Black"]; var colorarr = ["red"、 "緑"、 "青"、 "Yellow"、 "Black"]; var colorindex = 0; varタイマー= null; var isplaying = false; var Countdown = 10; varスコア= 0;新鮮な（）; for（var i = 0; i <bottonddivs.length; i ++）{bottonddivs [i] .onclick = function（）{//裁判官if（colorindex == this.index && countdown！= 0）{// refhress score ++; isplaying = true; //スコアを増やしますfresh（）; scorediv.innerhtml = "score："+score; alertdiv.style.opacity = 0; } else if（colorIndex！= this.index && isplaying）{//カウントダウンを減少 - ; //時間の変更timediv.innerhtml = "time：" + countdown + "s"; //クリーニングタイマーを裁判官if（countdown <= 0）{clearInterval（タイマー）; isplaying = false; }}}}} //タイマー、タイマー= setinterval（function（）{countdown-; timediv.innerhtml = "time：" + countdown + "s"; if（countdown <= 0）{clearinterval（timer）{clearinterval（timer）; isplaying = fals = false "）; }、1000）; </script> </html>上記はこの記事に関するすべてです。誰もがうまく挑戦できることを願っています。