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>