初学JavaScript之颜色小游戏
/*老师布置的的颜色小游戏的作业，根据问题显示的文字找出对应的颜色判断小游戏，可能有很多需要改进的代码，后面会多多改进的，谢谢2018-07-15 12:45:59*/
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<title>颜色小游戏</title>
<style type="text/css">
.container{
width: 400px;
height: 550px;
margin: 0 auto;
border: 1px solid black;
position: relative;
background-color: #F0F0F0;
}
.info{
overflow: hidden;
}
.time{
margin: 20px 20px;
float: left;
}
.score{
margin: 20px 20px;
float: right;
}
.question{
width: 100%;
height: 80px;
font-size: 60px;
text-align: center;
margin-top: 140px;
color: blue;
}
.reset{
width: 100px;
height: 50px;
background-color: green;
color: white;
text-align: center;
line-height: 50px;
margin: 0 auto;
cursor: pointer;
}
.answer{
width: 100%;
height: 80px;
}
.answer ul{
width: 100%;
height: 80px;
width: 350px;
margin: 0 auto;
padding: 0;
}
.answer ul li{
list-style-type: none;
float: left;
height: 60px;
width: 60px;
margin:0 5px ;
font-size: 60px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="info">
<div class="time">倒计时：<span>6.66</span></div>
<div class="score">得分：<span>0</span></div>
</div>
<div class="question">红</div>
<div class="reset">准备</div>
<div class="answer">
<ul>
<li>红</li>
<li>黄</li>
<li>蓝</li>
<li>绿</li>
<li>黑</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var time = document.querySelector(".time").querySelector("span");
var countTime;
var target =true;
//倒计时
function cutTime(){
if(target){
sec =6;
ms =66;
if(target){target=false;}
countTime = setInterval(function(){
if(sec ==0&&ms==0){
clearInterval(countTime);
// target = true;
}
if(ms ==0&&sec>0){
sec-=1;
ms =100;
}
time.innerText=sec+"."+ms;
ms-=1;
},10);
}
}
//随机颜色
var color = ["red","yellow","blue","green","black"];
var text = ["红","黄","蓝","绿","黑"];
var question = document.querySelector(".question");
var answer = document.querySelector(".answer").querySelector("ul");
var answer_li = answer.querySelectorAll("li");
//随机数组
function getRandArr(min,max,len){
var arr=[];
while(arr.length<len){
var target =true;
var rd=Math.floor(Math.random()*(max-min+1)+min);
for(var i=0;i<arr.length;i++){
if(arr[i] == rd){
target =false;
break;
}
}
if(target){
arr.push(rd);
}
}
return arr;
}
changeColor();
//改变颜色
function changeColor(){
textRandom=getRandArr(0,4,5);
colorRandom=getRandArr(0,4,5);
rd = getRandArr(0,4,5);
question.innerText=text[rd[1]];
question.style.color=color[rd[2]];
for(var i =0;i<text.length;i++){
answer_li[i].innerText=text[textRandom[i]];
answer_li[i].style.color=color[colorRandom[i]];
}
}
//li点击事件
var score = document.querySelector(".score").querySelector("span");
var scores =0;
for(var j =0;j<answer_li.length;j++){
answer_li[j].index = j;
answer_li[j].onclick =function(){
cutTime();
resets.innerText="进行中";
console.log(time.innerText);
if(time.innerText!=0){
//增加分数
if(rd[2] == textRandom[this.index]){
scores +=1;
}else{
scores -=1;
}
changeColor();
score.innerText = scores;
}else{
resets.innerText="游戏结束";
}
}
}
//重置游戏
resets = document.querySelector(".reset");
resets.onclick =function(){
console.log(countTime);
resets.innerText="准备";
if(countTime==undefined){
alert("已在准备中，可直接开始");
}
if(time.innerText=="6.66"&&scores==0){
alert("已在准备中，可直接开始");
}
clearInterval(countTime);
target =true;
time.innerText="6.66";
score.innerText=scores=0;
}
</script>
</html>
以上是 初学JavaScript之颜色小游戏 的全部内容， 来源链接： utcz.com/z/510034.html
