JavaScript小游戏，通过颜色选择正确的字

前言

又是一个用JavaScript实现的小游戏，游戏规则为：根据上面的字的颜色从下面选择正确的字，选择正确自动开始

正文

主要思路：

如何改变字体和颜色 ：将颜色和字块，放进数组，通过将数组进行重新排序，这样可以将颜色随机赋给随机的一个字体。

如何进行判断：通过获取提示信息的颜色值和当前点击的对象的innerHTML进行比较，如果符合条件，则进入下一轮，例如：

if(char_inform == '红' && remind.style.color == 'red') {

random();

count++;

}

分数设置：当第一次点击正确时，游戏开始，并且开始计时，每点击正确一次，分数加1；在这儿，通过两层判断，用来防止计时器重复启动。例如:

if(count == 1) {

a++;

if(a == 1) {

cut_down();//计时器函数

}

}

}

这样，当下次点击正确时，a=2;满足条件，计时器函数无法再次调用。

重置游戏：当计时结束时，即time=0时，游戏结束。点击重置按钮，可以重新开始游戏，这儿用到history.go('0')用来刷新界面，以此来达到重置游戏的效果

效果图：

源码如下：

	
		
   
   
		
		
	

	
		
   
   

			
    
    

				
     
     

					
      
      

       
       
						倒计时:
					
      
      
					
      
      

       
       
						总分:
					
      
      
				
     
     
				
     
     

					
      
      


					
      
      
					
      
      

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


					
      
      
				
     
     
			
    
    
			
    
    

				
     
     
			
    
    
		
   
   
	
	<script type="text/javascript">
		//定义颜色和字符数组
		var color = ['red', 'blue', 'pink', 'purple', 'orange'];
		var character = ['红', '蓝', '橙', '粉', '紫'];
		var color1 = ['red', 'blue', 'pink', 'purple', 'orange'];
		var character1 = ['红', '蓝', '橙', '粉', '紫'];
		//创建信息框
		var remind = document.getElementById('remind');
		var inform_ = [];
		var count = 0;
		var time = 20;
		var a = 0;
		for(i = 0; i < character.length; i++) {
			var information = document.getElementById('information');
			var inform = document.createElement('div');
			inform.style.border = '1px solid yellowgreen';
			inform.style.width = '18%';
			inform.style.margin = '2px';
			inform.style.marginTop = '10px';
			inform.style.lineHeight = '60px';
			inform.style.height = '60px';
			inform.style.textAlign = 'center';
			inform.style.fontSize = '2rem';
			inform.style.display = 'inline-block';
			inform.onclick = click;
			inform_.push(inform);
			information.appendChild(inform);
		}
		//功能实现
		function random() {
			color = color.sort(function() {
				return Math.random() - 0.5;
			});
			color1 = color1.sort(function() {
				return Math.random() - 0.5;
			});
			character = character.sort(function() {
				return Math.random() - 0.5;
			});
			character1 = character1.sort(function() {
				return Math.random() - 0.5;
			});
			remind.style.color = color[2];
			remind.innerHTML = character[4];
			for(i = 0; i < color.length; i++) {
				inform_[i].innerHTML = character1[i];
				inform_[i].style.color = color1[i];
			}

		}
		random();
		var count_ = document.getElementById('count_');
		coun = count_.innerHTML;

		function click() {
			var char_inform = this.innerHTML;
			if(time != 0) {
				if(char_inform == '红' && remind.style.color == 'red') {
					random();
					count++;
				} else if(char_inform == '蓝' && remind.style.color == 'blue') {
					random();
					count++;
				} else if(char_inform == '粉' && remind.style.color == 'pink') {
					random();
					count++;
				} else if(char_inform == '紫' && remind.style.color == 'purple') {
					random();
					count++;
				} else if(char_inform == '橙' && remind.style.color == 'orange') {
					random();
					count++;
				}
				count_.innerHTML = coun + count + '分';

				if(count == 1) {
					a++;
					if(a == 1) {
						cut_down();
					}
				}
			}
			console.log(count)
		}
		var timer = null;

		var title = document.getElementById('title');
		titl = title.innerHTML;
		title.innerHTML = titl + time + 's';

		function cut_down() {
			if(time >= 0) {
				timer = setInterval(function() {
					time--;
					title.innerHTML = titl + time + 's';
					console.log(time);
					if(time == 0) {
						alert('游戏结束');
						clearInterval(timer)
							//							history.go('0');
					}
				}, 1000)
			}
		}
		//重置游戏
		var button0=document.getElementById("button0")
		button0.οnclick=function(){
			history.go('0');
		}
		
	</script>