前端js实现连连看游戏

最新推荐文章于 2024-01-21 16:21:53 发布

钱端攻城狮

最新推荐文章于 2024-01-21 16:21:53 发布

阅读量5.4k

点赞数 2

分类专栏： js 文章标签：前端 javascript 游戏

本文链接：https://blog.csdn.net/m0_54932975/article/details/123561691

版权

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 400px;
				height: 400px;
				border: 1px solid goldenrod;
				margin: 30px auto;
				list-style: none;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			li{
				width: 100px;
				height: 100px;
				border: 1px solid goldenrod;
				text-align: center;
				line-height: 100px;
				font-size: 30px;
				/*怪异盒模型*/
				box-sizing: border-box;
			}
			
			
		</style>
		<title></title>
	</head>
	<body>
		
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		
		
		
		
		
		
	</body>
</html>

<script type="text/javascript">
	//1.获取标签
	var liArray = document.getElementsByTagName("li");
	
	//2.定义变量
	var numArray = [];
	
	
	
	//3.封装函数
	//随机数
	function randomNum(min, max){
		return Math.floor(Math.random() * (max - min + 1) + min);
	}
	//随机颜色
	function randomColor(){
		var red = randomNum(0, 255);
		var green = randomNum(0, 255);
		var blue = randomNum(0, 255);
		return "rgb(" + red + "," + green + "," + blue + ")";
	}
	
	//封装函数 用于填满数组
	function setNumberArray(){
		//16个数 两两相等
		for(var i = 0; i < 8; i++){
			var temp = randomNum(30, 90);
			//卡着!!一旦随机数已经出现过!就重新再取数字!
			//标记  查看是否可用
			var isExits = false;//默认希望temp不存在
			//经过for循环遍历对比
			for(var j = 0; j < numArray.length; j++){
				if(temp == numArray[j]){
					//随机数已经出现过了!
					isExits = true;
					break;//结束 for..j循环
				}
			}
			//for..j结束  查看isExits的标记状态
			if(isExits == false){
				//随机数可用
				numArray.push(temp);
				numArray.push(temp);
			}else{
				i--; //此次循环失效!i-- 再来一次!!
			}
			
			
		}
		//循环结束   16个数字已经进入数组中
		console.log(numArray);
		//打乱数组	
		crash(numArray);
		console.log(numArray);

		
	}
	//调用函数
	setNumberArray();
	//封装打乱数组的函数
	function crash(arr){
		for(var i = 0; i < 15; i++){
			var n1 = randomNum(0, 15);
			//16个元素,下标是0---15
			var n2 = randomNum(0, 15);
			if(n1 != n2){
				var t = arr[n1];
				arr[n1] = arr[n2];
				arr[n2] = t;
			}	
		}
		
	}
	
	//封装函数 用于设置li标签
	function setLiArray(){
		for(var i = 0; i < liArray.length; i++){
			//赋值文本  li的个数和数字个数一致! 所以下标也一致!
			liArray[i].innerHTML = numArray[i];
			//设置字体颜色随机
			liArray[i].style.color = randomColor();
			//设置li的背景颜色
			liArray[i].style.backgroundColor = randomColor();
		}
	}
	//调用函数
	setLiArray();
	
	//--------------------------------
	//给li添加点击事件
	//专门定义一个数组  来存储点击的li标签
	var arr = [];
	for(var i = 0; i < liArray.length; i++){
		liArray[i].onclick = function(){
			arr.push(this);
			console.log(arr);
		
		//两个就得判断
		if(arr.length == 2){
			//不能重复点击一个标签且点击的两个标签值还得一样
			if(arr[0] != arr[1] && arr[0].innerHTML == arr[1].innerHTML){
				//消除成功!
				arr[0].style.visibility = "hidden";
				arr[1].style.visibility = "hidden";
			}
			
			//在这里  只要arr中存储了两个li  就清空  为下次存储li做准备
			arr = [];
		}
		}
	}
	
	
	
	
</script>