3366小游戏首页HTML5小游戏,js仿3366小游戏选字游戏

本文实例为大家分享了js仿3366小游戏中“你是色盲吗”游戏，大家先来挑战一下

游戏目标:按画面中出现的文字的颜色来选择颜色，千万不要被颜色的困局打扰，眼睛一定要放亮哦，游戏开始时会有10分，每答对一题得一分，总共有10分，时间用完游戏会结束。

操作说明:鼠标点击选择颜色

1、效果图：

原图：

模仿：

代码：

.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;

}

时间:10s

分数 :0

蓝

根据上面的字的颜色从下面选择正确的字,选择正确自动开始

红

绿

黑

蓝

黄

//变化的核心 获得不重复的乱序数组(数组中下标值)

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);

以上就是本文的全部内容，希望大家能够挑战成功。