3*3数字华容道

HTML网页小游戏
《3*3数字华容道》

在这里插入图片描述

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title>3x3数字华容道</title>
		<style type="text/css">
			.div0{
				width:100%;
				height:350px;
				text-align:center;
			}
			.div1 {
				width: 312px;
				height: 312px;
				background-color: #6C6C6C;
				margin-left:45%;
			}
			
			.div2 {
				width: 100px;
				height: 100px;
				float: left;
				margin-left: 3px;
				margin-top: 3px;
				background-color: #fe87bf;
				text-align: center;
				font-size: 80px;
				color: #8a0b4a;
			}
			
			.div3 {
				margin-top: 20px;
				width: 100%;
				height: 80px;
				border-color: #000000;
				text-align: center;
				margin-left:100px;
				float:center;
			}
			
			.buttonStyle {
				width: 150px;
				height: 50px;
				font-size: 30px;
				margin-top: 15px;
				border-radius: 5%;
				background-color: #cf9fff;
			}
			
			.timeText {
				margin-left: 60px;
				font-size: 30px;
			}
			
			.inputStyle {
				float: auto;
				width: 100px;
				height: 30px;
				font-size: 30px;
			}
		</style>
		<script type="text/javascript">
			/**
			 * 5x5数字华容道,一共有9个格子,为每一个格子标记下标,通过下标来找到对应的div元素对象
			 * 格子下标从0开始,每个格子的下标如下所示:
			 *  0,  1,  2, 
			 *  3,  4,  5,
			 *  6,  7,  8
			 */
			window.onload = function() {
				//window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。
				/**
				 * 定义数字数组numArray,值为0~9,该数组中的元素则为每个格子中显示的数字
				 * 同时定义div元素节点对象的数组divObjArray,每一个数组元素均为div元素节点对象
				 * 通过遍历方式,依次对每个数组元素赋值
				 * 
				 * IE浏览器8.x及以下均不支持getElementsByClassName()方法
				 */
				var numArray = new Array(9);
				var divObjArray = new Array(9);
				for(var i = 0; i < divObjArray.length; i++) {
					numArray[i] = i + 1;
					divObjArray[i] = document.getElementById("index_" + i);
				}
 
				/**
				 * 定义“开始游戏”按钮的元素节点对象startButton
				 * 		开始游戏按钮绑定单击响应函数,当玩家点击按钮后,更改按钮显示字样,更改按钮颜色;
				 * 		游戏顺利通关后,复位按钮;
				 * 定义计时器timer
				 * 		定时器设置计时函数timing,
				 * 		当玩家点击开始按钮进入游戏后,定时器开始计时;
				 * 		游戏顺利通关后,复位计时器;
				 * 定义计时器所示时间文本的元素节点对象timeText
				 * 		游戏快开始后,每秒显示当前所用时间;
				 * 		游戏结束后,时间文本复位置空
				 * 定义提示文字“目标图案”的元素节点对象promptText
				 * 		当玩家进入游戏后,将该提示文字隐藏起来;
				 * 		游戏结束后,提示文字再显示
				 *定义跳数jump,每移动一步,就加1
				 */
				var startButton = document.getElementById("startButton");
				var timer;
				var curTime = 0;
				var timeText = document.getElementById("outputTime");
				var promptText = document.getElementById("promptText");
				var curjump = 0;
				var jump = document.getElementById("jump");
 
				startButton.onclick = function() {
					if(startButton.innerHTML == "游戏中...") {
						return;
					}
					
					// 更改按钮显示字样,更改按钮颜色
					startButton.innerHTML = "游戏中...";
					startButton.style.backgroundColor = "#FF7575";
 
					// 随机分布1~9数字所在位置
					numArray.sort(function() {
						return Math.random() > 0.5 ? -1 : 1;
					});
					for(var i = 0; i < divObjArray.length; i++) {
						if(numArray[i] == 9) {
							divObjArray[i].innerHTML = "";
							divObjArray[i].style.backgroundColor = "#6C6C6C";
							continue;
						}
						divObjArray[i].innerHTML = numArray[i];
						divObjArray[i].style.backgroundColor = "#fe87bf";
					}
 
					// 定时器开始计时
					setTimeout(timing, 1000);
					//等待1000毫秒执行timing
 
					// 同步显示时间文本
					curTime = 0;
					timeText.value = curTime;
 
					// 将顶部的“目标图案”字样隐藏
					promptText.style.display = "none";
 
				}
 
				// 计时器
				function timing() {
					curTime++;
					timeText.value = curTime;
					timer = setTimeout(timing, 1000);
				}
 
				/**
				 * 使用9代表空白格,通过变量emptyIndex存储该值所在格子的下标
				 * 并声明更新9空白格位置的函数updateEmptyFun
				 */
				var emptyIndex = 9;
 
				// 获取空白格所在下标
				function updateEmptyFun() {
					emptyIndex = numArray.indexOf(9);
				}
 
				/**
				*运行原理
				 * 为每一个格子绑定单击响应函数
				 * 		这些格子按照点击移动时,是否有规律、规律是否一致,可以分为6组
				 * 		第1组,没有统一规律的一组,下标分别为0,2,6,8的格子
				 * 		第2组,移动规律为可以移动左、下、右,下标为1的格子
				 * 		第3组,移动规律为可以移动左、上、右,下标为7的格子
				 * 		第4组,移动规律为可以移动上、下、右,下标为3的格子
				 * 		第5组,移动规律为可以移动上、下、左,下标为5的格子
				 * 		第6组,移动规律为可以移动上、下、左、右,下标为4的格子
				 * 
				 * 将绑定单击响应函数公共部分抽取出来,作为公共函数updatePositionFun,减少冗余代码
				 * 		公共函数部分包含更新9(即空白格子)在数组numArray中的位置,同时更新格子交换后的颜色、数值
				 * 
				 * 在每次位置更新结束之后,需要判断是否已经完成数字排序;方法为isGameOver
				 * 		若当前空白格未在最后一位,则可直接认为游戏未通关
				 * 		若当前空白格已经在最后一位,则判断前面的所有数字均按照升序排序
				 */
				function updatePositionFun(divIndex) {
					if(startButton.innerHTML == "开始游戏") {
						return;
					}
					curjump += 1;
					jump.value = curjump;
					numArray[emptyIndex] = divObjArray[divIndex].innerHTML;
					numArray[divIndex] = 9;
					divObjArray[emptyIndex].innerHTML = divObjArray[divIndex].innerHTML;
					divObjArray[emptyIndex].style.backgroundColor = "#fe87bf";
					divObjArray[divIndex].innerHTML = "";
					divObjArray[divIndex].style.backgroundColor = "#6C6C6C";
					if(divIndex == 8) {
						isGameOver();
					}
				}
 
				// 判断游戏是否通关
				function isGameOver() {
					for(var i = 0; i < numArray.length; i++) {
						if(numArray[i] != i + 1) {
							return;
						}
					}
					// 游戏通关,弹框告知玩家游戏顺利通关,以及所用时间
					alert("通关啦! 用时:" + timeText.value + "s");
					
					//跳转烟花界面
					setTimeout("window.location.href='烟花.html'",1000);
					// 将“开始游戏”按钮复位
					startButton.innerHTML = "开始游戏";
					startButton.style.backgroundColor = "#cf9fff";
					// 将计时器复位
					clearTimeout(timer);
					curjump = 0;
					jump.value = 0;
					jump.innerHTML = "";
					// 将顶部的“目标图案”字样设置为显示
					promptText.style.display = "block";
				}
 
				// 下标为0的格子的单击响应函数
				divObjArray[0].onclick = function() {
					updateEmptyFun();
					if(emptyIndex == 1 || emptyIndex == 3) {
						updatePositionFun(0);
					}
				}
 
				// 下标为2的格子的单击响应函数
				divObjArray[2].onclick = function() {
					updateEmptyFun();
					if(emptyIndex == 1 || emptyIndex == 5) {
						updatePositionFun(2);
					}
				}
 
				// 下标为6的格子的单击响应函数
				divObjArray[6].onclick = function() {
					updateEmptyFun();
					if(emptyIndex == 3 || emptyIndex == 7) {
						updatePositionFun(6);
					}
				}
 
				// 下标为8的格子的单击响应函数
				divObjArray[8].onclick = function() {
					updateEmptyFun();
					if(emptyIndex == 7 || emptyIndex == 5) {
						updatePositionFun(8);
					}
				}
 
				// 其他下标的格子的单击响应函数
				function resFun() {
					var curIndex;
					for(var i = 1; i < divObjArray.length; i++) {
						if(i == 1) {
							divObjArray[i].onclick = function() {
								updateEmptyFun();
								curIndex = divObjArray.indexOf(this);
								if(emptyIndex == 0 || emptyIndex == 4 || emptyIndex == 2) {
									updatePositionFun(curIndex);
								}
							}
							continue;
						}
						if(i == 7) {
							divObjArray[i].onclick = function() {
								updateEmptyFun();
								curIndex = divObjArray.indexOf(this);
								if(emptyIndex == 6 || emptyIndex ==4 || emptyIndex == 8) {
									updatePositionFun(curIndex);
								}
							}
							continue;
						}
						if(i == 3) {
							divObjArray[i].onclick = function() {
								updateEmptyFun();
								curIndex = divObjArray.indexOf(this);
								if(emptyIndex == 0 || emptyIndex == 4 || emptyIndex == 6) {
									updatePositionFun(curIndex);
								}
							}
							continue;
						}
						if(i == 5) {
							divObjArray[i].onclick = function() {
								updateEmptyFun();
								curIndex = divObjArray.indexOf(this);
								if(emptyIndex == 2 || emptyIndex == 4 || emptyIndex == 8) {
									updatePositionFun(curIndex);
								}
							}
							continue;
						}
						divObjArray[i].onclick = function() {
							updateEmptyFun();
							curIndex = divObjArray.indexOf(this);
							if(emptyIndex == 1 || emptyIndex == 3 || emptyIndex == 7 || emptyIndex == 5) {
								updatePositionFun(curIndex);
							}
						}
 
					}
				}
				resFun();
 
			}
		</script>
	</head>
 
	<body>
		
		<div class="div3">
			<span style="font-size: 50px;color: #8a0b4a;font-family:黑体;" id="promptText">目标图案</span>
		</div>
        <div class = "div0">
		<div class="div1">
			<div class="div2" id="index_0">1</div>
			<div class="div2" id="index_1">2</div>
			<div class="div2" id="index_2">3</div>
			<div class="div2" id="index_3">4</div>
			<div class="div2" id="index_4">5</div>
			<div class="div2" id="index_5">6</div>
			<div class="div2" id="index_6">7</div>
			<div class="div2" id="index_7">8</div>
			
			<div class="div2" style="background-color: #6C6C6C;" id="index_8"></div>
		</div>
		</div>
		<div class="div3" >
			<button class="buttonStyle" id="startButton" name="button" value="StartButton">开始游戏</button>
			<span class="timeText">时间</span>
			<input class="inputStyle" type="text" name="outputTime" id="outputTime" value="" readonly="readonly" />
			<span class="timeText" style="margin-left: 0px;">s</span>
			<span class="timeText">走了</span>
			<input class="inputStyle" type="text" name="jump" id="jump" value="" readonly="readonly" />
			<span class="timeText" style="margin-left: 0px;">步</span>
		</div>
	</body>
 
</html>
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值