Jquery实现数字华容道小游戏

在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字华容道</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
	*{
		padding: 0px;
		margin: 0px;
	}
	#btns>button{
		width: 100px;
		height: 30px;
		border: none;
		background:#0082df;
		color:white;
	}
	#content{
		text-align: center;
		margin: 0 auto;
	}
	#grid{
		border: 1px solid #0082df;
		width: 300px;
		margin: 20px auto;
		height: 300px;
	}
	#grid>div{
		float: left;
		width: 33%;
		background: gray;
		height: 33%;
		margin-bottom:1px;
		margin-right :1px;
	}
	.num{
		background:#0082df;
		width: 99%;
		height: 99%;
		color:white;
		font-size: 30px;
		font-weight: bold;
		line-height:99px;
	}
</style>
</head>
<body>
    <div id="content">
    	<h1>步数<span id="count">0</span></h1>
    	<div id="grid">
    		
    	</div>
    	<div id="btns">
    		<button>重新开始</button>
    	</div>
    </div>
    <script type="text/javascript">
		var arr = [];
		var count=0;
		$('button').click(function(){
			count=0;
			$('#count').html(count);
			arr=[];
			load();
		});

    	function load(){
			for(var i=0;arr.length<8;i++){
				var num = Math.ceil(Math.random()*8)
				if(arr.indexOf(num)==-1){
					arr.push(num)
				}
			}
			arr.push("");
			rander();
    	}
    	load();

		function rander(){
			var html="";
			for(var i=0;i<arr.length;i++){
				if(arr[i]==""){
					html+="<div></div>";
				}else{
					html+="<div><div οnclick='toMove(this)' class='num'>"+arr[i]+"</div></div>";
				}
				
			}
			$('#grid').html(html);
		}
		
		function toMove(obj){
			var value=Number($(obj).text());
			var index=arr.indexOf(value);
			
			if(arr[index+3]==""){
				arr[index]=arr[index+3];
				arr[index+3]=value;
				count++;
				rander();
			}
			if(arr[index-3]==""){
				arr[index]=arr[index-3];
				arr[index-3]=value;
				count++;
				rander();
			}
			if(arr[index+1]==""){
				arr[index]=arr[index+1];
				arr[index+1]=value;
				count++;
				rander();
			}
			if(arr[index-1]==""){
				arr[index]=arr[index-1];
				arr[index-1]=value;
				count++;
				rander();
			}
			$('#count').html(count);
			if(endGame()){
				alert("成功");
			}
		};

		function endGame(){
			arr[arr.indexOf("")]=9;
			for(var i=0;i<arr.length-2;i++){
				if(arr[arr.length-1]==9){
						if(arr[i]>arr[i+1]){
							arr[arr.indexOf(9)]="";
							return false;
						}
				}else{
					arr[arr.indexOf(9)]="";
					return false;
				}
			}
			arr[arr.indexOf(9)]="";
			return true;
		}
    </script>
</body>
</html>
米斯特谭i
发布了6 篇原创文章 · 获赞 4 · 访问量 181
私信关注
Jquery实现数字华容道小游戏

猜你喜欢
