选字游戏

var time = document.getElementById('time');

var score = document.getElementById('score');

var show = document.getElementById('show');

var rule = document.getElementById('rule');

var li = document.getElementsByTagName('li');

//默认timeBol为false，当用户点对第一个时游戏开始，timeBol为true

var timeBol = false;

var clickBol = true;

//设置游戏时间为10秒钟

var count = 10;

var num = 0;

var colors = ['red','green','yellow','blue','black'];

var fonts = ['红','绿','黄','蓝','黑'];

var timer = setInterval(function(){

if(timeBol){

count -- ;

time.innerHTML = '剩余时间'+count;

}

if(count == 0){

// 当时间为0时，游戏结束，清除定时器

clearInterval(timer);

//右上角剩余时间设置为0

count = 0;

//当前为不可点击状态

clickBol = false;

}

}, 1000);

//随机数

function randFn(num){

return parseInt(Math.random()*num);

}

//设置show的文字和颜色

function showRand(){

colorIndex = randFn(5);//设置成全局变量方便匹配

var fontsIndex = randFn(5);

show.style.color = colors[colorIndex];

show.innerHTML = fonts[fontsIndex];

}

showRand();

//随机数组去重

function randArr(){

var arr = [];

while(arr.length<5){

var rand = randFn(5);

if(arr.indexOf(rand) == -1){

arr.push(rand);

}

}

// console.log(arr);

return arr;

}

randArr();

//LI文字和颜色的设置

function liRand(){

var colorArr = randArr();

var fontArr = randArr();

console.log(colorArr,fontArr)

//colorArr 黑黄红蓝绿  fontArr 红黑绿蓝黄

for (var i = 0; i < colorArr.length; i++) {

li[i].index = fontArr[i];

li[i].style.color = colors[colorArr[i]];

li[i].innerHTML = fonts[fontArr[i]];

}

}

liRand();

/// 游戏开始，遍历，如果show的颜色下角标=这个li的下角标即字的下角标对应并且clickBol为true，那么开始

// 上边已经把字的下角标赋给每个li的下角标

for (var i = 0; i < li.length; i++) {

li[i].onclick = function(){

if(colorIndex == this.index && clickBol){

console.log(colorIndex,this.index)

rule.style.display = 'none';

timeBol = true;

liRand();

showRand();

num++;

score.innerHTML = '完成'+num;

}

}

}