小游戏—配对游戏（附带超详细源码，复制就可实现效果）

最新推荐文章于 2024-05-05 11:25:09 发布

小孙姐

最新推荐文章于 2024-05-05 11:25:09 发布

阅读量506

点赞数 16

分类专栏： web前端小游戏源码文章标签：游戏

本文链接：https://blog.csdn.net/qq_41067077/article/details/138212378

版权

web前端小游戏源码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用web写一个配对游戏玩玩

实现效果如下视频所示：

配对游戏

详细代码解析：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>演示文档-配对游戏</title>
	<style type="text/css">
	table{
		margin:15px auto 15px; 
		background: rgba(60,180,100,0.3);
		color: blue;
		width: 500px;
		height: 500px;
	}
	hr{
			width: 600px;
			height: 5px;
			background: orange;
	}
	h2{text-align: center;}
	td{
		text-align: center;
		background: rgba(160,80,10,0.1);
		width: 100px;
		height: 100px;
	}
	footer{
		margin:0px auto;
			text-align: center;
			background: rgba(0,100,100,0.2);
			padding: 10px;
			width: 500px;
	}
	</style>
</head>
<body>
<h2>配对游戏<hr></h2>
	<table>
		<script>
			var cols=5,rows=4;
			for(var i=0;i<rows;i++){
				str="<tr>";
				for(var j=0;j<cols;j++){
					var sid="img"+((cols*i)+j)
					str+='<td  id="'+sid+'" onclick="showimg('+((cols*i)+j)+')"'+'>'
					str+='</td>'
				}
				str+="</tr>";
				document.write(str)
			}
		</script>
	</table>
	<footer>
		用时：<span id="gameTime"></span>&nbsp&nbsp&nbsp
		<input type="button" value="开始游戏" onclick="init()">
	</footer>
	<script type="text/javascript">
		var length=cols*rows //表格单元格数目
		var map=[] //存储单元格里的内容
		var user=[] //存储每个单元格是否可以翻开的状态
		var times=0;
		var newsatrt;
		var firstIndex=0,secondIndex=0;//点击第一张、第二张图片的索引
		var ctr=0;
		var finished;
		function $(x){
		 	return document.getElementById(x)
	    }
	    for(var i=0;i<length/2;i++){
	    	map[i]=i;
	    	map[length/2+i]=i
	    }
	    // alert(map)
	    function init(){
	    	for (var i=0;i<length;i++){
	    		$("img"+i).innerHTML=''
	    		user[i]=0;//是否显示图片，0为显示背面
	    	}
	    	// alert(map)
	    	map.sort(function(){return Math.random()-0.5})
	    	// alert(map)
	    	times=0; //计时器变量清零
	    	$("gameTime").innerHTML=times+'秒'
	    	newsatrt=true; //标记为新开局
	    }

	    function showimg(x){
	    	if (newsatrt) {
	    		start()
	    		newsatrt=false;
	    	}

	    	 $("img"+x).innerHTML=map[x]
	    	// alert(x)
	    	if (ctr==0) {
	    		ctr++
	    		firstIndex=x //记录第一张图片索引
	    	}else{
	    		if (firstIndex!=x) {
	    		secondIndex=x;//记录第二张图片索引
	    		ctr=0;
	    		check() 
	    		}
	    	}
	   
	    	
	    }

	    function start(){
	    	times+=1
	    	$("gameTime").innerHTML=times+'秒';
	    	setTimeout('start()',1000)
	    }

	    function check(){
	    	if (map[firstIndex]==map[secondIndex]) {
	    		finished++;
	    		user[firstIndex]=1;
				user[secondIndex]=1;//不能再翻
				ctr=0;
	    	}else if(user[firstIndex]==0){
	    		$('img'+firstIndex).innerHTML=' ';
	    		firstIndex=secondIndex;
	    		secondIndex=0;
	    		ctr++ //标记已经点击了一张
	    	}
	    	if (finished==length/2) {
	    		clearTimeout(startTime);
	    		if(confirm("恭喜你！再来一局？")==true){
	    			init()
	    		}
	    	}
	    }

 	</script>
</body>
</html>