The examples in this article share with you the "Are you color blind" game in the js imitation 3366 mini game. Let's challenge it first.
Game objective: Choose the color according to the color of the text that appears in the screen. Never be disturbed by the color dilemma. You must light up your eyes. There will be 10 points at the beginning of the game. Each correct answer will get one point, and there will be 10 points in total. The game will end after the time is used up.
Operation Instructions: Click on the mouse to select color
1. Reproduction picture:
Original image:
imitate:
Code:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap { width: 400px; height: 600px; border: 1px solid black; margin: 0 auto; } .head { width: 100%; height: 50px; overflow: hidden; } .time { float: left; width: 150px; height: 100%; line-height: 50px; font-size: 20px; text-align: center; } .score { width: 150px; height: 100%; float: right; line-height: 50px; font-size: 20px; /*text-align: center;*/ } .middle { width: 100%; height: 450px; } .text { width: 100%; height: 300px; font-size: 200px; text-align: center; line-height: 300px; } .alert { width: 80%; height: 150px; margin: 0 auto; text-indent: 2em; font-size: 25px; } .bottom { width: 100%; height: 100px; overflow: hidden; } .bottomText { width: 20%; height: 100px; float: left; text-align: center; line-height: 100px; font-size: 70px; cursor: pointer; } </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>Blue</div> <div>Yellow</div> </div> </body> <script type="text/javascript"> //The changing core obtains a non-repeating out-of-order array (subscript value in the array) function random(min, max) { return parseInt(Math.random() * (max - min + 1)) + min; } //The non-repeating array function 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 = random(0, 4); textDiv.innerHTML = textArr[textIndex]; textDiv.style.color = colorArr[colorIndex]; //Get out of order subscript array var textRandoms = randomArr(); var colorRandoms = randomArr(); for (var i = 0; i < bottomDivs.length; i++) { //Get text through out-of-order subscripts and assign value to div bottomDivs[i].innerHTML = textArr[textRandoms[i]]; bottomDivs[i].style.color = colorArr[colorRandoms[i]]; //Save out-of-order subscripts bottomDivs[i].index = textRandoms[i]; } } var textDiv = document.querySelector(".text"); var bottomDivs = document.querySelectorAll(".bottomText"); var timeDiv = document.querySelector(".time"); var scoreDiv = document.querySelector(".score"); var alertDiv = document.querySelector(".alert"); var textArr = ["red", "green", "blue", "yellow", "black"]; var colorArr = ["red", "green", "blue", "yellow", "black"]; var colorIndex=0; var timer = null; var isplaying = false; var countDown = 10; var score = 0; fresh(); for (var i = 0; i < bottomDivs.length; i++) { bottomDivs[i].onclick = function(){ //Judge if(colorIndex == this.index &&countDown!=0 ){ //Refresh score ++; isplaying =true; //Increase score fresh(); scoreDiv.innerHTML = "Score: "+score ; alertDiv.style.opacity = 0; }else if(colorIndex != this.index &&isplaying){ //Decrease countDown --; //Update time change timeDiv.innerHTML = "Time: " + countDown +"s"; //Judge cleaning timer if(countDown <= 0){ clearInterval(timer); isplaying = false; } } } } } //Timer, listen to the game for timer = setInterval(function(){ if(isplaying){ countDown --; timeDiv.innerHTML = "Time: " + countDown +"s"; if(countDown <= 0){ clearInterval(timer); isplaying = false; alert("game over!!"); } //Stop the game}else{ } },1000); </script> </html>The above is all about this article. I hope everyone can challenge it successfully.