数字华容道小案例（源代码）

最新推荐文章于 2024-06-11 11:06:57 发布

爱吃java的羊儿

最新推荐文章于 2024-06-11 11:06:57 发布

阅读量325

点赞数 2

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_73735007/article/details/133691520

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数字华容道</title>
		<style>
			#step{
				
				color: red;
				text-align: center;
				margin-top: 50px;
				font-size: 30px;
			}
			#ta{
				width: 400px;
				height: 400px;
				margin: 20px auto;
				border: 1px solid black;
				border-collapse: collapse;
			}
			#ta td{
				width: 100px;
				height: 100px;
				border: 1px solid black;
				text-align: center;
				font-size: 30px;
				background-color: antiquewhite;
			}	
		</style>
	</head>
	<body>
		<p id="step">步数：0</p>
		<table id="ta">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>5</td>
				<td>6</td>
				<td>7</td>
				<td>8</td>
			</tr>
			<tr>
				<td>9</td>
				<td>10</td>
				<td>11</td>
				<td>12</td>
			</tr>
			<tr>
				<td>13</td>
				<td>14</td>
				<td></td>
				<td>15</td>
			</tr>
		</table>
		
		<script>
			var tds=document.getElementsByTagName("td")
		
			var s = document.querySelector('#step')
			var step = 0
			var index=14
			tds[index].style.backgroundColor="white"
			function toLeft(){
				console.log(45);
				if(index % 4 !=3){
					tds[index].innerHTML = tds[index+1].innerHTML
				
					tds[index].style.backgroundColor="antiquewhite"
					tds[index+1].innerHTML=""
					tds[index+1].style.backgroundColor="white"
					index=index+1
					step++
					
					s.innerHTML="步数:" + step
				}
			}
			function toRight(){
				if(index%4 !=0){
					tds[index].innerHTML=tds[index-1].innerHTML
					tds[index].style.backgroundColor="antiquewhite"
					tds[index-1].innerHTML=""
					tds[index-1].style.backgroundColor="white"
					index=index-1
					step++
					
					s.innerHTML="步数:" + step
				}
			}
			function toTop(){
				if(index<12){
					tds[index].innerHTML=tds[index+4].innerHTML
					tds[index].style.backgroundColor="antiquewhite"
					tds[index+4].innerHTML=""
					tds[index+4].style.backgroundColor="white"
					index=index+4
					step++
					s.innerHTML="步数:" + step
				}
			}
			function toBottom(){
				if(index>3){
						tds[index].innerHTML=tds[index-4].innerHTML
						tds[index].style.backgroundColor="antiquewhite"
						tds[index-4].innerHTML=""
						tds[index-4].style.backgroundColor="white"
						index=index-4
						step++
						s.innerHTML="步数:" + step
					}
				}
				function win(){
					if(index !=15){
						return false;
					}
					for(var i=0;i<tds.length-1;i++){
						if(tds[i].innerHTML!=i+1){
							return false
						}
					}
					return true
				}
				document.onkeydown=function(e){
					var kc=e.keyCode
					switch(kc){
						case 37:
						    toLeft()
						    break
						case 38:
						    toTop()
						    break
						case 39:
						    toRight()
						    break
						case 40:
						    toBottom()
						    break
					}
					if(win()){
					document.onkeydown=null
					win1.innerHTML="恭喜通关成功"
					}
				}
				function initialize(){
					var n=300
					for(var i=1;i<=n;i++){
						var num=parseInt(Math.random()*4)
						switch(num){
							case 0:
							    toLeft()
							    break;
							case 1:
							    toTop()
							    break;
							case 2:
							    toRight()
							    break;
							case 3:
							    toBottom()
							    break;
						}
						step=0
						s.innerHTML="步数:"+step
					}
				}
				initialize()
		</script>
	</body>
</html>