本文实例为大家分享了js仿3366小游戏中“你是色盲吗”游戏，大家先来挑战一下
游戏目标: 按画面中出现的文字的颜色来选择颜色，千万不要被颜色的困局打扰，眼睛一定要放亮哦，游戏开始时会有10分，每答对一题得一分，总共有10分，时间用完游戏会结束。
操作说明: 鼠标点击选择颜色
1、效果图：
原图：
模仿：
代码：
<!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 class="wrap"> <div class="head"> <div class="time">时间:10s</div> <div class="score">分数 :0</div> </div> <div class="middle"> <div class="text">蓝</div> <div class="alert">根据上面的字的颜色从下面选择正确的字,选择正确自动开始</div> </div> <div class="bottom"> <div class="bottomText">红</div> <div class="bottomText">绿</div> <div class="bottomText">黑</div> <div class="bottomText">蓝</div> <div class="bottomText">黄</div> </div> </div> </body> <script type="text/javascript"> //变化的核心 获得不重复的乱序数组(数组中下标值) function random(min, max) { return parseInt(Math.random() * (max - min + 1)) + min; } //不重复的数组 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() { //中间字 变化 var textIndex = random(0, 4); colorIndex = random(0, 4); textDiv.innerHTML = textArr[textIndex]; textDiv.style.color = colorArr[colorIndex]; //获取乱序下标数组 var textRandoms = randomArr(); var colorRandoms = randomArr(); for (var i = 0; i < bottomDivs.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(".text"); var bottomDivs = document.querySelectorAll(".bottomText"); var timeDiv = document.querySelector(".time"); var scoreDiv = document.querySelector(".score"); var alertDiv = document.querySelector(".alert"); var textArr = ["红", "绿", "蓝", "黄", "黑"]; 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(){ //判断 if(colorIndex == this.index &&countDown!=0 ){ //刷新 score ++; isplaying =true; //分数增加 fresh(); scoreDiv.innerHTML = "分数: "+score ; alertDiv.style.opacity = 0; }else if(colorIndex != this.index &&isplaying){ //点错时间减小 countDown --; //更新时间变化 timeDiv.innerHTML = "时间: " + countDown +"s"; //判断清理定时器 if(countDown <= 0){ clearInterval(timer); isplaying = false; } } } } //定时器,监听游戏进行 timer = setInterval(function(){ if(isplaying){ countDown --; timeDiv.innerHTML = "时间: " + countDown +"s"; if(countDown <= 0){ clearInterval(timer); isplaying =false; alert("game over!!"); } //停止游戏 }else{ } },1000); </script> </html>以上就是本文的全部内容，希望大家能够挑战成功。
新闻热点
疑难解答
